Mark Baynes

@markbaynes·3 public vizzes

My choropleth

This choropleth displays a world map derived from the Natural Earth dataset, using a natural Earth projection. The code initializes an SVG canvas and fetches TopoJSON data from the unpkg-hosted world-atlas package via `d3.json`. It imports `geoNaturalEarth1`, `geoPath`, and `select` from d3.v5, although the map’s geographic paths are not yet rendered—only the loaded data is logged to the console. The example demonstrates the initial setup for building a choropleth, with the styling ready for future map layers.

Apr 23, 2021

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS in 2017, with countries colored according to prevalence rates using a sequential yellow-orange-red color scale. Gray marks countries with missing data. Built with React and D3 v5, the visualization uses the `geoNaturalEarth1` projection, `geoPath` for rendering country boundaries and graticules, and `scaleSequential` with `interpolateYlOrRd` for color encoding. Country shapes come from the World Atlas TopoJSON, while HIV prevalence data is loaded from a CSV file hosted on GitHub.

Apr 23, 2021

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and TopoJSON data from the world-atlas dataset to draw country boundaries. A zoom behavior lets users pan and scale the map, while an SVG color legend built from custom code displays the category colors. Hovering highlights individual countries, and the map updates with a red fill on mouseover.

Apr 23, 2021