Skip to main content
Log in
F

foomoon

@foomoon·2 public vizzes

Loading thumbnail…

Time Series Bar Chart!

This time series bar chart visualizes hierarchical grouping and temporal spans across categories. The SVG visualization uses D3 v5’s scaleLinear and scaleBand to map start and end times along the x-axis, while grouping data points by category on the y-axis. Bars respond to mouseover with a transition that expands their height and displays a tooltip, implemented via d3.select and event listeners. The code loads data from windows.csv using d3.csv, applying a linear scale for time intervals and styling with CSS classes for layout and interactivity.

Apr 30, 2021
Loading thumbnail…

Time Series Bar Chart

This example visualizes the ten most populous countries in 2020 using a horizontal bar chart, with country names on the y-axis and population on the x-axis. Built with React and SVG, it uses D3’s `scaleBand` and `scaleLinear` to map data to coordinates, and the `csv` function to load the United Nations World Population Prospects 2019 dataset. Custom components `AxisBottom` and `AxisLeft` render the axes, while `Marks` draws the bars with tooltips.

Apr 26, 2021