M

MatthiasVanCampen

@MatthiasVanCampen·22 public vizzes

Loading thumbnail…

Selecting a year on a line chart

This line chart visualizes population estimates and projections for world regions from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical line marks the currently selected year, and moving the mouse across the chart updates this selection, with the year recomputed from the mouse position via the x-scale’s inverse mapping. The chart is built with D3 v5, using SVG rendering, scales, axes, and a basis-curve line generator, while a custom legend assigns colors to regions through a categorical ordinal scale.

Loading thumbnail…

Fruitsalad

A bowl of fruit shows apples and lemons as colored circles that animate in and out, with a black outline highlighting the clicked or hovered fruit. Fruit are added or removed over time, and one apple transforms into a lemon. Built with D3 v5, the visualization uses data joins with `selection.enter` and `selection.exit`, `transition` for animations, and `scaleOrdinal` to map fruit types to colors and radii, with click and mouseover events triggering updates.

Loading thumbnail…

Line Chart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line to reveal comparative trends. The chart uses a time-scaled x-axis, a linear temperature y-axis, and an ordinal color scale, with a custom legend displayed on the right. The code relies on d3.csv, d3.nest, d3.line with d3.curveBasis, and d3.axisBottom/axisLeft to render the SVG. Data is loaded from an external CSV file containing timestamp and temperature values, with gridlines drawn through tick sizing and stroke styling.

Loading thumbnail…

Melting data for multiple lines

This example visualizes population trends over time for multiple regions, displaying separate lines for each region from 1950 to 2100. The data is sourced from UN population estimates and is processed by reshaping wide-format CSV data into a tidy format using custom functions. The visualization uses D3 v5 with SVG rendering, employing `d3.line` with curve interpolation, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by region. A color legend is rendered using a custom function that utilizes `d3.scaleOrdinal` with `d3.schemeCategory10`.

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018, using a natural Earth projection to map countries. The map uses semi-transparent circles sized by population magnitude, while a color legend and size legend clarify the encoding. Built with D3 v5, the code leverages `geoNaturalEarth1` and `geoPath` for map projection, `scaleSqrt` for circle sizing, and `scaleOrdinal` for the color scheme. Data is sourced from UN population estimates joined with a TopoJSON world atlas. A tooltip on each country provides its name and population count, with missing data highlighted in light red.

Loading thumbnail…

Scatter plot with menus

A scatter plot with dropdown menus allows users to explore relationships between different columns of an automotive dataset. The plot visualizes the auto-mpg dataset loaded from a CSV file, with selectable X and Y axes. D3's `scaleLinear` and `extent` functions compute the axis scales, while `dropdownMenu` components built with D3's selection API manage axis column choices. The scatter plot uses SVG circles animated with a 2-second staggered transition, and axes are rendered using `axisBottom` and `axisLeft` with tick lines and labels.

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map shows global economic classifications, with countries colored by category. Clicking a legend entry filters the map, dimming non-matching countries and highlighting the selected one while zooming and panning remain available. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for interaction. Data comes from the World Atlas TopoJSON and TSV files, with a d3.scaleOrdinal and schemeSpectral colormap driving the legend and fills.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their economy type, using a spectral color scale. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 to project geographic data from the World Atlas TopoJSON, while a custom color legend displays the ordinal scale. The map supports zooming via d3.zoom and shows country names and values as tooltips.

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of chart legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a continuous square-root scale. Interactive selection works through clicking any object to highlight its identity. The visualization uses D3 v5 with `scaleOrdinal`, `scaleSqrt`, and the `tick` pattern for legend construction, rendering SVG circles and text. Both legends are composed using the data-join pattern with `.enter()` and `.merge()` to update groups.

Loading thumbnail…

Countries Tree

This example visualizes a hierarchical dataset of countries organized by continent and subregion as a dendrogram. The tree layout positions all nodes in a horizontal cluster, with country names displayed at varying font sizes based on depth using the d3.cluster and d3.hierarchy APIs. Curved link paths are generated with d3.linkHorizontal, while d3.zoom enables panning and scaling of the SVG canvas. The data is loaded from a JSON file and rendered entirely in SVG with custom styling.

Loading thumbnail…

Blank Canvas

A single rounded rectangle fills the entire viewport, rendered in SVG with no data or marks. The visualization uses D3 v5’s `select` to bind the SVG element, then sets its width and height to the browser window’s client dimensions. A `rect` is appended with a 40-pixel corner radius, creating a soft-edged blank canvas. The code relies on `document.body.clientWidth` and `clientHeight` for sizing, with the body fixed and overflow hidden via CSS.

Loading thumbnail…

Let's make a map with D3.js

This example displays a natural Earth map with countries rendered as light green paths on a blue sphere, with hover effects that highlight individual countries in red. It uses D3.js v5’s `geoNaturalEarth1` projection, `geoPath` for geometry rendering, and the `topojson` library’s `feature` function to convert TopoJSON data. The map zooms via D3’s `zoom` event, and country names are joined from a TSV file using ISO numeric codes.

Loading thumbnail…

Select them Fruits!

A row of apples renders as SVG circles, with each fruit’s identity selectable by clicking or hovering to highlight it with a black outline. The visualization uses D3 v5’s data join, `scaleOrdinal` for color and radius mappings, and chained transitions to animate circle enter, update, and exit states. Timed updates swap one apple for a lemon, while removals trigger smooth shrink-and-remove animations.

Loading thumbnail…

A bowl of fruit

A bowl of fruit demonstrates animated updates to an SVG circle chart using D3.js v5. Five circles representing apples enter with a scaling radius transition, then shrink and vanish as fruit is consumed, swap from apple to lemon with a color change, and filter out one item. The example uses D3’s `scaleOrdinal` for color and radius mappings, `selection.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate circle properties. The data source is a random set of fruit objects generated in the script, rendered as SVG circles with a fixed vertical position and horizontal spacing.

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, using a maroon filled path to emphasize the magnitude of change. The x-axis maps time and the y-axis maps population, with gridlines and labeled axes for readability. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisLeft` and `axisBottom` create the axes. Data comes from a CSV file of world population by year, with population values parsed as numbers and years as dates.

Loading thumbnail…

Temperature in SF line graph

A line chart shows temperature readings across a week in San Francisco, with a smooth curved path rendered over a grid of horizontal and vertical axis ticks. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` to generate the path, and `axisLeft`/`axisBottom` for tick marks. Data is loaded as CSV from an external URL, with timestamps parsed into Date objects. SVG rendering places the chart inside a 960×500 viewport with large margins and styled axis titles.

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each semi-transparent circle representing a vehicle. The chart uses D3 v5's `csv` loader to fetch data, `scaleLinear` for both axes, and `axisLeft` and `axisBottom` to render the scales. SVG circles are positioned via the scales, with axis tick lines extending across the plot and custom formatting applied to the x-axis labels. The visualization includes a rotated y-axis title and a chart title.

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear x-axis for inhabitants and a point scale y-axis for country names. The visualization uses d3.csv to load data, scaleLinear and scalePoint for scaling, and axisLeft with axisBottom to render gridlines and labels. SVG circles are appended within a grouped element, with tick formatting converting large numbers into abbreviated units. The chart includes titles for the axes and overall visualization.

Loading thumbnail…

Customizing axes

A horizontal bar chart displays the top 10 most populous countries, with inhabitants counted in thousands and formatted as abbreviated values like "1.44B". The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for country categories, and d3.axisBottom with custom tick formatting via d3.format. It renders as SVG, with grid lines from tickSize, and removes default axis domains for a cleaner look. Data comes from a CSV file loaded using d3.csv.

Loading thumbnail…

Exitement about different visualisation techniques

This bar chart compares excitement scores for four visualization techniques: P6 Analytics, PBI, D3.js, and Qlik. D3.js receives the highest rating, while P6 Analytics is rated lowest. The visualization uses D3 v5 with an SVG renderer, employing `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis placement, and `axisLeft`/`axisBottom` for labeled axes. The data is loaded from a local CSV file, with bars colored steelblue.

Loading thumbnail…

Let's make a face with D3.js

The example shows a simple emoticon-like face constructed from SVG shapes, including a yellow circle, two eyes, two eyebrows, and an arc-shaped mouth. Using D3.js v5, the code leverages the `select` and `arc` APIs to build and position the face elements, and an animation sequence via `transition` moves the eyebrows up and down over two seconds. All parts are drawn as SVG primitives within a 960x500 canvas, centered using a translated group.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine inline SVG shapes with CSS styling to create and transform basic geometric forms. It shows circles, rectangles, and paths, with styling applied through CSS selectors like `.lines` and `.lines path` controlling stroke color and join behavior. The SVG markup uses the `<g>` element to group shapes and apply transformations via the `transform` attribute, including scaling and translation. The code relies on raw SVG APIs and a cascade of CSS rules from an external stylesheet to define presentation details.