Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar chart with D3

Public visualization

Viewing a saved revision (read-only)

54ab3f3ea4e64700a22e4e4c2c4f3106

Bar chart with D3

0 stars0🌍 Public
BBenjamin Ogorek
Last edited Mar 28, 2020
Created on Mar 16, 2020

A horizontal bar chart displays workout volume for muscle groups, with bars sized by sets per week and grid lines for readability. The chart uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate SVG elements from a CSV file loaded via `d3.csv`. Axis labels and a title are added via SVG text, while tick formatting uses `d3.format`. The code removes default axis lines and relies on CSS classes for styling, including steelblue bars and custom font sizes.

AI-generated description

Loading the d3 script from UNPKG puts a d3 variable in the global namespace. (Take out "browse" from that link to load it.

Axes

Here's the tool for trying out formatting.