fresh block

100%

✓ Published0🌍 Public

Last edited Oct 9, 2016

Created on Oct 9, 2016

An interactive SVG pictogram displays ten identical icons arranged in a single row, with a jQuery UI slider controlling how many are highlighted in black versus white. The code defines a reusable icon path in `<defs>`, generates each instance via `d3.selectAll("use").data().enter()`, and updates classes through `d3.selectAll("use").attr("class", …)` based on the slider’s `ui.value`. A text label shows the current count.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/59de7dfa17d35c2c6592d9c0995f4f4b'>fresh block</a>

mit Licensed

Similar vizzes

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

79% match

Loading thumbnail…

fresh block

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.

SSelan87

78% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

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

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

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

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

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

75% match