D3 - Function of data

100%

D3 - Function of data

✓ Published1🌍 Public

Last edited Mar 13, 2021

Created on Mar 13, 2021

This example demonstrates how D3 binds an array of five objects—each containing a name and score—to SVG circles, using the data to set each circle’s radius and fill color. The code explicitly calls `d3.selectAll('circle').data(scores)` to join the data, then uses anonymous functions within `attr` and `style` to map scores to radii and to alternate green and red fills based on score parity. It also appends a semi-transparent red rectangle to a new SVG via `d3.select('body').append('svg')`. All rendering uses SVG elements and D3 v5 selections.

AI-generated description

An example of modifying DOM selection with D3

MIT Licensed

Similar vizzes

Loading thumbnail…

D3-SVG

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.

JJuliaHsu

89% match

Loading thumbnail…

Hello d3js

This example demonstrates basic DOM selection and manipulation with D3. It binds an array of score data to five SVG circles and uses `d3.select` and `d3.selectAll` to modify their attributes dynamically. The code applies styles like `fill` and `radius` through `.style` and `.attr`, including random radii and vertical offsets. A separate message div is updated with `d3.select('#message').text()`, while the third circle receives a CSS class via `.classed()` to highlight it.

JJuliaHsu

84% match

Loading thumbnail…

Data join example

Five circles rendered in SVG display scores for named individuals from a hardcoded data array. The example demonstrates joining data to graphical elements: `d3.selectAll('circle')` selects the existing circle nodes, then the `.data(scores)` method binds each score object to a circle, and the `.attr('r', ...)` call sets circle radii proportionally to the score values. The visualization relies on the D3.js library (version 4.2.2) and uses plain JavaScript array manipulation.

FFrissAnalytics

83% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

80% match

Loading thumbnail…

D3 functions

This example demonstrates D3’s data-join pattern with a set of circles plotted on an SVG canvas. Buttons trigger updates: “Remove” pops a data point, while “Modify” replaces a random point with new coordinates. Using `selectAll('circle')`, `enter`, `merge`, and `exit`, it shows how to handle entering, updating, and exiting elements. The code uses D3 v5’s `scaleLinear`, `select`, and `max`, with data defined as an array of `{x, y}` objects and rendering via SVG circles.

TTimothyMiage

79% match

Loading thumbnail…

circles with D3

This example demonstrates the fundamental D3.js pattern of binding data to SVG circles. It uses `d3.select` to create circles, `d3.scaleLinear` to map data values to pixel positions, and `d3.axisBottom` to render an x-axis. The visualization shows how a simple dataset of numbers translates into a scatterplot, with circle radii scaled proportionally. The code highlights the step-by-step sequence of entering, updating, and exiting elements in a D3 data join.

DDonald Bagwell

79% match

Loading thumbnail…

test

This example shows how D3.js creates and positions circles within an SVG container, using a data-driven approach where each circle’s coordinates, radius, and fill color come from an array of objects. The code demonstrates the D3 General Update pattern with `selectAll('circle')`, `.data(data)`, and `.join('circle')`, followed by method chaining with `.attr()` calls to set visual properties. It also sets the SVG dimensions from the container’s `clientWidth` and `clientHeight`, and applies a background color via `.style()`. The example relies on D3’s selection and data binding APIs, with data hardcoded in the script.

Ssdfux@yahoo.com

79% match

Loading thumbnail…

join example

This example demonstrates a basic data join with D3.js v6, showing how an array of five numeric values becomes a set of circles in an SVG chart. Each circle’s radius is proportional to its corresponding data value, and circles with values above 30 are colored orange while others are light gray. The code uses `d3.select` and `selectAll` with `.data()` and `.join()` to bind the data to circle elements, updating the `cx`, `cy`, `r`, and `fill` attributes. The data is hardcoded as `myData`, and the rendering targets an SVG `<g>` element.

Mma-jacobs

78% match