Michael Todd

@mbtodd·4 public vizzes

Customizing Axes

A horizontal bar chart displays population data for the top ten most populous countries from a CSV file. The visualization customizes both axes: the bottom axis uses a linear scale with tick formatting that abbreviates large numbers, replacing 'G' with 'B' for billions, while the left axis removes domain lines and tick marks. D3 v5's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` are used, with grid lines extending from the y-axis ticks. The SVG chart omits the x-axis domain line and removes the left axis decorations for a cleaner look.

May 19, 2020

Loading thumbnail…

Making a bar chart!

This chart displays the confirmed COVID-19 cases for the US and Russia using horizontal bars. The population values are read from a CSV file and rendered as an SVG. The code uses D3’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` functions within the d3.v5 framework to map the data to bar lengths and position the axes with margins. The bars are styled with a steelblue fill.

May 19, 2020

Loading thumbnail…

Let's make a face with D3!

This D3.js example creates a cheerful yellow smiley face using SVG shapes, with animated eyebrows that rise and fall over time. The face is composed of circles for the eyes and head, rectangles for eyebrows, and a curved path for the mouth, all positioned and transformed within a central group. The animation utilizes chained `transition().duration()` calls to move the right eyebrow, while the left stays static. The visualization demonstrates fundamental D3 v5 operations like `select`, `append`, and `attr` for building and styling vector graphics.

May 18, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled with inline attributes and CSS classes. It shows the same shapes rendered in default black, with explicit fill colors, and with a group-level fill and stroke applied via a transform. The code uses SVG elements directly within an HTML document, relying on CSS selectors like `.lines` and `.lines path` to set stroke properties. A scale transform enlarges the entire scene for display.

May 18, 2020