oranges

100%

✓ Published0🌍 Public

Last edited Jun 19, 2017

Created on Jun 19, 2017

Four orange circles sit on a plain white canvas, positioned diagonally across the SVG. Their sizes and positions derive from an array of four numeric values, with each circle’s radius and vertical coordinate equal to its data point, while horizontal spacing adds a fixed offset per index. The visualization uses D3 v4’s data join, `selectAll`, `data`, and `enter` to append SVG `circle` elements, setting `fill`, `cx`, `cy`, and `r` attributes. Data comes from a hardcoded array in the script, rendered as static SVG within a 768-by-1024 viewport.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

81% match

Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda

81% match

Loading thumbnail…

4 circulos

Four circles are arranged horizontally on an SVG canvas, with radii of 10, 25, 50, and 100 units, reflecting their numeric data values. The visualization uses D3 v3 to bind the data array to circle elements, positioning them with a linear scale based on index and scaling their radii via a square-root scale (`d3.scale.sqrt`) so area encodes value. The circles sit centered vertically on a 500-by-200 pixel canvas, demonstrating a simple proportional-size encoding with the SVG rendering approach.

Aaaizemberg

79% match

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723

77% match

Loading thumbnail…

Circles Test

Three colored circles sit on a blank canvas, each representing a fruit: a yellow banana, a blue grape, and a red apple, with positions and radii set from an inline array. Built with D3 v4, the visualization appends an SVG element and uses `d3.select`, `selectAll`, and chained `.attr` and `.style` calls to map each data object’s x, y, r, and color properties directly to circle attributes. The rendering relies entirely on SVG shapes, with no axes, labels, or interaction.

JJn1532

77% match

Loading thumbnail…

20. D3 Drawing SVGs Colors

Five circles of varying radii render in a horizontal row on an SVG canvas. D3’s data join binds an array of five numbers to circle elements, mapping each value to the circle’s radius and stroke width. The example demonstrates basic SVG color styling by setting all fills to yellow with orange outlines through the `attr` method, producing a static visualization.

Aamakanju@nyit.edu

77% match

Loading thumbnail…

Circles with D3

This example displays a static collection of eight colored circles of varying sizes and positions on an SVG canvas. Each circle’s radius, stroke color, stroke width, and fill color are defined in a JavaScript array and rendered using D3’s data join with `selectAll`, `data`, `enter`, and `append`. The visualization demonstrates basic SVG shape creation with D3 v7, using attributes like `cx`, `cy`, `r`, `stroke`, and `fill` to map data properties directly to visual elements.

BBismark Kofi Owusu Sarfo

77% match

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof

77% match