Anthony Lee

@zensic·4 public vizzes

Customizing Axes

This example shows a horizontal bar chart of national populations, with country names on the y-axis and population counts on the x-axis. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct a clean, margin-based SVG layout. Population values from the CSV are parsed and multiplied by 1000, and bars are rendered as `rect` elements with a steelblue fill.

Sep 11, 2022

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for the ten most populous countries, using horizontal bars ordered by descending population. The visualization is built with D3 v5, loading data from a CSV file and rendering to SVG. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. The chart maps population values to bar widths, with the y-axis labels showing country names.

Sep 7, 2022

Loading thumbnail…

Making a face with D3.js

This example uses D3.js v7 to demonstrate how to draw a simple face directly onto an SVG canvas. The code selects the SVG element and applies a red background color via the `d3.select` and `style` methods. It loads D3 from UNPKG and imports from local ES6 modules, showcasing basic SVG rendering without any data or interactive features. The result is a static, minimal illustration of D3’s selection and styling capabilities.

Sep 7, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js v5 to draw a yellow smiley face centered in an SVG canvas, with black-bordered circles for eyes and a path-shaped mouth created via the `d3.arc()` generator. The code demonstrates basic DOM manipulation by appending geometric shapes to a group element, then animates the eyebrows—two rectangles—through a two-second `transition().duration(2000)` sequence that moves them up and down once. Rendering is entirely SVG, with an embedded YouTube video illustrating the resulting motion.

Sep 1, 2022