JoachimSchaeffer

@JoachimSchaeffer·7 public vizzes

Costum Axis!

A bar chart displays the population of the top ten most populous countries using data from the 2018 UN World Population estimate, with values converted from thousands to absolute numbers. The visualization uses D3 v5 to create scales, axes, and SVG rectangles, featuring a custom axis label and tick formatting that abbreviates large numbers (e.g., "G" replaced with "B"). The code relies on `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to render the chart.

May 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn on a yellow circular head using SVG elements. The face’s eyebrows and mouth animate, moving up and down and scaling to create an expressive motion. The example uses d3.select to build the SVG structure and d3.arc to construct the mouth path. Eyebrow and mouth animations are driven by chained d3.transition calls with specified durations. The code uses a React setup and a bare HTML page, with all D3 functions applied directly to the SVG.

May 2, 2020

Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

Apr 28, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, using a linear scale for population and a point scale for country names. The code imports specific D3 v5 functions, including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, to render the axes and circles as SVG elements. Population data comes from a CSV file based on 2018 UN estimates. The chart applies a custom tick formatter that abbreviates population values, converting billions to "B" for readability.

Apr 28, 2020

Loading thumbnail…

This is a Barchart!

This bar chart displays the population of the top 10 most populous countries, based on 2018 UN estimates from the World Population Prospects. The data is loaded from a CSV file and mapped to the chart’s axes using D3’s `scaleLinear` and `scaleBand` functions. The visualization is rendered as an SVG, with countries on the y-axis and population on the x-axis. The chart uses D3 v5 and the `select`, `csv`, `axisLeft`, and `axisBottom` APIs to build the final graphic.

Apr 18, 2020

Loading thumbnail…

Shaped with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS classes and inline attributes. It shows the use of SVG transform attributes for scaling and translation, alongside CSS rules that define stroke properties, fill colors, and line joins. The code relies on native SVG elements and CSS, without any external libraries, and renders static geometric compositions within a fixed 960×500 viewport.

Apr 18, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report, presenting a static list of three used cars with their model, year, and price. The first item in the list is highlighted in red using a CSS class, while the entire page uses a large monospace font for readability. The visualization is built with plain HTML and CSS, relying on a `<ul>` element and linked `styles.css` file for styling. It demonstrates a lightweight, non-interactive data display approach without any JavaScript frameworks or data-binding libraries.

Apr 18, 2020