Martin Christensen

@martinchristensen·11 public vizzes

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

Dec 31, 2019

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map with countries rendered as light green SVG paths on a blue sphere, using a natural Earth projection. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. It builds the map with d3’s `geoPath` and `geoNaturalEarth1` projection, appending country paths and a sphere outline to the SVG canvas.

Dec 30, 2019

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit icons sit in a row over a time-based sequence: apples are eaten, one apple transforms into a lemon, and hovering highlights the selected fruit with a black outline. The D3 v5 example uses `scaleOrdinal` for color and radius mappings, `selection.selectAll` to bind data, and chained `.transition().duration(1000)` to animate radius changes. SVG circles and text labels render via a reactive `fruitBowl` function, while `setSelectedFruit` toggles stroke on hover, with `setTimeout` scheduling the fruit mutations.

Dec 30, 2019

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples appear in a row and can be clicked to select one, which gains a black outline. Over time, one apple is removed and another transforms into a lemon, changing its color and size, while a third apple disappears. Using D3 v5, the chart binds SVG groups to data, applies ordinal scales for color and radius, and animates radius changes via `transition`. A click event updates the selected fruit, triggering a re-render with the `fruitBowl` function.

Dec 30, 2019

Loading thumbnail…

Bowl of fruit - General Update Pattern

This example demonstrates the general update pattern for animating changes to a dataset. It shows a bowl of fruit where apples are consumed and replaced by lemons over time, with each state transition smoothly updating the SVG circles and labels. The code uses D3.js v5 APIs such as `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` to handle insertions, updates, and removals, with `.transition().duration(1000)` animating the radius changes. The static bowl is a rounded rectangle, and the fruit positions are computed via an index-based formula.

Dec 29, 2019

Loading thumbnail…

World population Area Chart

This area chart displays world population growth from 1950 to 2015, with years on the x-axis and population counts on the y-axis. The chart uses a maroon filled area with a smooth curve, and includes labeled axes with formatted tick values. Built with D3 v5, it employs `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom` to render the SVG visualization. Data is loaded as CSV from a remote dataset using `d3.csv`.

Dec 29, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature readings in San Francisco over a week, with a time-scaled x-axis and linear temperature y-axis. The chart includes gridlines, labeled axes, a title, and a smooth blue line connecting the data points. The code uses D3 v5’s `csv` loader to fetch data from a CSV file, `scaleTime` and `scaleLinear` for scales, and `line` with SVG paths for rendering. Axis labels are added via `axisBottom` and `axisLeft`, with custom text elements for titles.

Dec 29, 2019

Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot displays San Francisco temperatures over a week, with time on the x-axis and temperature on the y-axis, using circles to represent individual hourly readings. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Data is loaded asynchronously via `csv()` from a remote dataset, parsed into `Date` and numeric values, and then bound to circle elements. Grid lines are drawn by configuring the axes' tick sizes, and axis labels and a title are added as SVG text.

Dec 29, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Circles are plotted on a linear scale for both axes, with semi-transparent steelblue fill to reveal overlapping points. The visualization includes labeled axes, tick marks that extend across the plot, and a title, all rendered as SVG. The code uses D3 v5 methods including `csv` for data loading, `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `selectAll` with data joins to create the circles.

Dec 29, 2019

Loading thumbnail…

Scatter Plot

The chart displays total final tax amounts in Denmark from 2000 to 2018, sourced from Danmarks Statistik. Each circle represents a year, positioned along a linear x-axis for tax values and a point scale for years. The code uses D3 v5's `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG. Gridlines extend across the plot, and axis labels indicate values in millions of kroner.

Dec 29, 2019

Loading thumbnail…

Custemizing Axes

This example visualizes total final tax in Denmark from 2000 to 2018 using a horizontal bar chart, with data sourced from Danmarks Statistik. It uses `d3.scaleBand` for the year axis and `d3.scaleLinear` for the tax values, rendering in SVG. The code customizes axes by removing default domains and tick lines, applying `d3.axisLeft` and `d3.axisBottom`, formatting tick labels with `d3.format('.3s')`, and adding a custom axis label.

Dec 29, 2019