Skip to main content
SimilarExport ZIP
100%

bar chart

✓ Published0🌍 Public
LLonwabo11
Last edited May 24, 2019
Created on May 22, 2019
Forked from bar chart

This example shows a grouped bar chart of shutter open time across months, with separate bars for Lesedi, meter, and meters measurements. The visualization uses D3 v5 to load data from a CSV file and render SVG elements. It employs scaleBand for the month categories and sub-groups, scaleLinear for the y-axis, and axisBottom/axisLeft to display the month names and measurement scale. The bars are drawn through selectAll and enter/append operations, with fixed width and height values based on the y-scale range.

AI-generated description
MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

Untitled

This example shows a grouped bar chart comparing three product categories—Orange, XPC, and ABC—across six months, with the data loaded from a CSV file. The visualization uses d3.csv to parse the dataset and d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to map months, values, and category colors. Bars are rendered as SVG rectangles, grouped by month via nested selections. The chart includes axes generated with d3.axisBottom and d3.axisLeft, though the X-axis labels are missing because the code references a nonexistent `d.group` field rather than the actual `Month` column.

SSeanisgod1994
78% match
Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong
77% match
Loading thumbnail…

First Bar Chart

This example displays the number of days for each month, derived from a CSV file, using horizontal bars where length corresponds to the data value (with days multiplied by 1000). Rendered as SVG via d3.v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, `axisLeft` and `axisBottom` for grid markings. Data is loaded through `csv()` from the United Nations World Population Prospects 2017 estimate, though the visible dataset is month-based.

AAnne Lee Steele
77% match
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
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…

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