Skip to main content
SimilarExport ZIP
100%

D3 - Diverging bar chart

✓ Published0🌍 Public
CChandana Srinivas
Last edited Mar 5, 2024
Created on Mar 4, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
83% 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
82% match
Loading thumbnail…

Untitled

This example shows GDP per capita for a selection of countries as a bar chart. Bars initially render in the order they appear in the data, with a transition animating their height on load. Users can hover over bars to highlight them in orange, and a checkbox below the chart sorts the bars in descending order by value. The visualization is built with React and D3 v4, using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG with mouseover event handlers.

Ppriyankab23
81% match
Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
81% match
Loading thumbnail…

GDP Bar Chart

This example presents a static bar chart of GDP data, with each bar’s height representing a country’s economic output. The visualization uses D3.js to bind data to SVG elements, scale the bars with `d3.scaleLinear`, and apply a color scale to differentiate values. The chart is rendered inside a minimal React component, with the view instantiated via a simple `div` container. Bars are drawn using SVG `rect` elements, and the code leverages D3’s selection and data-join pattern to create the visualization.

Aadventuresenglish.info@gmail.com
80% 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
79% 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
79% match