E.D.M.

@duggiemitchell·3 public vizzes

Bowl of fruit

Five red apples are arranged in a horizontal line across the middle of an SVG canvas. The example demonstrates basic data joins with D3 v5, using `select`, `range`, and `selectAll` to bind an array of fruit objects to circle elements. Each circle gets its x position calculated from its index, with a fixed radius and fill color, rendering a simple static bowl of fruit without interaction.

Nov 4, 2019

Loading thumbnail…

Making a bar chart

This example demonstrates how to build a simple bar chart from a CSV file using D3 v5. The chart displays population data for several countries, with horizontal bars whose widths are proportional to each country’s population. The code uses `d3.csv`, `scaleLinear`, and `scaleBand` to map the data to SVG rectangles, while the rendering is done entirely with SVG elements in an HTML page. The data is loaded from `data.csv` and scaled by a factor of 1000 before being visualized.

Nov 4, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example creates a cartoon face using D3.js v5, rendering circles for the head, eyes, and eyebrows, and an SVG path for the mouth. It demonstrates basic SVG shape generation with `d3.select` and the `d3.arc` API for the mouth’s curved path. The face is positioned using a group transform, with fixed pixel offsets for eye spacing and radius. The visualization shows how to compose multiple SVG elements programmatically with D3, using static attributes rather than data binding.

Oct 31, 2019