Skip to main content
Log in
支

支良

@GinaS1122·6 public vizzes

Loading thumbnail…

Untitled

This example demonstrates a simple D3.js visualization that poses the question “Is this a circle?” and confirms the presence of a circle rendered in an SVG. The page includes a fixed circular shape with a radius of 20 pixels, positioned on an SVG canvas, alongside HTML text elements. Using d3.v3, the script selects the paragraph element and updates its text content to “This is the output from D3!”, showcasing basic DOM manipulation through D3’s selection API. The rendering relies on SVG elements defined directly in the markup.

Mar 29, 2020
Loading thumbnail…

D3 Course 1: Bar Chart

This bar chart displays population figures for ten countries, from China at over 1.4 billion down to Mexico at 130 million. The visualization uses D3 v5 with a promise-based data-loading pattern, where `csv` fetches `data.csv` and multiplies each population value by 1,000. The SVG rendering employs `scaleLinear` and `scaleBand` for axes, with `axisBottom` and `axisLeft` to draw ticks and gridlines. The chart formats population labels as abbreviated values with a custom tick formatter that replaces "G" with "B", and removes the domain lines for a cleaner look.

Mar 29, 2020
Loading thumbnail…

D3 Course 1: Bar Chart

This bar chart displays population figures for ten countries, from China at over 1.4 billion down to Mexico at 130 million. The visualization uses D3 v5 with a promise-based data-loading pattern, where `csv` fetches `data.csv` and multiplies each population value by 1,000. The SVG rendering employs `scaleLinear` and `scaleBand` for axes, with `axisBottom` and `axisLeft` to draw ticks and gridlines. The chart formats population labels as abbreviated values with a custom tick formatter that replaces "G" with "B", and removes the domain lines for a cleaner look.

Mar 29, 2020
Loading thumbnail…

D3 Course 1: Bar Chart

This example shows a bar chart comparing population totals for ten countries, drawn as an SVG with a linear scale for population and a band scale for country names. The render function builds axes, labels, and rectangular bars using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `selectAll`/`enter`. It loads data from a local CSV file via `d3.csv`, multiplies each population value by 1000, and displays the result with formatted tick labels. The chart includes a title, axis labels, and a steel-blue fill for each bar.

Mar 29, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling face using D3.js v5 with SVG. The code builds circles, ellipses, and an arc path, applying linear gradients to the face and features. It uses `d3.select` to manipulate SVG elements, `d3.arc` to generate the mouth, and fixed numeric attributes for positioning. The face, eyes, and mouth are filled with gradient colors defined in SVG `defs`.

Mar 28, 2020
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal points, sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and sphere geometry from World Atlas TopoJSON, while city coordinates are projected from a Simplemaps CSV. React components manage the asynchronous data loading via d3.csv and d3.json, with SVG circles positioned by the projection and radii mapped from the scale.

Mar 28, 2020