Skip to main content
Log in
Y

YIN Wanxuan

@yinnnn·6 public vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map using D3.js, displaying country boundaries over a blue sphere. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic paths as SVG elements with the `d3.geoPath` generator. Country data is fetched from the world-atlas TopoJSON dataset and converted using the `topojson.feature` API. The map is styled with CSS, filling countries in light green and the sphere in blue, with a basic interactive-free presentation.

May 6, 2020
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive pan and zoom on a natural Earth projection map. The visualization renders country boundaries from TopoJSON world-atlas data using `d3.geoNaturalEarth1` and `d3.geoPath`, with hover highlighting via CSS. The code applies `d3.zoom` to the SVG container, updating a transform attribute on a group element during zoom events. Country names from the `world/50m.tsv` file appear as tooltips using SVG `<title>` elements, while the sphere background and country fills come from external styles.

May 6, 2020
Loading thumbnail…

Circles on a Map

This visualization displays the global distribution of new COVID-19 cases using proportional circles positioned by country centroids on a natural Earth projection. The circle areas encode population data loaded from CSV files, while tooltips reveal exact values on hover. Built with D3 v5, the visualization uses d3.geoPath for map rendering, d3.geoCentroid for positioning, d3.scaleSqrt for circle sizing, and d3.zoom for pan and zoom interactions. A size legend with d3.ticks communicates the scale, and world atlas TopoJSON provides the country boundaries.

May 6, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using a 2018 United Nations estimate. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis, with grid lines from `d3.axisBottom` and a customized tick format. Data is loaded from a CSV via `d3.csv`, and the SVG is rendered with `d3.select` and `d3.append`. The example highlights D3.js v5 axis customization and margin-based layout.

Feb 8, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of provincial amounts from a CSV file, with each bar’s length proportional to its value. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes. Data is loaded via `d3.csv`, converted to numbers, and rendered as SVG rectangles with a steelblue fill, using margins to offset the plotting area.

Feb 8, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The code demonstrates customizing D3 axes using `d3.axisBottom` and `d3.axisLeft`, with tick formatting via `d3.format` to abbreviate large numbers. It loads data from a CSV file with `d3.csv`, scales bars with `d3.scaleLinear` and `d3.scaleBand`, and renders the chart as SVG. The chart includes a title, axis labels, and grid lines, all styled with steelblue bars.

Feb 8, 2020