Skip to main content
SimilarExport ZIP
100%

A6 - Diverging Bar Chart in D3

✓ Published0🌍 Public
RRiya Mathur
Last edited Mar 5, 2024
Created on Mar 5, 2024
Forked from HTML Starter

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.

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 - Sequential Color Scale Bar Chart

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

RRiya Mathur
88% match
Loading thumbnail…

Diverging Bar Chart of Temperatures

This diverging bar chart displays average December 2016 temperatures for various station cities, with each horizontal bar extending left or right from a central zero axis to show below- or above-freezing values. The bars are colored using a sequential red-blue interpolator (`d3.scaleSequential` with `d3.interpolateRdBu`), ranging from blue for cold to red for warm temperatures. The visualization loads weather data via `d3.csv` and renders as SVG, using `d3.scaleBand` for the city axis, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for ticks, and the external `d3.legend` library’s `d3.legendColor` for a color scale legend. Hovering over a bar turns it red.

AAllen Ho
88% match
Loading thumbnail…

[A6] Jan 2016 Average Temperature Readings in Alaska Cities (Diverging Bar Chart with Diverging Color Scale)

This diverging bar chart displays average January 2016 temperatures across Alaska cities, with each bar extending left or right from a central zero line based on temperature. The visualization uses a red-blue diverging color scale to emphasize cold versus warm readings. The code employs D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with the `d3.interpolateRdBu` interpolator, while rendering bars as SVG rectangles. Data is loaded from a CSV via `d3.csv`, and the legend is generated using the d3-legend library’s `legendColor` function.

Cctan13@dons.usfca.edu
82% match
Loading thumbnail…

temperature_data.csv

This example displays a bar chart of average temperatures for major U.S. cities using React with D3 v7. The visualization presents the data from a CSV file with city names on the x-axis and temperature values on the y-axis, using d3.scaleBand and d3.scaleLinear for positioning. Clicking a bar highlights that city and dims others, with d3.axisBottom and d3.axisLeft providing labeled axes and gridlines. The chart uses a teal color scheme with hover effects, and supports responsive resizing through a ResizeObserver that triggers re-rendering.

RRuthvik Bairaboina
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…

ICE6-BAR graph fork Yashwanth with D3.js

This bar chart visualizes average temperatures for multiple cities, with each city represented by a blue rectangle and the y-axis encoding temperature values. The visualization uses D3.js v5 scales (scaleBand for the x-axis, scaleLinear for the y-axis) alongside React hooks to manage CSV data loading and rendering. Axes are generated using d3.axisBottom and d3.axisLeft, while the temperature data is loaded from a remote CSV file. The chart includes labeled axes for "Cities" and "Temperature," with a 10-unit headroom added to the y-axis maximum for visual spacing.

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

A6-Bar Graph w/ Diverging Color

This bar chart shows Broadway show attendance by year, diverging from blue to red based on attendance values relative to the mean. Each bar’s height maps to the yearly attendance total, while its fill color uses d3.scaleDiverging with d3.interpolateRdBu. The chart is rendered as an SVG via D3 v7, reading data from a CSV file, and includes axes, labels, and a d3-legend color legend.

Jjrcuster@dons.usfca.edu
78% match