Rajab Ssemwogerere

@ProgrammerXP2017·5 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populated countries, based on 2018 estimates from the United Nation’s World Population Prospects 2019. It uses D3 v5 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. Population values are converted from thousands to absolute numbers before plotting, with red bars showing relative magnitudes.

May 4, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries in descending order, with horizontal bars representing each nation’s total population in thousands. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values and country names, rendering the bars as SVG `rect` elements. Data is loaded from a CSV file and transformed by multiplying each population value by 1000 before plotting.

May 3, 2020

Loading thumbnail…

MAKING A BAR GRAPH WITH D3.JS

This example displays a horizontal bar chart ranking the ten most populous countries based on 2018 estimates from the United Nation's World Population Prospects. The visualization uses D3.js v5 with SVG rendering, employing `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with population values formatted using `d3.format` and converted from thousands to show actual figures. Data is loaded from a local CSV file, and bars are drawn as styled SVG rectangles.

May 3, 2020

Loading thumbnail…

MAKING A BAR GRAPH WITH D3.JS

This bar chart displays the top 10 most populated countries based on 2018 United Nations World Population Prospects estimates. The visualization uses D3.js v5 with SVG rendering and animation, implementing scales via `scaleLinear` for population values and `scalePoint` for categorical country labels. Custom tick formatting converts numbers to billions, and the data is loaded from a CSV file using D3's `csv` function.

May 2, 2020

Loading thumbnail…

A FACE WITH D3.JS

This example draws a cartoon face using D3.js v5, rendered as an SVG with a yellow circular head, eyes, eyebrows, and a mouth created using the `d3.arc` path generator. The page also includes an animated left eyebrow that moves down and back up via chained `transition().duration(2000)` calls, while the right eyebrow remains static. All shapes are positioned with explicit pixel coordinates within a 960x500 SVG canvas.

Apr 24, 2020