Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

EXPLORING BAR CHART v3

Public visualization

Viewing a saved revision (read-only)

e1451c0ff93e4ab1a9bc71f7913f1dfd

EXPLORING BAR CHART v3

0 stars1🌍 Public
GGuillamon
Last edited Nov 19, 2019
Created on Nov 18, 2019

This bar chart displays population estimates for ten countries, using a horizontal layout with a linear x-scale and a band y-scale. A tooltip appears on mouseover, showing each country’s name and population, positioned dynamically near the cursor. The chart also includes formatted tick labels and dashed gridlines. Built with d3.v5, the visualization uses SVG rendering, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, with mouseover and mouseout event handlers to control tooltip opacity and positioning.

AI-generated description

Mouseover and mouseout behaviour code taken from this tutorial: https://medium.com/@kj_schmidt/show-data-on-mouse-over-with-d3-js-3bf598ff8fc2