Diverging Color Scale

100%

Diverging Color Scale

✓ Published0🌍 Public

Last edited Mar 4, 2024

Created on Mar 4, 2024

Forked from Sequential Color Scale bar chart

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with a Diverging Color Scale Using D3

This bar chart visualizes evaluations of communication in a pull request from a large open-source project, showing two metrics—inclusiveness and constructiveness—across a five-point Likert scale from negative to positive. The visualization uses a diverging color scale with d3.schemePiYG to distinguish sentiment categories, while negative responses extend leftward from a central zero point. Data is aggregated from an external dataset into a diverging bar layout using D3 v7 scales and SVG rectangles, with a d3-legend color legend explaining the color encoding. The x-axis uses d3.axisBottom to display counts.

OOlha

82% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Mmbostock

81% match

Loading thumbnail…

Diverging Color Bar Chart

This example visualizes annual rainfall data as a diverging color bar chart, showing deviations from the mean of 1215.2mm. Bars are colored on a red-white-green linear scale, with positive deviations in green and negative in red, anchored at zero. Built with D3 v7 in SVG, it uses d3.scaleBand for the x-axis, d3.scaleLinear for both y-values and color, and the d3-legend library for a sequential color legend. Data is loaded asynchronously from a CSV file.

PPranay Matalia

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

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

79% match

Loading thumbnail…

A6 DIVERGENT BAR CHART

This divergent bar chart displays positive and negative values extending in opposite directions from a central zero axis, using color to distinguish between categories. Built with React and D3, it maps data to horizontal bars via SVG rectangles, with scales and axes generated through d3-scale and d3-axis. The chart imports data from a local CSV file and updates dynamically based on user selection.

SShazil Taqi

79% match

Loading thumbnail…

Stacked bar chart with negative values

This stacked bar chart visualizes positive and negative values across six months from a CSV file, with each bar divided by category and color. The chart uses a diverging layout where positive segments extend rightward from a zero baseline and negative segments extend leftward, anchored by the axis. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `d3.stack`, and `axisLeft`/`axisBottom` to compute and render the SVG. The data is split into positive and negative stacked series, with zero-baseline positioning calculated from value ranges.

LLittledevil7

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

78% match