Anderson Banihirwe

@andersy005·3 public vizzes

Customizing Axes with D3.js!

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Using D3.js v5, the visualization employs `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` and `d3.axisBottom` generating the axes. The chart customizes the x-axis tick labels via `tickFormat` to abbreviate large numbers, converting gigabytes notation to billions. Data is loaded from a CSV file and rendered as SVG rectangles filled with steelblue.

Aug 26, 2020

Loading thumbnail…

A Bar chart with D3.js!

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 uses D3.js v5 with an SVG rendering approach. The code loads data from a CSV file, scales the population values linearly on the x-axis and uses a band scale for the categorical country labels on the y-axis. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while bars are appended as SVG rectangles with a steelblue fill.

Aug 26, 2020

Loading thumbnail…

A Face with D3.js!

A simple yellow face composed of SVG shapes—a circle for the head, two circles for eyes, and two rectangles for eyebrows—animated with a smooth bobbing motion, while a mouth is drawn as a path using D3’s `arc` generator. The visualization demonstrates D3 v5’s `select` and `transition` APIs to animate the eyebrows’ vertical position over a four-second loop. The face is centered via an SVG group transform in a 960×500 viewport, with all styling applied through inline attributes.

Aug 26, 2020