Thomas Seberechts

Melting Data form Multiple Lines

This chart shows population trends over time for global regions, with each region drawn as a colored line across a time axis from 1950 to 2100. The data is sourced from UN population estimates and medium variant projections, melted into a tidy format. Using d3.nest, the data is grouped by region and sorted by the final population value, then rendered with d3.line and curveBasis. A d3.scaleOrdinal assigns categorical colors, and a custom colorLegend displays the region labels. Gridlines, axis labels, and a title provide context.

Line chart with multiple lines

This line chart displays one week of temperature data from multiple cities, with each city represented by a distinct colored line from the d3 schemeCategory10 scale. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group measurements by city. A custom colorLegend function renders the categorical color keys, while d3.axisLeft and d3.axisBottom create labeled axes with gridlines. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv and rendered as SVG elements.

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using a D3 ordinal color scale, then allows interactive filtering through hover-adjacent clicks on the legend. The map renders with SVG and a natural Earth projection via `d3.geoPath`, while the legend items toggle opacity and highlight matching countries. Users can zoom and pan using `d3.zoom`, and the map loads world geometry from TopoJSON with economy data from a TSV file.

Chloropleth Map

This choropleth map visualizes global population estimates for 2018, using circle size to represent population magnitude overlaid on country boundaries. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath for rendering geographic features, while circles are positioned via d3.geoCentroid. Data from the UN population estimates is merged with TopoJSON world atlas geometry. Interactive zooming is implemented with d3.zoom, and a custom size legend communicates the population scale using d3.scaleSqrt.

Scatter Plot With Menus

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, letting users explore relationships between numeric attributes like horsepower, weight, and acceleration. Two dropdown menus dynamically select which columns appear on the x and y axes, triggering smooth animations as circles transition to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while the custom `dropdownMenu` and `scatterPlot` modules handle the menu interactions and SVG rendering with `transition().duration(2000)`.

Chloropleth Map

This choropleth map visualizes global income groups by country, using a spectral color scale to differentiate categories. Built with D3 version 5, the map employs `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render country boundaries from TopoJSON data, with attributes joined from a TSV file. The visualization supports zoom interactions via `d3.zoom`, displays hover tooltips with country names and income groups, and includes a custom color legend rendered from SVG circles and text.

Cheap Tricks for Interaction

A world map renders each country as an SVG path using `d3.geoPath` and a Natural Earth projection, with data from the world-atlas TopoJSON source. A `d3.zoom` behavior on the SVG element applies pan and zoom transforms to a grouped layer, letting users scale and move the entire map. Hovering over a country triggers a CSS `:hover` rule that changes its fill to red, while a `<title>` element inside each path provides a native tooltip with the country name.

Cheap Tricks for Interaction

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

World countries tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, in a horizontal tree layout. It uses d3.tree and d3.hierarchy to compute the layout, d3.linkHorizontal for the curved connecting paths, and d3.zoom for panning and zooming. The data comes from a local JSON file, rendered as SVG text labels with size varying by depth.

Blank Canvas

A blank, rounded-rectangle canvas fills the browser window as the sole visual output. The example demonstrates a minimal SVG setup where no data is loaded or drawn beyond the background shape. It uses D3 v5 selections to size the SVG to the viewport and appends a single rectangle with rounded corners. The styling is handled by a separate stylesheet, while the rendering relies entirely on D3’s `select` and `attr` methods for SVG manipulation.

Let's make a map with D3.js!

This example displays a world map of countries rendered in light green on a blue sphere, using a natural Earth projection. It shows the geographic boundaries of nations as SVG paths, generated from a world-atlas TopoJSON dataset loaded via D3’s `json` function. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection to convert geographic coordinates into screen paths, and the `topojson.feature` function to extract country features from the TopoJSON data. The sphere background is drawn as a separate path to create a globe-like visual context.

Bowl of Fruit - Hover to select

Five apples sit in a bowl and react to a timed sequence: one is removed, another transforms into a lemon, and a third disappears. Hovering over any fruit highlights it with a black outline. Built with D3 v5, the example uses chained `transition()` methods to animate position, radius, and opacity, while `scaleOrdinal` maps fruit types to colors and sizes.

Bowl of Fruit - Click to select

Five pieces of fruit sit in a bowl, where clicking an item selects it with a black outline. The bowl updates over time as fruits are removed and one apple changes into a lemon, with transitions animating position and radius. Built with D3 v5, the example uses `scaleOrdinal` for color and size, data joins with enter/exit selections, and `transition` for smooth updates.

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates D3’s general update pattern for animated data joins. Circles represent apples and lemons, colored via a `scaleOrdinal` and sized by another. Each update transitions entering, updating, and exiting circles using `transition().duration(1000)`, shrinking exits to zero radius before removal. The example cycles through adding, removing, and mutating fruit types with `setTimeout`, showing how D3’s `selection.data` with a key function manages dynamic datasets. Rendering uses SVG in a static 960×500 viewport.

World Population Area Chart

This area chart displays global population growth from 1950 to 2015, with year on the x-axis and population count on the y-axis. The chart highlights the rapid increase in population over time using a smooth, curved area fill. The visualization uses D3 v5, specifically `area`, `curveBasis`, `scaleTime`, and `scaleLinear` to build the chart, with data sourced from a CSV file on world population by year. The SVG rendering includes formatted tick labels (e.g., 'B' for billions) and a maroon-filled area with an overlaid stroke.

Temperature in San Fransisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis, using an area fill to emphasize the temperature trend over the week. The visualization is rendered as an SVG and built with D3 v5, using scaleTime and scaleLinear for the axes, and the d3.area generator with curveBasis to create the smooth filled path. The data is loaded from a CSV file hosted on VizHub, and the chart includes labeled axes, tick marks, and a title.

Temperature in San Fransisco Line Chart

This visualization displays one week of temperature data in San Francisco as a smooth line chart, with time on the x-axis and degrees Celsius on the y-axis. The chart uses D3 v5’s scaleTime, scaleLinear, axisBottom, axisLeft, and line with a curveBasis generator to render the SVG path. Data is loaded from a CSV file sourced from Data Canvas - Sense Your City, parsed into numeric and date formats, and styled with maroon strokes, gridlines, and axis labels.

Temperature in San Fransisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with each circle representing a temperature measurement plotted against its timestamp. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` to map the data domain to pixel coordinates. The axes are generated with `axisLeft` and `axisBottom`, including custom tick lines and axis labels. The temperature data is loaded from a CSV file via the `csv` function, parsed into numeric and Date values, and rendered as steel-blue circles with a title.

Cars Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG Data Set. Each red semi-transparent circle represents a single car, with the x-axis showing horsepower and the y-axis showing weight. The code uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.extent to compute the domains. Data is loaded via d3.csv and rendered as SVG circles with a fixed radius of 10 pixels.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned by population on the x-axis and country on the y-axis. The data comes from the 2018 United Nations World Population Prospects estimate. The visualization uses D3 version 5, with scaleLinear and scalePoint for axes, axisBottom and axisLeft for ticks, and SVG circles for points, styled with steelblue fill.

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis removes its domain line and tick marks, while the x-axis formats tick labels (converting G to B) and adds a labeled axis. Built with D3 v5, the code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart.

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate, with values in thousands. The chart uses D3’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles. Population values are parsed from a CSV file and multiplied by 1000 to represent actual figures. The chart is styled with steelblue bars, and axes are positioned using `axisLeft` and `axisBottom`.

Let's make a face with D3.js!

A smiling yellow face is drawn with SVG, using D3.js to generate circles for eyes and an arc for the mouth. The animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls on a group element. The code imports `select` and `arc` from D3 v5 and runs within a React framework, with the SVG canvas sized 960 by 500 pixels. Transforms center the face and position facial features relative to the middle of the canvas.

Shapes with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styled with CSS. It shows shape grouping via nested `<g>` elements, transforms for scaling and translation, and both inline SVG attributes and CSS classes for controlling fill, stroke, and stroke-width. The code uses plain React rendering with SVG’s native elements, including a `<path>` with a `d` attribute for a custom line. A `styles.css` file applies stroke styling to grouped elements and defines a `.highlighted` class.

HTML Cars Report

This example presents a simple cars report as an HTML page, displaying a list of three vehicles alongside their prices in a monospaced font. It shows the data directly in the browser using static text and a highlighted list item to draw attention to the first entry. The visualization relies on plain HTML and CSS, with the `index.html` file structuring the content into an unordered list and the `styles.css` file styling the body and the `.highlighted` class, which applies a yellow background and red text. No JavaScript or charting libraries are used; the page renders entirely through standard web markup.