Skip to main content
Log in
B

Brandon Lehr

@blehr·8 public vizzes

Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

Aug 29, 2019
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global income groups, coloring each country through a categorical `scaleOrdinal` with the `schemeSpectral` range. Users click legend items to filter the map, highlighting matching countries while dimming others and the sphere backdrop. The map renders via `geoNaturalEarth1`, `geoPath`, and `zoom` interactions, while the legend uses click handlers and opacity toggling. Data comes from TopoJSON world-atlas and TSV files loaded through `d3.json` and `d3.tsv`.

Aug 28, 2019
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

Aug 28, 2019
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

Aug 27, 2019
Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

Aug 26, 2019
Loading thumbnail…

Chicago Crime Data First Pass

A scatter plot maps reported Chicago crime incidents to points on a U.S. map backdrop. Red circles mark each of the approximately 200 latitude/longitude coordinates from the local CSV file, colored by crime type. The visualization uses d3.json with TopoJSON from the US Atlas to draw the state boundaries via the d3.geoPath and geoAlbersUsa projections. Animated scaling of the points is handled through d3 transitions, while mouseover tooltips display the primary crime type.

Aug 23, 2019
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

Aug 23, 2019
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend types for scatterplot-style data: a color legend mapping categorical values to distinct hues, and a size legend using a square-root scale to encode continuous numeric magnitudes. Both legends render as SVG groups containing circles and text labels, with the color legend using `d3.scaleOrdinal` and the size legend using `d3.scaleSqrt` with tick generation from `sizeScale.ticks`. The legends are positioned manually via SVG transforms and styled with CSS classes for the tick marks.

Aug 22, 2019