Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3-SVG

Public visualization

Viewing a saved revision (read-only)

78b3cd3928394d249fa1f8fe45396f4a

D3-SVG

0 stars0🌍 Public
JJuliaHsu
Last edited Mar 13, 2021
Created on Mar 13, 2021

This example demonstrates data binding in D3 by joining a dataset of five named scores to SVG circles and rectangles. The code uses `d3.selectAll` and `.data()` to bind the array to circle elements, dynamically adjusting their radius and fill color based on score values and parity. It then appends a new SVG with `rect` elements and text labels, using `.enter().append()` to create bars whose width reflects each score and displaying names and values alongside them. D3 v5 and SVG rendering are used throughout.

AI-generated description

An example of modifying DOM selection with D3