fresh block

100%

✓ Published0🌍 Public

Last edited Feb 23, 2016

Created on Feb 23, 2016

This example shows three circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js version 3.5.5 to bind an array of numbers to circle elements and map each value to screen coordinates. The code selects the SVG container, appends circle elements, and sets their cx and cy attributes directly from the data, while fill colors are assigned conditionally: green for 30, purple for 70, and red for 110. The rendering approach relies on D3’s data join and attribute manipulation, with no axes or scales involved.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/BrandonStroud/'>BrandonStroud</a>'s block: <a href='http://bl.ocks.org/BrandonStroud/ccd1b2d7ce54e59e455e'>fresh block</a>

Similar vizzes

Loading thumbnail…

fresh block

This example shows three fixed circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js to bind an array of numbers to circle elements, setting their horizontal and vertical centers from the data and giving them a constant radius. The `style` method applies a fill color through a conditional function that maps the values 30, 70, and 110 to green, purple, and red, respectively. The SVG container is created with a fixed width and height of 200 pixels, and the circles are appended using D3’s data join pattern.

BBrandonStroud

96% match

Loading thumbnail…

fresh block

This example shows four red circles of increasing size arranged diagonally on a blank SVG canvas. Each circle is scaled by a data value from the array [0.25, 0.5, 0.75, 1] using a translate and scale transform, producing a stepped progression. Built with D3 v4, the code uses `d3.select` to create the SVG, appends a base circle, then selects all circles with class "red" and applies the data-driven transforms. The data source is a simple inline array, with the rendering handled entirely through SVG attributes.

BBrunoDumas

88% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

88% match

Loading thumbnail…

fresh block

Four orange circles are drawn on a blank SVG canvas, each sized and positioned proportionally to its corresponding value in the static array `[10, 30, 50, 100]`. The example demonstrates a basic data join using d3.v5, where `selectAll("circle")` and `.data()` bind the array elements, and `.enter()` appends the shapes. Circle radii and y-coordinates reflect the data values directly, while x-coordinates increase with index. The visualization shows a simple, non-interactive mapping of numbers to visual attributes, with no axes or labels included.

IIMYin

88% match

Loading thumbnail…

fresh block

This example displays a circular arrangement of ten circles, each with a radius of 50 pixels, positioned around a central point using a computed angle function. The visualization is built with D3.v4, rendering SVG elements onto a 960x500 canvas, with circles placed via an angular distribution formula. The code includes a mouseover event that is intended to change the circle's style, though the specific styling action is not defined. The data comes from a simple generated range of ten values.

GGJHazelaar

87% match

Loading thumbnail…

fresh block

Seven circles are plotted diagonally across a small SVG canvas. Each circle is drawn twice, with the second copy rendered in red and only for data values excluding 6, creating a simple visual comparison of data point positions. Built with D3 v4, the code uses `d3.select`, `svg.selectAll`, and `append` to generate SVG groups and circles, with coordinates computed directly from the data array values.

BBrunoDumas

87% match

Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis

86% match

Loading thumbnail…

fresh block

A single red circle floats on a blank canvas, positioned by fixed pixel coordinates, while a row of empty text elements is bound to an array of numbers. The example demonstrates basic SVG shape creation and data-join fundamentals with D3 v4, using `d3.select` and `d3.selectAll` to manipulate DOM elements. The circle’s fill color is set to Peru, and the code appends both SVG and HTML elements, though the text nodes remain without visible content. The visualization is minimal, focusing on core D3 syntax rather than presenting meaningful data.

335degrees

84% match