Syed Azeem Akhter

@azmaktr·2 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized by removing domain lines, adding tick marks and labels, and formatting population values with a custom tick format that converts G to B. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering to SVG with styled tick text and axis labels.

Oct 7, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows upward and back down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by building a green circle, white eyes, rectangular eyebrows, and an arc-based mouth using `d3.select` and `d3.arc`. Animated with chained `transition.duration` calls, the eyebrows shift via `attr` transforms. Rendered in an SVG container sized 960 by 500, the code uses D3 v5 and imports `select` and `arc` directly from the library.

Oct 7, 2020