ToooooooT

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of the four measured flower features via dropdown menus. The plot displays each flower as a semi-transparent circle colored by its species class, with a legend identifying the three types. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and animates points from the center to their positions using a two-second `transition` with staggered delays. The data is loaded from a CSV file, and the interface is rendered as SVG elements.

Oct 10, 2022

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for San Francisco, drawn from the Data Canvas - Sense Your City dataset. Multiple colored lines represent individual cities, with a color legend and time-based x-axis. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping data by city. Axes are rendered with d3.axisBottom and d3.axisLeft, while a custom colorLegend module handles the legend.

Circles on a Map

This map visualization displays global population data for 2018, using scaled circles positioned at country centroids to represent population size. A legend with circles and labels explains the size-to-population mapping, while hovering over a country reveals its name and exact population. The visualization is built with d3.js, using d3.geoNaturalEarth1 for the map projection, d3.geoPath to render country boundaries, and d3.scaleSqrt for circle sizing. It loads population estimates from a CSV file and country shapes from a TopoJSON atlas, rendering everything as SVG.

Scatter Plot with Menus

This interactive scatter plot from the D3 example gallery uses two dropdown menus to let the viewer choose which data columns from the auto-mpg CSV dataset appear on the x- and y-axes. The visualization is rendered as an SVG, with circles animating into place over two seconds via D3's `.transition()` method. The code leverages the `d3.scaleLinear` and `d3.extent` functions to compute scales, and `d3.axisBottom` and `d3.axisLeft` to draw the axes with tick marks.

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications using a categorical color scale, with a legend that filters countries by clicking on a category to highlight matches and fade others. Built with D3 v5, it renders country shapes via d3.geoPath and TopoJSON data from the World Atlas, while the legend uses d3.scaleOrdinal with a spectral scheme. Zoom and pan interactions are handled through d3.zoom, and hovering changes a country’s fill to red.

Choropleth Map

This choropleth map colors countries by income group using a natural Earth projection, with a categorical color scale and a clickable legend of colored circles. The map supports zooming and panning via d3.zoom, and country tooltips display name and income group. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from TopoJSON data loaded from world-atlas, while the legend is implemented as a custom reusable component.

Color and Size Legends

Two legend components built with D3.js v7 appear in a single SVG scene. The color legend uses `d3.scaleOrdinal` to map fruit names—apple, lemon, lime, orange—to distinct hues, with each tick rendered as a circle and label. The size legend employs `d3.scaleSqrt` to map numeric values from 0 to 10 into circle radii, showing five ticks. Both legends are constructed via reusable JavaScript modules that append `g` elements and merge enter/exit selections, with CSS styling the tick text and circle strokes.

World Countries Tree

This visualization displays the hierarchical structure of world countries, organizing them by continent and subregion into a horizontal tree layout. The root node, "World," branches into continents like Asia, which further divide into subregions and individual countries. The SVG rendering uses D3.js v5’s `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and a zoom interaction via `d3.zoom` to navigate the large dataset. Node labels are positioned with dynamic font sizes based on depth, and the data loads asynchronously from a JSON file.

Blank Canvas

A full-screen blank canvas renders as a rounded rectangle filling the browser viewport, with no marks or data. The visualization uses D3 v5’s `select` to target the SVG element and sets its dimensions from the document body’s client width and height, then appends a single `rect` with a 40-pixel corner radius. The fixed-position CSS ensures the canvas remains edge-to-edge regardless of scroll, while the empty SVG plus appended rectangle constitutes the entire graphic.

Cheap Tricks for Interation

This example uses D3.js v5 with geo projections and TopoJSON to render an interactive world map on an SVG canvas. It displays country boundaries as light green shapes with dark strokes, and a blue sphere as the background, with country names provided as tooltips from the world-atlas TSV dataset. Hovering a country turns it red, while a D3 zoom interaction lets users scale the entire map. The map’s projection is generated with `d3.geoNaturalEarth1` and `d3.geoPath`, and the zoom behavior is implemented via `d3.zoom`.

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example demonstrates an interactive data join with D3 v7. The visualization renders apples and lemons as SVG circles, which animate their radius and x-position using `transition().duration(1000)` as fruits are added, removed, or replaced. Hovering over a circle triggers a `mouseover` event, invoking `setSelectedFruit` to highlight it with a black stroke; moving the mouse away clears the selection. The code uses D3’s `scaleOrdinal` for color and radius mappings, with a keyed `data` join on fruit IDs to track elements across updates.

Bowl of Fruit - Click to Select

A bowl of five apples renders as SVG circles, and clicking a fruit selects it with a black stroke. The example demonstrates data joins and transitions in D3 v7: apples shrink and vanish when eaten, and one apple is replaced by a lemon after two seconds, updating its fill and radius. The fruitBowl module uses `selection.enter`, `selection.exit`, and `transition.attrTween` to animate circle radii and positions, while a `scaleOrdinal` maps fruit types to colors and sizes. Click events trigger a re-render, highlighting the selected fruit.

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates D3’s general update pattern for smoothly adding, removing, and modifying SVG elements. Five apples initially appear in a rounded rectangle; over time, one apple disappears, a second is replaced by a lemon, and a third is removed. The `fruitBowl` function uses `selection.data`, `enter`, `merge`, and `exit` to bind fruit objects to groups, updating circle colors and radii via `d3.scaleOrdinal`, with text labels. D3 v7 handles the data joins, while `setTimeout` triggers re-renders.