marissaverdonck

@marissaverdonck·3 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart shows a horizontal bar for each country, with a linear x-axis for population and a banded y-axis for countries, both customized by removing grid lines and domain paths. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and it renders as SVG. Data is loaded from a CSV file and formatted with the `format` function, replacing 'G' with 'B' for billion-scale tick labels.

Jan 16, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example draws a yellow smiley face with animated eyebrows that raise and lower in a continuous loop. The face is constructed using SVG primitives: circles for the head, eyes, and an arc-shaped mouth, while rectangles form the eyebrows. The animation relies on D3's `transition().duration()` method to interpolate the eyebrow group's transform attribute between two vertical positions. The code demonstrates straightforward DOM manipulation via `d3.select` and `d3.append`, with all elements positioned absolutely within a 960 by 500 pixel SVG canvas.

Nov 12, 2019

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Nov 12, 2019