Skip to main content
SimilarExport ZIP
100%

understanding my playground

✓ Published0🌍 Public
Mmlscmoulika
Last edited May 26, 2021
Created on May 26, 2021
Forked from HTML Starter

This visualization displays a row of colored circles, each representing one of the 20 swatches in d3’s category20 color scale. The example renders circles as SVG elements using D3’s data join pattern, binding an array of 20 values via `d3.range`. It positions each circle along a horizontal linear scale for the x-coordinate and applies the category20 scale directly as the fill color. The page loads D3 v3 from a CDN, and the visualization uses the `d3.select` and `append` APIs.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo
76% match
Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo
75% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
75% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
75% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
75% match
Loading thumbnail…

learning

This example displays seven semi-transparent circles of varying sizes and bright colors on a pale green background, each positioned at distinct coordinates. The visualization uses D3’s `select`, `selectAll`, and `join` methods within `index.js` to bind an array of hardcoded objects—containing `x`, `y`, `r`, and `fill` values—to SVG circle elements. The code sets the background via a styled `svg` element and applies a fixed opacity of 0.708 to all circles. It serves as a simple, editable template, inviting users to fork and customize the theme.

Rrahul887393@gmail.com
75% match
Loading thumbnail…

Circles with D3

This example displays seven colored circles, each with distinct positions, radii, and fill colors, laid out on a light green background. The visualization uses the D3.js library within a data-driven approach, binding circle elements to an array of data objects. It demonstrates D3's method chaining and data join pattern, where the `select`, `selectAll`, `data`, and `join` methods manage the SVG creation and attribute updates, including `cx`, `cy`, `r`, and `fill`.

MMorris Muriithi
74% match
Loading thumbnail…

D3 Selection Exploration

Fifteen circles animate in a wave-like pattern across an SVG canvas, their vertical positions oscillating sinusoidally over time. The visualization demonstrates D3's data-join pattern using `selectAll`, `data`, and `join` to bind an array of generated objects to circle elements, updating their `cx` and `cy` attributes every 100 milliseconds via `setInterval`. The example uses `d3.range` to create the dataset and the `select` function from the D3 v7 library, rendering purely with SVG and a React-compatible setup.

Aadventuresenglish.info@gmail.com
74% match