fresh block

100%

✓ Published0🌍 Public

Last edited Jan 31, 2017

Created on Jan 31, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization plots five data points from a static array as green or purple circles on an SVG canvas. Each circle’s x and y coordinates equal its data value, creating a diagonal scatter pattern. The code uses d3.select and append to build SVG elements, with the d3.v4 library handling data binding. Colors are set conditionally: values over 100 appear purple, while all others render green. The circle radius is fixed at 5 pixels.

KKunnyKou

90% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

89% 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 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

87% 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

86% match

Loading thumbnail…

fresh block

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.

BBrandonStroud

86% match

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

85% 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

83% match