A6 DIVERGING BAR CHART

100%

A6 DIVERGING BAR CHART

✓ Published1🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

This diverging bar chart compares monthly crude oil and natural gas prices over time, with blue bars extending to the right for natural gas and red bars to the left for crude oil. It uses a shared baseline at the center of the chart to emphasize the relative magnitude and divergence between the two commodities across dates. The visualization is built with D3.js v7, employing linear scales for both axes, a band scale for the categorical date axis, and SVG rectangles for rendering. Data is loaded as CSV from a remote GitHub gist.

AI-generated description

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

Similar vizzes

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

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

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

73% match

Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur

72% match

Loading thumbnail…

ICE6_Q1_Rendering Marks and Channels with D3

This example displays monthly gas prices for 2021 as a bar chart, with months on the y-axis and price on the x-axis. It uses React hooks (useState, useEffect) to load and parse CSV data from a GitHub gist via d3.csv, then renders SVG rectangles scaled with d3.scaleBand and d3.scaleLinear. Axes are drawn manually using d3.ticks, with grid lines and tick labels positioned via SVG transforms.

PPbarring

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

71% match

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

70% match

Loading thumbnail…

viz_6

This interactive line chart visualizes daily Brent oil prices over time, mapping dates to the x-axis and prices to the y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to create a smooth path through the data points. The SVG rendering includes custom axis components (`AxisBottom`, `AxisLeft`) and loads data from a CSV file via the `csv` function, with styles defined in Poppins font and a teal color scheme.

HHuldahMerlinKolli

70% match