Skip to main content
SimilarExport ZIP
100%

Vertical bar chart

✓ Published3🌍 Public
DDeanna Bosschert
Last edited Jan 15, 2020
Created on Jan 13, 2020
Forked from Vertical bar chart

This vertical bar chart compares the profit percentage of a single healthcare organization against national Dutch averages for 2011. The data originates from Dutch statistics and organizational annual reports. The visualization uses D3 v5 with SVG rendering, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis. Custom axis styling includes formatted tick labels and rotated text, while the chart title and axis labels clarify the displayed metric.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Vertical bar chart

This visualization displays the profit percentage of a Dutch organization from 2011 to 2018, using a vertical bar chart with a single bar per year. Built with D3 v5, it loads data from a local JSON file and renders SVG elements. The chart customizes its axes by rotating the x-axis tick labels and formatting the y-axis ticks with the `format` API. A linear scale (`scaleLinear`) maps the profit values, while a band scale (`scaleBand`) positions the bars.

DDeanna Bosschert
90% match
Loading thumbnail…

Vertical bar chart

This example shows the profit percentage of a Dutch company across multiple years, from 2011 to 2018, along with a combined total. A vertical bar chart displays each year’s percentage as a green bar, with the years labeled on the x-axis and the percentage scale on the y-axis. The visualization is built with D3 v5 and Vue, using `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and SVG rendering. Data is loaded from a local JSON file and filtered to include only the year and profit percentage before rendering.

DDeanna Bosschert
85% match
Loading thumbnail…

Horizontal grouped bar chart

This horizontal grouped bar chart displays the percentage prevalence of a health-related indicator across demographic subgroups, including gender, education level, wealth quintile, and urban/rural residence. The visualization uses a single series of horizontal bars, with subgroup names on the y-axis and percentage values on the x-axis. Built with React and D3 v6, the chart leverages `scaleLinear` and `scaleBand` to map data values and categories, renders bars and value labels as SVG elements, and includes a custom tooltip that appears on mouseover. Bars are styled with varying opacity to distinguish key subgroups from secondary categories.

AAnimesh Nautiyal
69% match
Loading thumbnail…

Prototype geluk 1.0

This bar chart visualizes reported happiness levels in the Netherlands from 1997 to 2018, with each bar’s length representing the yearly "geluk" score. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles with steelblue fill. Data is loaded from a local CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The visualization highlights slight annual fluctuations in happiness, remaining mostly stable between 87 and 89 points.

EEline000
69% match
Loading thumbnail…

Circular Braplot 2013

A circular bar plot displays percentage changes for 28 Dutch societal indicators from 2013, with bars extending outward from a central axis to show positive or negative values. Built with D3.js v4, the visualization uses `d3.scaleBand` for angular positioning and `d3.scaleRadial` for bar lengths, while `d3.arc` generates the annular bar shapes. Labels are rotated around the circumference using trigonometric calculations. The chart reads from a CSV file containing indicator names and their corresponding percentage changes.

EEline000
68% match
Loading thumbnail…

Circular Braplot 2014

A circular bar plot displays 27 social and economic indicators for the Netherlands in 2014, with bar lengths representing percentage changes from the previous year. The SVG visualization uses d3.scaleBand for angular positioning and d3.scaleRadial for radial lengths, drawing each bar as an arc path with d3.arc. Labels are rotated around the circle and flipped at the midpoint for readability. Data is loaded from a CSV file using d3.csv, and the chart is rendered with D3 v4 alongside the external d3-scale-radial library.

EEline000
68% match
Loading thumbnail…

Untitled

A grouped bar chart compares survey responses about police politeness across six education levels in the Netherlands. Each group represents a response option, from "Helemaal mee oneens" to "Helemaal mee-eens," with bars colored by education level. The chart uses D3.js v5 with React, rendering as animated SVG. It employs `d3.scaleBand` for group and bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for categorical colors, with data loaded from a CSV file. Clicking legend items filters the displayed bars.

Jjenniferslagt
68% match
Loading thumbnail…

Simple Vertical Bar Chart

A simple vertical bar chart displays six financial ratios from a tab-separated data file, with values encoded as bar heights and labeled along both axes. The SVG rendering uses d3.v3 with ordinal and linear scales, d3.svg.axis for ticks, and d3-tip for hover tooltips showing each metric’s exact value. Bars fill orange, darkening to orangered on mouseover. The y-axis labels are formatted as percentages via d3.format, while rotated vertical text and margin-based layout structure the presentation.

MMohamedZaki
68% match