Skip to main content
SimilarExport ZIP
100%

Vertical bar chart

✓ Published0🌍 Public
DDeanna Bosschert
Last edited Jan 13, 2020
Created on Jan 13, 2020
Forked from 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.

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

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.

DDeanna Bosschert
90% match
Loading thumbnail…

Vertical bars but d3.v3

A vertical bar chart displays monthly values from a two-column CSV, with dates on the x-axis and values on the y-axis. The visualization uses the older d3.v3 API, loading the library from a CDN into the page. It constructs the chart with an ordinal scale for the date categories, a linear scale for the value range, and SVG axes, then renders steelblue rectangles for the bars. The code employs chained methods like `d3.scale.ordinal()`, `d3.svg.axis()`, and `.rangeRoundBands()` to position and size the bars.

SSebastian Barrett
73% match
Loading thumbnail…

Stylized Bar Chart

This example visualizes annual Dutch rent increases from 2000 to 2020 as a stylized bar chart. The SVG renders bars whose heights correspond to the percentage values from the CSV, with a grey background and no axis labels. The code loads the data using `d3.csv`, which parses the semicolon-delimited values, and assigns the chart’s width and height from the SVG attributes using `d3.select` and `+attr`. The dataset is currently only logged to the console, so no bars are drawn yet.

MmarcoFijan
72% match
Loading thumbnail…

LAB5FINAL

This interactive visualization displays grouped bar charts comparing profit and revenue across seven months, with each month split into colored bars representing revenue categories. Users can drag the top of any bar vertically to modify its value, which immediately updates the displayed profit number and bar height. Built with D3 v5, the example uses `scaleBand`, `scaleOrdinal`, and `scaleLinear` to position and color the bars, while `d3.drag()` handles the interactive manipulation. A color legend, generated by a custom `colorLegend` function, identifies the revenue series, and data comes from a local JSON file rendered as SVG with smooth transitions.

Llimeroc
72% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 9 most profitable companies in 2019, using horizontal bars ranked by profit value. Built with React and D3 v5, it renders as an SVG and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The `useData` hook loads a CSV from a GitHub gist, while custom `AxisBottom` and `AxisLeft` components generate styled tick marks with pink text and orange lines. Hovering over each bar reveals a native SVG tooltip showing the formatted profit value.

TTejaswi@3271
72% match
Loading thumbnail…

PART 3B

This combined bar and line chart visualizes monthly sales and profit for Product A from 2018 to 2022, with semi-transparent green bars representing sales (right axis) and a red line with dots representing profit (left axis). Interactive hover effects increase bar opacity and dot radius, while grid lines and axis labels clarify the dual-scale comparison. The example loads CSV data from GitHub using d3.csv, filters it for Product A, and builds the SVG scene with d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.axisBottom, all within the D3 v7 framework.

Aanirudhrao345@gmail.com
72% match
Loading thumbnail…

Making a bar chart

This gallery example builds a bar chart from financial data in `data.json`, comparing five months of income and fixed outcome amounts side by side. It shows the data split across two horizontal sections: income bars rise upward in steel blue, while outcome bars extend downward in black. The visualization is created with D3.js v5, using `d3.scaleLinear` and `d3.scaleBand` to map values and months, with `d3.axisLeft` and `d3.axisBottom` for labeled axes. Animated transitions on the income bars animate them from zero to their final height, while SVG rendering and CSS classes style the final output.

KKrister
72% match