fresh block

100%

✓ Published0🌍 Public

Last edited Feb 19, 2018

Created on Feb 19, 2018

Ten black circles sit in a ring around the center of an SVG canvas. Moving the mouse over a circle turns it red; moving the mouse away returns it to black. The code uses D3 v4 to bind an array of ten numbers to circle elements, positioning each one with trigonometric functions based on its index. The SVG is created with d3.select and appended directly to the body, with a fixed width of 960 pixels and height of 500 pixels.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

88% match

Loading thumbnail…

fresh block

Ten dark circles orbit a central point in a ring, but clicking one sends it to the middle while the others reposition around it. Hovering highlights a circle in red. Built with D3 v4, the example uses `d3.range` to generate data, SVG `circle` elements, and chained `transition().duration()` calls to animate positions. Mouse events (`mouseover`, `mouseout`, `click`) control selection and recoloring, with the selected index driving the layout calculation.

MMicrobie

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

86% match

Loading thumbnail…

fresh block

Three circles, colored green, purple, and red, are positioned on a small square SVG canvas using fixed x and y coordinates. The example demonstrates basic data binding in D3.js version 3.5.5, where an array of JavaScript objects supplies the circles’ positions, radii, and fill colors. The code appends circle elements to the SVG container by selecting all circles, binding the data, and then setting `cx`, `cy`, `r`, and `fill` attributes through anonymous functions. It renders as an SVG via the `d3.select` and `append` API.

SSmith5mr

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

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

84% match

Loading thumbnail…

fresh block

A purple circle is centered on an SVG canvas with a counter displayed as text beside it. Clicking the circle increments the count and enlarges the circle’s radius based on the new value. The code uses d3.select to bind a click handler and update the text and circle attributes, with a simple count() function tracking the integer state. Rendering is done via SVG elements created through D3 v4’s selection API.

MMyoshu

84% match