Diverging bar chart

100%

Diverging bar chart

✓ Published1🌍 Public

Last edited May 17, 2022

Created on Mar 3, 2022

Forked from Bar chart with a Sequential color scale

This diverging bar chart visualizes net forest conversion across countries, with bars extending to the right for net gains and to the left for net losses. The visualization uses a diverging color scale from the ColorBrewer RdYlGn palette to encode the magnitude and direction of change. Entities are labeled directly within the chart, and hovering over a bar reveals a tooltip with the exact value. The chart is rendered as an SVG using D3.js v6, with scales defined via `d3.scaleLinear` and `d3.scaleBand`, and data loaded asynchronously from a CSV file using `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Assignment 6 updated -- Diverging bar chart with diverging color scale

This diverging bar chart visualizes net forest conversion by country, with bars extending right from a central zero axis for net gains (green) and left for net losses (red). The code uses D3 v6 to load CSV data via `d3.csv`, scale linear and band axes, and applies the ColorBrewer RdYlGn color scheme through `colorScale.domain([-max, max])`. A tooltip displays each country's value on mouseover, and the chart labels each bar with its entity name.

Vvishusikka

86% match

Loading thumbnail…

d3 bar diverging

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.

AAndrew

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

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

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

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

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

74% match