D3 Diverging Color Bar Chart

100%

D3 Diverging Color Bar Chart

✓ Published2🌍 Public

Last edited Nov 8, 2022

Created on Oct 2, 2022

Forked from D3 Sequential Color Bar Chart

This interactive D3 bar chart visualizes the percentage change in natural gas consumption by the electric power sector across eleven U.S. states, with bars diverging from a central zero axis. Each bar’s fill color reflects the magnitude and direction of change using a sequential color scale based on the `interpolateRdBu` interpolator. The chart employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for both the horizontal value scale and bar lengths, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for axis ticks. A `d3.legendColor` legend with nine cells maps the color scale to the numeric range. Data is loaded from a CSV file via `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Sequential Color Bar Chart

This bar chart displays natural gas consumption by the electric power sector across eleven U.S. states, with each bar’s length encoding the consumption value in billion BTU. A sequential color scale using `d3.scaleSequential` and `d3.interpolatePuRd` maps higher consumption to darker hues, with a `d3.legendColor` legend clarifying the gradient. The chart is rendered as SVG using D3 v7, with axes created via `d3.axisBottom` and `d3.axisLeft`, and data loaded from a CSV file.

Mmariahdiaz

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

90% match

Loading thumbnail…

D3 Bar Chart

This example visualizes natural gas consumption by the electric power sector across eleven U.S. states, using a horizontal bar chart where each bar’s length encodes the consumption value in billion BTU. The chart is built with D3.js (v7) and rendered as SVG, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Each bar is labeled with its exact value, and the plot includes a title and axis labels. The data comes from the included `data.csv` file.

Mmariahdiaz

90% match

Loading thumbnail…

D3 Scatter Plot

This scatter plot displays U.S. natural gas consumption by the electric power sector in billion BTU per year from 2000 to 2010. The code loads data from a CSV file and renders it as an SVG using D3 v7. It uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Circles are appended to represent each data point, with axis labels and a title included.

Mmariahdiaz

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

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

77% match

Loading thumbnail…

Untitled

An interactive bar chart displays the growth rate change in U.S. energy sources from 2012 to 2021, with buttons to toggle between Solar and Gas datasets. The visualization shows outlined, red-stroked bars in an SVG, where each bar’s height represents the annual emission growth value. Using D3 v4, the code implements `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and transitions that animate axis updates over 2.5 seconds. A tooltip appears on mouseover, and the chart title and axis labels update dynamically based on the selected energy source.

Xxiaojingwu138

76% match

Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone

75% match