Skip to main content
SimilarExport ZIP
100%

Time Series Bar Chart!

✓ Published0🌍 Public
Ffoomoon
Last edited Apr 30, 2021
Created on Apr 26, 2021
Forked from Customizing Axes

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.

AI-generated description

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays population data across multiple categories, with each group of bars representing a different region or time period. The visualization uses D3.js v5 to render the chart as SVG elements, employing `d3.scaleBand` for positioning the grouped bars and `d3.scaleLinear` for the y-axis. A legend identifies each bar’s category, while axes are formatted using `d3.axisBottom` and `d3.axisLeft`. The chart also demonstrates dynamic data handling through `d3.csvParse` with auto-typing.

FfaRriaN
80% match
Loading thumbnail…

Bar chart

This example shows a horizontal bar chart with a time-based x-axis and categorical y-axis, displaying progress along a timeline for crew groups. The bars are rendered with a fixed green fill, and the x-axis includes a custom tick format with negative tick sizes. The code uses D3 v5 APIs including `scaleTime`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and loads data from a local CSV file via `d3.csv`. An SVG container with specific width and height dimensions is selected using `d3.select`.

Eelaine-xiao
79% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
77% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
77% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
77% match
Loading thumbnail…

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit
77% match
Loading thumbnail…

Making Vertical Bar chart with D3

This example shows a vertical bar chart of monthly date-value pairs from a CSV file, with bars animating upward over two seconds to their final heights. The D3 v5 code uses `scaleLinear` for the y-axis, `scaleBand` for categorical x-axis positioning, and `axisLeft`/`axisBottom` for tick marks. The SVG rendering is driven by a custom transition on `rect` elements, which grow from the baseline to the scaled value, while the chart title and axis labels are added as SVG text.

JJuan David Bolaños Rojas
77% match
Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

JJuan David Bolaños Rojas
76% match