Skip to main content
Log in
C

Christoph Diefenthal

@chrisdie·13 public vizzes

Loading thumbnail…

Triangle Circle without Rotate

An SVG scene uses D3 v5 to animate a gray triangle orbiting a yellow central point without rotating itself. The animation runs on a timer that updates a `rotate` transform on an outer group and applies an equal negative rotation to an inner `#g_rotateBack` group, canceling the triangle’s spin. Red and pink reference dots mark the orbit radius and triangle centroid. The drawing includes horizontal grid lines and uses nested `g` elements with explicit transforms for position and counter-rotation.

Apr 14, 2020
Loading thumbnail…

Triangle Rotate

A triangle rotates in place against a backdrop of horizontal gridlines, using a looping animation to create a continuous spinning effect. The visualization is built with D3 v5 and SVG, leveraging D3 transitions and the `transition.attr` method to apply incremental rotations to a group element. Static horizontal lines and a red reference point highlight the triangle's pivot, while the code structure separates translation and rotation groups for clarity. The animation runs indefinitely by recursively calling the animate function upon transition completion.

Apr 14, 2020
Loading thumbnail…

Video2

A video plays inside a circular mask on a yellow canvas, while the entire composition spins and translates via D3's `d3.timer` and `attr` transforms. The example embeds an HTML5 `<video>` element within an SVG `foreignObject`, clipped by CSS `border-radius` and `-webkit-mask-image`. A second separate video control also appears. The code uses D3 v5 to manipulate SVG groups (`g`), circles, and transitions, demonstrating video integration with animated SVG graphics.

Apr 3, 2020
Loading thumbnail…

Video

A yellow backdrop fills the browser window as an animated solar system orbits a central sun, with two planets on circular tracks. Embedded within the rotating composition, a foreignObject element carries an HTML5 video player, displaying a sample movie clip within a circular mask. The visualization combines D3.js v5 for SVG graphics and animation timers, while integrating CSS styling for circular clipping. The video and planet rotations are driven by time-based delta calculations, creating a continuous, synchronized motion across mixed media elements.

Apr 3, 2020
Loading thumbnail…

Catch me

Two framed photographs sit side by side on a blank canvas, one on the left and one on the right, with a single image sliding horizontally between them in an endless chase. Using d3 v5, the animation is driven by a recursive `repeat()` function that applies chained `transition()` calls with `duration` and `attr('transform')` to move the sliding image, while `Math.random()` introduces variable speed each cycle. The images are loaded as SVG `<image>` elements with hard-coded Google-hosted URLs, and the scene is centered via a `<g>` transform.

Apr 2, 2020
Loading thumbnail…

GRID

A 10x10 grid of square cells responds to clicks by cycling through four fill colors: white, blue, orange, and gray, based on a per-cell click counter. The SVG is generated with D3 v4, using data binding to create rows and columns of `rect` elements. Each cell maintains its own click state, and the `d3.select(this)` method directly updates the clicked square’s style. The grid itself is static, with no animation or external data source beyond the locally generated coordinate and dimension objects.

Apr 1, 2020
Loading thumbnail…

Workshop Results

This visualization compares population projections across four mobility scenarios—Default, Workshop, Shared, and Autonomous—using stacked bar charts. A dropdown menu switches between three pairwise comparisons, and each chart animates via `transition().duration()` to reflect the selected phase. The data, sourced from World Population Prospects 2017, is rendered as SVG using `d3.stack()`, `scaleLinear`, and `scaleBand`. Axes are generated with `axisBottom` and `axisLeft`, while `d3.format` customizes tick labels with abbreviations like "Mrd" for billions.

Mar 21, 2020
Loading thumbnail…

Untitled

A grouped and stacked bar chart displays earthquake counts by magnitude range across US states for 2017 and 2018. A dropdown menu switches between years, animating bar heights and total labels with 750-millisecond transitions. Built with D3 v5, the visualization uses `d3.csv` to load data, `d3.stack` to create layers, and `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color encoding. SVG transitions update the chart smoothly when the selected year changes.

Mar 21, 2020
Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes earthquake counts by magnitude range across U.S. states for selected years. A dropdown menu lets viewers switch between 2017 and 2018 data, triggering a 750ms transition that updates bar positions and total labels. Built with D3 v5, the chart uses `d3.stack()` and `d3.scaleBand()`, rendering SVG rects and text elements. Color encoding distinguishes three magnitude categories (7.0+, 6–6.9, 5–5.9), with data loaded from a CSV file via `d3.csv`.

Mar 20, 2020
Loading thumbnail…

Customizing Axis

This bar chart displays the top 10 most populous countries using a horizontal layout, with population values on the x-axis and country names on the y-axis. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The axis is customized by removing the default domain lines and ticks, adding a custom tick format that converts large numbers to abbreviated forms (e.g., G to B), and including axis labels and a title. Data comes from World Population Prospects 2017, loaded from a CSV file.

Mar 18, 2020
Loading thumbnail…

Do a Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle represents a car, with the x-axis showing horsepower and the y-axis showing weight. The chart uses D3 v5 (specifically `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`) to map data to SVG coordinates, with styled grid lines, axis labels, and a title. The data is loaded via `csv` from a remote URL and parsed to numeric values before rendering.

Mar 5, 2020
Loading thumbnail…

Let's make a barchart

An interactive SVG bar chart displays population figures for ten countries, using horizontal bars ordered by country name from top to bottom. The chart renders steel-blue rectangles with axes labeled on the left and bottom, sized to fit a 960 by 500 pixel canvas. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file, scale values, and draw the chart. Data originates from the World Population Prospects 2017 dataset, with population values multiplied by 1,000 during preprocessing.

Mar 4, 2020
Loading thumbnail…

Let's make a face

This example draws a simple yellow face in an SVG canvas, with two eyes, animated eyebrows that bounce up and down, and a mouth created using an arc path. The face is centered on a 960 by 500 pixel SVG, and the animation is driven by chained `transition` calls that move the eyebrow group vertically. The code uses D3 v5 selections and the `d3.arc` API to construct the mouth shape, with hardcoded pixel values for facial features.

Mar 4, 2020