Adrian Tan

@adriantanjm·4 public vizzes

Choropleth Map

This choropleth map visualizes geographic regions using color-coded areas, with countries filled in light green and strokes in black at low opacity. The visualization employs a blue sphere to represent the globe, set against a clean white background. Built with D3 v5, the code uses `select` to target the SVG element and `json` to load geographic data from the OneMap service, while the `topojson` library’s `feature` function processes the topology. The map is rendered as an SVG with a fixed 960x500 viewport, with styling defined in CSS.

Mar 28, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a diverging red-blue ordinal scale, with a zoomable Natural Earth projection and a color legend built from custom SVG circles. The visualization loads world country boundaries from TopoJSON and joins them to TSV metadata, then renders each nation as a styled SVG path with hover highlighting. It uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with the schemeRdBu palette, while the legend is implemented as a reusable module.

Mar 28, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a red-blue ordinal color scale, with a zoomable Natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON dataset and joins them to TSV metadata by ISO country code. The map includes an interactive color legend built with custom D3 selections, and uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with schemeRdBu. Hovering highlights individual countries, and a title tooltip shows each country’s name and income group.

Mar 28, 2020

Loading thumbnail…

Chloropleth Map

This choropleth map displays countries colored by economic classification, with a color legend positioned in the lower-left corner and hover interactions that highlight individual nations. The visualization uses D3 v5 with d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features, while d3.zoom enables pan and zoom functionality. TopoJSON and TSV data from the world-atlas package populate the map, with d3.scaleOrdinal mapping economy categories to a spectral color scheme. SVG elements render all visuals, and the legend uses custom D3 scales and tick marks for clarity.

Mar 28, 2020