Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

EXPLORING BAR CHART v3

Public visualization

Viewing a saved revision (read-only)

fecbd2587dc042d5a2cd6b8c2321460b

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