moonstorm86

@moonstorm86·2 public vizzes

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, based on United Nations data. It highlights customized D3 axes, including a formatted x-axis using `format('.3s')` to abbreviate population values and gridlines via `tickSize`. The y-axis removes its domain and tick lines for a cleaner look, while axis labels and a title are added using SVG text elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to build the visualization.

Apr 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Apr 2, 2020