bar charts

100%

✓ Published2🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This example shows U.S. state populations for 2024 as a horizontal bar chart, sorted in descending order with the District of Columbia moved to the end. The bars encode population values using length, position, and color, with a purple-to-blue gradient fill and hover highlighting. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Gridlines and tooltips via SVG `<title>` elements are also included.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays 2018 state population data from datausa.com. It uses D3 v5 with an SVG rendering approach, mapping population values to horizontal bar lengths against state labels. The code employs `d3.csv`, `scaleLinear`, and `scaleBand` to process the data and position the bars, with `axisLeft` and `axisBottom` generating the chart’s axes. Each state’s population is represented by a steel-blue rectangle, sorted alphabetically along the vertical axis.

PPerry

85% match

Loading thumbnail…

A Bar Chart

A bar chart displays U.S. state populations from a CSV file, sorted descending by value, with white value labels at the end of each steel-blue bar and axis ticks along the top and left. It uses D3 v3 to load and parse the data, then builds scales with `d3.scale.linear` and `d3.scale.ordinal`, rendering SVG elements via `append` and styling with CSS classes. The `d3.svg.axis` component draws the ordinal left axis and linear top axis, while `d3.format` formats the numeric labels.

Mmbostock

84% match

Loading thumbnail…

Diverging Bar chart in D3

This diverging bar chart visualizes population percent changes across U.S. states between April 2020 and July 2019, using horizontal bars that extend left or right from a central zero axis. The visualization first loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for axes and bar lengths, `d3.scaleBand` for the categorical y-axis, and `d3.scaleSequential` with an `interpolateRdBu` color scheme. A color legend is generated using `d3.legendColor` from the d3-legend plugin, while bars are rendered as SVG `<rect>` elements. The chart includes axis labels, a title, and subtitle, all styled with D3 v7.

EEunice Tu

84% match

Loading thumbnail…

Diverging Bar chart in D3

A diverging bar chart displays the population percent change across U.S. states, using the State Demographic dataset from the U.S. Census Bureau. The chart shows each state’s population change from April 1, 2020 to July 1, 2019, with positive changes extending right and negative changes extending left from a central zero axis. D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with an `interpolateRdBu` color scheme map values to positions and colors, while the `d3.legend` plugin adds a color legend. Data is loaded as CSV via `d3.csv` and rendered as SVG rectangles.

EEunice Tu

83% match

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the population distribution across seven age groups for six U.S. states, using a distinct color for each age bracket. The chart is rendered as SVG, with bars grouped per state along the x-axis and population counts on the y-axis, formatted with SI prefixes like "10M." Built with D3 v4, the visualization loads data from a CSV file via `d3.csv`, uses `d3.scaleBand` for the x-positions and `d3.scaleLinear` for the y-axis, and applies an ordinal color scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend is manually constructed with SVG rectangles and text.

JJboulery

82% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The visualization uses d3.csv to parse the data, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. d3.stack computes the stacked positions, while d3.axisBottom and d3.axisLeft render the axes. The SVG rendering includes a legend and uses d3.format with SI prefixes (e.g., "10M") for population labels.

深深度碎片

81% match

Loading thumbnail…

Bar charts

This example displays a horizontal bar chart of country populations, sorted by the data’s original order, with steelblue bars and a formatted x-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with `axisLeft` and `axisBottom` generating the axes. Population values are parsed from a CSV file and multiplied by 1,000, while tick labels are shortened using `format('.3s')`. The SVG rendering includes custom margins, a title, and an axis label styled via external CSS.

Ddankvader1

81% match

Loading thumbnail…

Population Bar Graph

This population bar graph displays county population data using a vertical bar chart. The chart encodes each county’s population with the height of a steelblue bar, which turns brown on hover. Built with D3 v4, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` elements for the bars. The data is loaded from a remote CSV file via `d3.csv`.

MMTClass

81% match