Skip to main content
SimilarExport ZIP
100%

D3 Sequential Color Bar Chart

✓ Published2🌍 Public
Mmariahdiaz
Last edited Oct 3, 2022
Created on Oct 1, 2022
Forked from D3 Bubble 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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

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

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
76% match
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
76% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack - Play

This interactive stacked bar chart visualizes two years of personal electricity consumption for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses D3.js version 7 and the d3-scale-chromatic library to render the SVG bars, with green and blue colors distinguishing the different accounts via a categorical color scale. The chart employs `d3.stack()` to compute cumulative bar segments and uses `scaleBand()` and `scaleLinear()` for the axes, with hover effects that decrease bar opacity and display tooltips showing the kilowatt-hour amounts. The data comes from a personal consumption dataset covering a two-year period.

KKamal Bahadur Rana
75% match