Skip to main content
Log in
K

kaylee4m

@kaylee4m·4 public vizzes

Loading thumbnail…

Making a Bar Chart

This chart displays the populations of the top 10 most populous countries using 2018 United Nations data, with horizontal bars sorted by country name. It uses d3.csv to load the data, then d3.scaleLinear and d3.scaleBand to map population values and country labels to SVG rectangles. The axes are generated with d3.axisLeft and d3.axisBottom. The code imports specific functions from the d3 v5 module and renders the visualization entirely in SVG, with a steelblue fill for each bar.

Mar 18, 2019
Loading thumbnail…

Making a Bar Chart

A bar chart displays population counts for ten countries from a CSV file, with steel-blue bars on a blank SVG canvas. The example demonstrates a minimal D3 v5 workflow: `select` targets the SVG element, `csv` loads the data, and a data join appends rectangle elements sized by population. This code focuses on the essential steps of reading external data and creating basic geometric marks.

Mar 18, 2019
Loading thumbnail…

Making a Bar Chart

This chart displays the populations of the top 10 most populous countries using 2018 United Nations data, with horizontal bars sorted by country name. It uses d3.csv to load the data, then d3.scaleLinear and d3.scaleBand to map population values and country labels to SVG rectangles. The axes are generated with d3.axisLeft and d3.axisBottom. The code imports specific functions from the d3 v5 module and renders the visualization entirely in SVG, with a steelblue fill for each bar.

Mar 17, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG primitives: red circle head, two eyes, a mouth formed by an arc path, and rectangular eyebrows. The eyebrows are the focus, moving up and down through chained `transition().duration()` calls on a group's `transform` attribute. The code demonstrates fundamental DOM manipulation using methods like `select`, `append`, and `attr`, and computes the face's layout from the SVG's width and height attributes.

Mar 17, 2019