jrodg

@jrodg·3 public vizzes

Choropleth map

A choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization renders geographic boundaries via TopoJSON data and the d3.geoPath projection, with a legend displaying color categories. Interactive zooming is enabled through d3.zoom, and hovering highlights individual countries. Data comes from the world-atlas and visionscarto-world-atlas packages.

Jul 7, 2020

Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend displaying an ordinal scale with fruit names and assigned colors, and a size legend using a square-root scale to map numeric values to circle radii. The code uses D3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and `selection.call` to bind the legend functions. Each legend updates through data joins, with circles and text elements positioned using transform attributes and spacing constants.

Jul 7, 2020

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data across four coordinated panels: a line chart of yearly trends, a choropleth map of state-level averages, a bar chart of top states, and a detailed multi-line view. Users filter by year and select states across views. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `d3.geoAlbersUsa` for map projection, while a color legend and highlighted bars/curves show selections. Data is loaded from a CSV via `d3.csv`.

Jul 7, 2020