Joel Schwartz

@joelschwartz·7 public vizzes

Sized Points on a Map

Two legends demonstrate how to encode data with color and size scales on an SVG map. The color legend uses a `d3.scaleOrdinal` to map fruit categories to distinct colors, while the size legend applies a `d3.scaleSqrt` to represent numeric values through circle radii. Both legends are rendered with custom functions, `colorLegend` and `sizeLegend`, which append groups containing circles and text labels.

Jun 9, 2020

Loading thumbnail…

node tree of countries

A node tree visualizes the hierarchical structure of countries, grouped by continent and subregion, with labels sized by depth. The data is loaded from `data.json` and processed with `d3.hierarchy` and `d3.tree`. Each link renders as a horizontal path via `d3.linkHorizontal`, while text labels use D3 selections. The SVG supports zooming through `d3.zoom`, and styling uses a Playfair Display font with white text shadows.

Jun 9, 2020

Loading thumbnail…

circles on the map

This example displays global population data for 2018 on a natural Earth projection map, with semi-transparent teal circles sized by population magnitude at each country’s centroid. Countries lacking data appear in pink, while those with values are gray; hovering highlights a country and a tooltip shows its name and formatted population. The visualization uses D3 v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and TopoJSON for world boundaries, rendering in SVG. Two legends—a color legend and an interactive size legend—communicate the encoding, and zooming is enabled via `d3.zoom`.

May 6, 2020

Loading thumbnail…

Choropleth map

This choropleth map displays countries colored by economic classification using a spectral color scale. Users can click legend items to highlight all countries in that category while dimming others, with zoom and pan via `d3.zoom`. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` projection using TopoJSON data from the world-atlas dataset. A legend, built with custom SVG circles and text, provides interactive filtering, and hover effects change country fill colors.

May 5, 2020

Loading thumbnail…

Choropleth map

A world map rendered as a choropleth shades each country according to its economic classification, using a spectral color scale. Hovering highlights a country and shows its name and classification. The map is drawn with d3.geoPath and a Natural Earth projection, with TopoJSON data from the world-atlas package. A custom colorLegend function displays the ordinal scale, and d3.zoom enables interactive panning and zooming of the SVG.

May 5, 2020

Loading thumbnail…

Cars Scatter plot with menus

This interactive scatter plot displays fuel economy data from the auto-mpg dataset, with dropdown menus that let users select which numeric columns to plot on the X and Y axes. The code uses D3.js v5 scales, axes, and transitions, along with a reusable dropdown menu component. Each car is represented by a semi-transparent green circle that animates to its new position when the menu selection changes, using `transition().duration(2000).delay()` for staggered motion. The visualization updates axes labels and tick marks dynamically based on the selected columns.

May 5, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries in 2020, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position rectangular marks, while `AxisBottom` and `AxisLeft` render tick lines and labels with a Poppins font. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Hovering over a bar reveals a tooltip with the formatted population, using the `title` element.

Apr 7, 2020