leandermaerkisch

@leandermaerkisch·3 public vizzes

Making a bar chart

This example visualizes the ten most populous countries as horizontal bars, drawn with SVG rectangles. It maps population values to bar lengths using a linear scale and country names to vertical positions with a band scale. The visualization is built with D3 v5, using `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render axes. The data comes from a CSV file and is processed by multiplying population figures by 1,000 before scaling.

Aug 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple animated face. A yellow circle forms the head, with two black circles for eyes and a pair of rectangular eyebrows that move up and down in a looping transition. A mouth is rendered using the `d3.arc` function to create a curved path. The entire face is centered within an SVG canvas using a translated group element, with all shapes and animations defined declaratively.

Aug 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example displays a cheerful face composed of SVG shapes, including a yellow circle, two eyes, eyebrows, and an arc-based mouth. The eyebrows animate by moving downward and returning upward over two sequential 2-second transitions. The visualization is built with D3.js v5, using selections, the `arc` generator for the mouth, and `transition` methods to create the movement. All elements are centered within an SVG canvas sized 960 by 500 pixels.

Jul 22, 2020