Skip to main content
SimilarExport ZIP
100%

Let's make a bar chart!

✓ Published0🌍 Public
Sswathijay
Last edited Sep 14, 2019
Created on Sep 14, 2019

This example shows the cumulative number of events by year from 1949 to 2019, using a bar chart that grows in height as the running total increases. The visualization loads CSV data and renders it as SVG rectangles, using D3 v5 scales (`d3.scaleLinear`, `d3.scaleBand`) and axes (`d3.axisBottom`, `d3.axisLeft`). The bars are colored steelblue and positioned via the scale’s range band, with the chart drawn inside an `<svg>` element using a margin convention.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example visualizes the cumulative total of events from 1949 to 2019, with each year’s running total mapped to a bar in a simple bar chart. The visualization uses D3 v5’s `select` and `csv` functions to load data from a local CSV file, parse the numeric `running_total` column, and then append a fixed-width, fixed-height `rect` for each data point. The code does not scale the bars based on value, so all rectangles appear identical in size.

Aadamriley29
88% match
Loading thumbnail…

Bar Chart

A bar chart displays the running total of a dataset from 1949 to 2019, with each year’s cumulative value shown as a horizontal steelblue bar. The chart uses d3.csv to load the data, then d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. Axes are rendered with d3.axisLeft and d3.axisBottom, while the x-axis labels are formatted with d3.format using a '.3s' suffix.

JJagan
87% match
Loading thumbnail…

Bar Chart

This bar chart displays yearly counts from a CSV dataset, with steel-blue rectangles representing each year’s value. The visualization uses D3 v5 to load and parse the data, then applies `scaleLinear` for the horizontal axis and `scaleBand` for vertical positioning. SVG elements are appended directly to the chart, with axes omitted from the final rendering. The bars scale in width according to the year values while maintaining equal heights for each band.

EErik Rudhe
84% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of yearly values from 2011 to 2015, with each bar’s length representing a numerical value. The chart uses an SVG rendering with D3 v6, applying `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to draw the axes. Data is loaded from a CSV file via `d3.csv`, and rectangles are appended to the SVG to form the bars.

Ssumaiyamahin
84% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart where each bar represents the cumulative running total of data points per year, with the height of each bar fixed at 300 pixels. The visualization uses D3.js, specifically the `select`, `csv`, and `data` methods to load the `data.csv` file and append rectangles to an SVG. The code binds the parsed numeric `running_total` values to `rect` elements but does not encode the values in the bar sizes, leaving all bars equal in height.

Aadamriley29
83% match
Loading thumbnail…

Making a Bar Chart

This example displays a bar chart of the number of files per year, with years on the y-axis and file counts on the x-axis. The visualization uses D3 v5 to load data from a CSV file, scale the values with `d3.scaleLinear` and `scaleBand`, and render SVG rectangles. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. The chart highlights the fluctuating file counts across years, peaking in 2014 and declining afterward.

TTopoVague
83% match
Loading thumbnail…

jasplund3

This bar chart displays the cumulative running total of a dataset from 1949 to 2019, showing steady growth over time. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleBand` for the x-axis to position bars by year and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the x-axis tick labels are filtered to show every third year. Data is loaded from a CSV file using `d3.csv`.

Ggotyou007
81% match
Loading thumbnail…

Let's make a face with D3.js!

This visualization demonstrates a bar chart of cumulative sample data by year from a CSV file, rendered as SVG using D3.js v5. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are appended via `selectAll('rect')` and `enter()`, with height mapped to the `running_total` values. The example also includes a video tutorial link in its README, focusing on fundamental DOM manipulation with D3.

Ddarshue
81% match