Fork of Diverging bar chart

100%

Fork of Diverging bar chart

✓ Published0🌍 Public

Last edited Mar 8, 2022

Created on Mar 7, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Diverging bar chart

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`.

Pprateekvasi

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

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

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

78% match

Loading thumbnail…

Fork of D3 Diverging Color Bar Chart

This fork of a D3 diverging color bar chart visualizes state-level changes in natural gas consumption by the electric power sector, with horizontal bars diverging from a central zero axis. The chart encodes each state’s positive or negative percentage change through bar direction and a sequential red-blue diverging color scale, using `d3.scaleLinear` for bar lengths and `d3.scaleSequential` with `d3.interpolateRdBu`. Rendered as SVG, it reads data from a CSV via `d3.csv`, and includes dual y-axes plus a color legend from the `d3-legend` plugin, with axes drawn by `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`.

EEunice Tu

77% match

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the number of migrants per country, with bar heights encoding the values on a linear scale. The chart uses D3 v6 to load CSV data, create band and linear scales, and render SVG axes and rectangles. Interactive mouseover events change bar colors from steel blue to orange, with a smooth transition on mouseout. The data originates from a remote CSV file, and the visualization is built entirely with D3’s selection, scale, and axis APIs.

Ssucotton9

77% match

Loading thumbnail…

A6 Diverging Bar Chart D3

This diverging bar chart visualizes the percentage-point change in smoking rates between 2011 and 2012 across five countries, with positive differences extending rightward in blue and negative differences leftward in red from a central zero axis. The chart uses D3.js v7 to load the CSV dataset, compute the absolute maximum difference for symmetric axis scaling, and render SVG rectangles with horizontal orientation. A d3-scale linear color scale maps negative to positive values through light grey, while the d3-legend plugin adds a horizontal color legend. Hovering highlights bars in orange, and the chart includes labeled axes for both percentage difference and country names.

EEric Yao

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

76% match