Skip to main content
SimilarExport ZIP
100%

UX

✓ Published0🌍 Public
SSeegson
Last edited Sep 26, 2022
Created on Sep 19, 2022
Forked from MIAGE base

Three purple circles on an SVG canvas form the centerpiece of this playful D3.js v5 example. Hovering over each circle changes its fill color to a different hue, while hovering over the third circle also randomly repositions all three along the x-axis using `d3.randomUniform`. A button and a large text message provide additional visual elements. The page loads population data from a CSV file via `d3.csv`, though the data is only logged to the console and used to render non-visible rectangles.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This scatterplot shows a small set of pink circles positioned within a 250×250 SVG canvas, with a large yellow title in the Jua font above it. The visualization reads data from a remote CSV file hosted on GitHub, parsing each row with `d3.csv` and passing the parsed objects to a custom function named `a_name`. That function uses the D3.js library (version 3.5.5) to bind data to circles, appending new circles, updating their `cx` and `cy` attributes based on the `x` and `y` values from the data, and removing any circles for removed records. The rendering is done via SVG, and the circle fill color and text styling are defined in the page’s CSS.

PPabloDA
77% match
Loading thumbnail…

D3 Example

This scatterplot shows a small set of pink circles positioned within a 250×250 SVG canvas, with a large yellow title in the Jua font above it. The visualization reads data from a remote CSV file hosted on GitHub, parsing each row with `d3.csv` and passing the parsed objects to a custom function named `a_name`. That function uses the D3.js library (version 3.5.5) to bind data to circles, appending new circles, updating their `cx` and `cy` attributes based on the `x` and `y` values from the data, and removing any circles for removed records. The rendering is done via SVG, and the circle fill color and text styling are defined in the page’s CSS.

PPabloDA
77% 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
76% 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
76% 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
76% match
Loading thumbnail…

Changing data

Two datasets of varying circle sizes and counts are displayed along a horizontal axis. A button click uses `d3.select` and event listeners to toggle between datasets, demonstrating D3’s data join pattern with `data()`, `enter()`, and `exit()`. New circles appear via `append` with an initial radius of zero, while all circles transition with `transition().duration(500)` to update their `cx` and `r` attributes, and the dataset label changes via `select("text").text()`. The SVG elements are rendered as orange, semi-transparent circles.

WWarren-Fitzhenry
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…

Learn D3

Clicking the update button regenerates a random dataset and redraws a row of circles across an SVG chart. Each circle’s radius and fill color encode its numeric value, with values above 30 turning orange and others light gray. The example uses D3 v7’s data join pattern (`selectAll`, `data`, `join`) to create and update circle elements, driven by a simple JavaScript function that generates random data counts and sizes.

SSubhendu Karmakar
75% match