GerryLivermore

@GerryLivermore·7 public vizzes

Color by Month Example

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017. Each bar’s height corresponds to population, with values labeled along the x-axis. The visualization uses d3.scaleLinear for axes and d3.axisBottom/d3.axisLeft for ticks, rendering as SVG. Clicking a legend item filters the chart, highlighting only the selected country’s bar while dimming others.

May 5, 2019

Loading thumbnail…

yunnanMap with Selectable Countries

This example visualizes a choropleth map of Yunnan Province, China, with selectable countries. The map encodes a categorical color value (`yszl`) using an ordinal color scale with a spectral scheme, and users can click individual countries to highlight them and dim the rest. A color legend allows filtering by color value. The visualization uses D3 v5’s `geoPath`, `geoMercator`, and `zoom` modules to project and render GeoJSON features, while the legend and map interactions are built with D3’s selection and event APIs. Data is loaded from external CSV and JSON sources.

Apr 30, 2019

Loading thumbnail…

Let's make a yunnan map with D3.js!

An interactive D3.js map of Yunnan Province visualizes population data across its administrative regions as semi-transparent circles sized by a square-root scale. Built with d3.geoMercator for projection and d3.geoPath for rendering GeoJSON boundaries, the map supports zooming and panning via the d3.zoom API. The choropleth uses a two-tone fill to distinguish regions with data from those without, while a legend explains the circle sizing. Population statistics are loaded from a CSV file and joined to geographic features using TopoJSON.

Apr 29, 2019

Loading thumbnail…

Circles on a Map

This visualization displays global population by country in 2018, with circles sized proportionally to population counts overlaid on a natural Earth projection map. The map supports pan and zoom interactions, and hovering over countries reveals population data or missing-data indicators. Built with D3 v5, the example uses `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for circle sizing, while styling and legend components are defined in separate JavaScript modules. Population data comes from a UN estimates CSV, with country boundaries from a TopoJSON world atlas.

Apr 29, 2019

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map visualizes world countries colored by economic classification, with a linked legend that filters the map based on selected categories. Clicking a country either selects or deselects it, dimming all other countries; clicking a legend category toggles the map to show only countries in that category. The map uses `d3.geoPath` with the `geoNaturalEarth1` projection, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with the spectral scheme for coloring. Data comes from the world-atlas TSV and TopoJSON files, rendered as SVG paths.

Apr 29, 2019

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economy classification, using a spectral ordinal scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with a natural Earth projection via `d3.geoPath`. Users can pan and zoom through the `d3.zoom` behavior, while a color legend built with custom SVG elements displays the categories. Hovering highlights countries in red, and tooltips show each country’s name and economic group.

Apr 29, 2019

Loading thumbnail…

Cicrcle on Map

This map visualization displays global population estimates for 2018 using circles overlaid on a geographic projection. The code uses d3.geoPath with a natural Earth projection to render country outlines, while d3.scaleSqrt determines circle sizes based on population data from the UN Population Estimates dataset. Interactive features include zoom via d3.zoom and hover tooltips showing regional names and population counts. A custom size legend with d3.ticks explains the circle scaling, and countries with missing data appear in a distinct color.

Apr 29, 2019