knstrom

@knstrom·6 public vizzes

Focus_Example

This interactive choropleth displays country economies using a categorical color scale from `schemeGreens`, with World Atlas TopoJSON data and a natural Earth projection via `d3.geoPath`. Clicking a country or legend item isolates that value, dimming all other map regions and legend ticks. Zoom and pan are enabled through `d3.zoom`. Hovering shows country names and values via SVG `<title>`. The visualization uses a d3 v5 ordinal scale and modular ES6 imports, rendering entirely as SVG.

Mar 3, 2022

Loading thumbnail…

Aggregation_Example

This visualization shows projected population by continent over time using multi-line charts with D3 v5. It plots time on the x-axis against population on the y-axis, with each continent represented as a colored line and sorted by final population value. The chart includes a legend and gridlines, with data sourced from UN population estimates and medium variant projections (1950-2100). The code uses `d3.csv`, `d3.nest`, `d3.line`, `d3.curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, and `d3.axisBottom` to process and render the SVG visualization.

Mar 3, 2022

Loading thumbnail…

Interactions

This example shows an interactive scatter plot of automobile data from the auto-mpg.csv dataset. Two dropdown menus let viewers select which columns from the dataset to plot on the x- and y-axes, with the plot updating accordingly. D3 v5 is used to render the SVG visualization, with the `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs handling scaling and axes. Each point animates to its new position over 2 seconds when the selection changes, using a transition with a 10-millisecond per-point delay. The scatterPlot module is reused with different column mappings triggered by the dropdown menu callbacks.

Feb 17, 2022

Loading thumbnail…

dataMap

This example renders a 3D orthographic globe using D3.js and TopoJSON. It displays world countries as light green polygons with subtle black strokes atop a blue sphere. The code uses `d3.geoOrthographic` and `d3.geoPath` to project geographic coordinates to SVG paths. Country boundaries come from the World Atlas TopoJSON dataset (110m resolution), with features extracted via `topojson.feature`. The visualization demonstrates how D3 can combine geographic projections with topojson data to create interactive-style map views.

Feb 17, 2022

Loading thumbnail…

D3Overlay

This example shows a world map rendered with D3Overlay, featuring light green countries on a dark blue spherical background using a Natural Earth projection. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the `topojson.feature` API. The code employs `d3.geoPath` with a `d3.geoNaturalEarth1` projection to draw country boundaries as SVG paths, and includes a separate path for the sphere outline.

Feb 17, 2022

Loading thumbnail…

Ex1

This example demonstrates the initial setup required to begin using D3 version 6, displaying a blank page with no visible visualization. The code imports the `select` function from D3 v7 and calls `select('body').text('')` to clear the body element, while the HTML loads the D3 library from a CDN and references a separate `bundle.js` file. The page’s large 13em font size and centered text align hint at potential typographic content, but no data or rendering occurs beyond the empty selection.

Feb 8, 2022