Skip to main content
SimilarExport ZIP
100%

Learning D3

✓ Published0🌍 Public
SSubodh Singh
Last edited Feb 5, 2020
Created on Feb 4, 2020
Forked from Learning D3

This example presents a circular astrological chart with twelve labeled house sectors, each containing planetary symbols. Concentric circles divide the chart into inner and outer zones, with radial lines connecting sector positions. The visualization uses D3 v5 selections to create SVG circles, lines, and text elements. It computes positions using trigonometric functions and displays ordinal house numbers alongside planetary glyphs, with astronomical data hardcoded as an array of abbreviations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Learning D3

A D3.js visualization displays a zodiac chart on an SVG canvas, with astrological symbols placed in twelve house positions. The chart uses D3 selections to draw a grey arena background, diagonal and partial lines, and text elements mapped to house offsets. Planet symbols like Mercury and Venus appear blue, and hovering over them triggers a tooltip with opacity transitions. The code employs d3.select, append, attr, and event handlers for interactivity, though the data is hardcoded rather than loaded externally.

SSubodh Singh
88% 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
71% match
Loading thumbnail…

D3 v7 Starter

This example shows a set of fifteen circles arranged in a sine wave pattern across the center of the browser window. The visualization demonstrates the basic workflow of D3 v7’s new declarative API, using `select` and `range` from the `d3` module to generate and bind data. The circles are rendered as SVG elements, with their horizontal and vertical positions calculated from each data index. The code explicitly uses `svg.selectAll('circle')` with a `.join('circle')` operation to create the marks, and sets radius, x, and y coordinates via `.attr()`. The visualization is purely data-driven, using a generated numeric sequence rather than an external dataset.

Aanoptic
71% 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
71% 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
71% 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
71% match
Loading thumbnail…

circles with D3

This example demonstrates the fundamental D3.js pattern of binding data to SVG circles. It uses `d3.select` to create circles, `d3.scaleLinear` to map data values to pixel positions, and `d3.axisBottom` to render an x-axis. The visualization shows how a simple dataset of numbers translates into a scatterplot, with circle radii scaled proportionally. The code highlights the step-by-step sequence of entering, updating, and exiting elements in a D3 data join.

DDonald Bagwell
71% match
Loading thumbnail…

Solar System

A pseudo-3D solar system rendered in SVG with D3 v4, showing all eight planets arranged in a row, each rotating at relative velocities to Earth. Orthographic projections and radial gradients provide shading, while hover interactions reveal radius, tilt, and day length for each planet. The visualization includes a starfield background and planetary graticules, driven entirely by D3 selections and scales.

FFrissAnalytics
71% match