d3 bar diverging

100%

d3 bar diverging

✓ Published0🌍 Public

Last edited Mar 5, 2024

Created on Mar 5, 2024

This example shows a diverging bar chart of United States rural population growth from 2000 to 2009, using a diverging color scale from ColorBrewer to distinguish positive and negative growth values. The visualization loads CSV data from a GitHub gist, which is based on the Corgis global development dataset, and renders it as SVG bars using D3 v7. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical year on the y-axis, and a `d3.scaleDiverging` with the RdBu color scheme for encoding value magnitude. The d3-legend library adds a sequential color legend, while axis labels and ticks are generated with standard D3 axis methods.

AI-generated description

A bar chart using a diverging color scale with color brewer in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/global_development/

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

A6_BarChart with Diverging color scale

This bar chart visualizes population growth rates across countries, with a diverging color scale that encodes both magnitude and direction of change. The chart sorts countries from lowest to highest growth rate, using a red-yellow-blue diverging palette from `d3.scaleDiverging` with `d3.interpolateRdYlBu`. Negative rates appear in blue tones, positive in red, with bars extending in opposite directions from a central zero line. The visualization uses D3 v7 with SVG rendering, employs `d3.scaleBand` for categorical x-axis placement and `d3.scaleLinear` for the y-axis, and includes a legend built with the d3-legend library.

DDuc Pham

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

85% match

Loading thumbnail…

Assignment 6: Bar Chart with Diverging Color Scale

A horizontal bar chart displays population growth rates for 35 countries, with bars extending from a central zero line and colored along a diverging red-yellow-green scale to distinguish negative from positive growth. The chart ranks countries by annual growth percentage, from the United States at 1.05% down to Germany at -0.35%, and includes country labels positioned beside each bar. The visualization uses d3.csv to load data, d3.scaleBand for the categorical y-axis, d3.scaleSequential with d3.interpolateRdYlGn for the diverging color scale, and d3.legendColor to render a horizontal legend. SVG rectangles represent the bars, with axes and labels drawn using d3.axisBottom and SVG text elements.

Aamrubal

83% match

Loading thumbnail…

D3 - Diverging bar chart

This diverging bar chart visualizes GDP per capita across various countries, with bars extending in opposite directions from a central zero baseline to highlight positive and negative values. The chart uses a red-blue diverging color scale (`d3.scaleDiverging` with `d3.interpolateRdBu`) to encode magnitude, while the x-axis uses a band scale for categorical placement and the y-axis a linear scale. Rendered as SVG, the visualization is built with D3 v7, includes axes via `d3.axisBottom` and `d3.axisLeft`, and adds a color legend using the `d3-legend` library. Data is loaded from a CSV file hosted on GitHub.

CChandana Srinivas

82% match

Loading thumbnail…

A6 - Diverging Bar Chart

This diverging bar chart visualizes the change in state population from 2020 to 2023, using a diverging color scale to distinguish growth (steelblue) from decline (lightpink). The chart renders the top ten states by population change, with bars extending from a central zero axis. Built with d3.js, it employs `d3.scaleLinear` for the numeric axis, `d3.scaleBand` for categorical states, and `d3.legendColor` for the legend, while an axis is drawn using `d3.axisBottom` and `d3.axisLeft`.

RRavneet Singh Bhatia

81% match

Loading thumbnail…

Fork of Diverging bar chart

A diverging bar chart displays net forest conversion from 1990 to 2015 for countries worldwide, with positive values in green and negative values in red/yellow. The chart uses an ordinal y-axis and a linear x-axis, with bars extending from a central zero line. Data is loaded from a CSV file and rendered as SVG rectangles. The visualization uses d3.scaleBand, d3.scaleLinear, colorbrewer.RdYlGn for color encoding, and a hover tooltip showing exact values. Axes are generated with d3.axisBottom, and the chart includes a legend.

Ddriftcafe

80% match

Loading thumbnail…

Diverging Color Scale

This diverging bar chart displays positive and negative values for seven categories using a diverging color scale. The visualization encodes value magnitude through bar height, while direction is shown by bars extending above or below a central zero axis, with the PiYG interpolator assigning distinct colors to positive and negative values. Built with D3 v6, the example uses `scaleDiverging`, `scaleBand`, and `scaleLinear` to position and color rectangles, alongside the d3-legend library to render a horizontal color legend. Data comes from a local CSV file containing category-value pairs.

KKwasi Acquaye

79% match