fresh block

100%

✓ Published0🌍 Public

Last edited Jun 15, 2016

Created on Jun 15, 2016

This visualization displays concentric reference circles at 100%, 50%, and 15% radii, each labeled with its percentage, using a square-root scale to map percentage values to circle radii. Built with D3.js (version 3.5.5), the code selects the body element, appends an SVG, and uses `d3.scale.sqrt()` to scale the domain [0,100] to a radius range of 0 to 250 pixels. The circles and text labels are positioned absolutely within a 700×480 SVG viewport, with the data source initialized as a gist.

AI-generated description

Built with blockbuilder.org

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

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

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

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

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

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

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

78% match

Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca

78% match