Jacob van Lingen

Temperature in multiple cities

Multiple city temperature trends are visualized as colored line paths over time, with a legend identifying each city and sorting them by final temperature value. The D3.js v5 code uses `nest()` to group data by city, `scaleTime` and `scaleLinear` for axes, and `line().curve(curveBasis)` for smooth paths. A color legend is built with a custom reusable component, while gridlines and axis labels support reading the temperature and time scales. The data comes from a CSV file of one week of city weather observations.

May 20, 2020

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns of the auto-mpg dataset by selecting them from two dropdown menus. The visualization updates smoothly, with circles animating from the center to their new positions using D3’s `transition()`. The code uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes, and implements the menus with a custom `dropdownMenu` function. The data is loaded via D3’s `csv` from a remote URL, and each point is rendered as an SVG circle.

May 19, 2020

Poverty vs Wealth in the World

This map visualization depicts global economic disparity by coloring each country according to its economy category, with a legend allowing users to filter countries by category and a clickable map to select individual nations. Using D3’s `geoNaturalEarth1` and `geoPath` for the projection and rendering, it loads geospatial data from the world-atlas TopoJSON and applies an ordinal color scale with `schemeOranges`. Pan and zoom are enabled via `d3.zoom`, while country titles and labels provide tooltips and interactive feedback.

May 19, 2020

World countries tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a tidy tree layout with horizontal links. The data is loaded from a JSON file and rendered as SVG, with text labels sized by depth level. It uses D3's `tree()`, `hierarchy()`, and `linkHorizontal()` APIs to position nodes and draw curved connecting paths, while a zoom behavior enables panning and scaling the entire graphic. The hand-drawn font and soft stroke color give the chart a casual, sketch-like appearance.

Blank canvas

This blank canvas demonstrates an empty SVG viewport that fills the browser window. The visualization shows a single rounded rectangle covering the entire display area, creating a blank slate. The code uses D3 v5's `select` method to target the SVG element and chain attribute setters for width and height. It retrieves the viewport dimensions from `document.body.clientHeight` and `document.body.clientWidth`, then appends the rectangle with rounded corners via the `rx` attribute, all rendered as vector graphics.

World map

This visualization displays a world map with countries colored in green, where clicking a country selects it and updates a title showing its name. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the world-atlas package. Interactive zoom is implemented with `d3.zoom`, and selected countries are highlighted with a darker fill through SVG attributes. The rendering is SVG-based, with hover effects and titles per country provided by appended `<title>` elements.

Bowl of fruit (animated - nested elements - hover)

An animated bowl of fruit shows apples and lemons disappearing one by one as they are eaten, with a lemon replacing an apple mid-sequence. The visualization uses d3’s `scaleOrdinal` for color and radius mapping, `arc` for the bowl shape, and `transition` with `attr` tweens for smooth entrance, exit, and resizing. Hovering over a fruit highlights it with a black stroke via mouseover and mouseout events, while the SVG updates through nested `g`, `circle`, and `text` elements.

Face with animated eyebrows and mouth

A face with animated eyebrows and a mouth demonstrates D3.js transitions and SVG rendering. The head and eyes are static shapes, while the eyebrows move vertically using chained `transition` calls in the `animateEyebrows` function. The mouth is a D3 arc path that repeatedly changes its inner radius via `transition.attrTween` and `d3.interpolate`, alternating between open and closed states every 1.5 seconds. The code uses D3 selections and the `arc` generator, with no external data source.

May 15, 2020

World population 2015

The visualization shows global population growth over time as a filled area chart. The chart plots population on the y-axis against years on the x-axis, using a steelblue semi-transparent area to represent the data. The code leverages d3.scaleTime and d3.scaleLinear for the axes, with d3.axisLeft and d3.axisBottom generating the gridlines and labels. Data comes from a CSV file loaded via d3.csv, and the area shape is created using d3.area. The SVG rendering includes a title and custom axis labels for time and population.

Tempature in San Fransico

This line chart displays temperature in San Francisco over time, plotted as a green line with semi-transparent dark green circles marking each data point. The visualization includes labeled axes for time and temperature, with a title positioned at the top. The code loads CSV data from a VizHub URL and uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line to render the SVG chart. The axes feature gridlines and a rotated y-axis label.

Cars: Horsepower vs Weight

This scatterplot displays the relationship between horsepower and weight for a dataset of cars. Each circle represents a car, positioned along the horizontal axis for horsepower and the vertical axis for weight, with a steelblue fill and partial opacity. The chart includes labeled axes and a title, built using the D3 v5 library. It loads data from an external CSV file and renders the visualization as SVG, using D3's linear scales, axes, and selection APIs.

Scatter plot

A scatter plot displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. The SVG chart uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with circles sized uniformly. It relies on d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom. Axis tick lines extend across the plot, and population labels are formatted with commas and “B” for billions.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The axes are customized through D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with tick formatting converting values to billions. The bottom axis includes a label and the chart is rendered as SVG, with bars drawn as `rect` elements. The code removes default axis lines and ticks, and the visualization omits the left axis line for a cleaner design.

Making a Bar Chart

This bar chart shows the populations of the top 10 most populous countries based on 2018 estimates from the UN’s World Population Prospects, with each bar labeled by country and scaled to population. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for the ticks, all rendered as SVG via `select` and `append`. The data is loaded from a CSV file using `csv`, with population values multiplied by 1,000, and the chart is drawn inside an SVG container with margins and steelblue rectangles.