Bar Chart Practice

100%

Bar Chart Practice

✓ Published0🌍 Public

Last edited Apr 24, 2021

Created on Apr 22, 2021

This bar chart visualizes Japanese historical eras, plotting each era’s name on the vertical axis against its span of years on the horizontal axis using an SVG rendering. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data hard-coded as an array of era objects. The chart includes a title, axis label, and gridlines, with bars colored steelblue via CSS.

AI-generated description

MIT Licensed

Similar vizzes

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

75% match

Loading thumbnail…

Bar chart

GGeolffrey S Mena

75% match

Loading thumbnail…

Bar chart

GGeolffrey S Mena

75% 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

75% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of population figures for prefectures in East Japan, with each bar’s length proportional to the population value. It customizes both axes: the y-axis removes its line and tick marks for a cleaner look, while the x-axis uses `d3.axisBottom` with a `.2s` tick formatter (e.g., “13.7M”) and spans the full chart height via negative tick sizes. The chart is rendered with D3 v5, loading data from a CSV, and uses `scaleLinear` and `scaleBand` for positioning.

VVikil Lakkavatri

74% 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

74% match

Loading thumbnail…

Let's make a bar chart!

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.

Sswathijay

73% 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

73% match