David Trye

@dgt12·3 public vizzes

Making a Bar Chart

This example renders a horizontal bar chart that displays the count of speakers per dialect from the Spoken BNC2014 dataset, loaded from a CSV file. The visualization uses D3 version 5, with `select` to target the SVG, `csv` to parse the data, `scaleLinear` and `scaleBand` to map values to positions, and `axisLeft` and `axisBottom` to draw the axes. Bars are appended as SVG `rect` elements, with lengths scaled by speaker count and styled via a CSS class.

Jun 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, two eyes, and a mouth drawn with the `arc` function. Eyebrows are animated using chained `transition` calls, moving them down and back over two seconds each. The code arranges all parts within an SVG, using React for scaffolding and numeric attributes for positioning.

Jun 5, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries from a 2018 United Nations estimate. It uses D3 v5 to load CSV data, scale to a linear x-axis and banded y-axis, and render SVG rectangles for bars. The code specifically leverages `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with population values multiplied by 1000 for display.

Jun 5, 2020