Diverging Bar Chart of Temperatures

100%

Diverging Bar Chart of Temperatures

✓ Published0🌍 Public

Last edited Mar 5, 2024

Created on Mar 4, 2024

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.

AI-generated description

Source: https://d3-legend.susielu.com/ https://observablehq.com/@d3/diverging-bar-chart/2?intent=fork

MIT Licensed

Similar vizzes

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

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…

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

81% match

Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong

81% match

Loading thumbnail…

Histogram D3

This histogram displays the distribution of average daily temperatures recorded throughout 2016, with bars colored green that turn red on hover. Built with D3 v6, the visualization loads CSV data via `d3.csv`, computes bin counts using `d3.histogram()`, and scales the axes with `d3.scaleLinear()`. The SVG rendering includes axis generators (`d3.axisBottom` and `d3.axisLeft`), interactive tooltips via appended `title` elements, and explicit margins for layout. The code demonstrates a straightforward binning workflow from raw weather data to a readable chart.

AAllen Ho

80% match

Loading thumbnail…

ICE-6 Bar Chart

This bar chart visualizes the average annual temperature across several U.S. cities, derived from monthly city_temperature.csv data. Each bar represents one city, with heights mapped to the mean of its recorded monthly temperatures. Built with D3 v7, the SVG chart uses d3.rollup and d3.mean to aggregate monthly values per city, d3.scaleBand and d3.scaleLinear for positioning, and includes interactive hover tooltips that display the exact average temperature while highlighting the bar. Axis labels and rotated city names aid readability.

Jjanisha30gowda@gmail.com

79% match

Loading thumbnail…

[A6] Min Temp Readings from Alabama Weather Stations on 01/03/2016 (Bar Chart with a Sequential Color Scale)

This example visualizes minimum temperature readings from Alabama weather stations on January 3, 2016, using a bar chart with a sequential color scale. Each bar’s height and fill color encode the recorded minimum temperature, ranging from light blue for cooler readings to dark blue for warmer ones. The chart includes axes for weather station location and temperature in degrees Fahrenheit, along with a horizontal legend showing the color gradient. The code uses D3 v7 to load CSV data via `d3.csv`, apply `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color mapping, while the legend is rendered with the `d3.legendColor` helper from the d3-legend plugin.

Cctan13@dons.usfca.edu

78% match

Loading thumbnail…

temperature_data.csv

This bar chart displays the average annual temperature for numerous U.S. cities, with each bar’s height corresponding to the temperature in degrees Celsius. Built with the D3.js library using `d3.scaleBand` and `d3.scaleLinear`, the visualization renders as SVG on a light background. It reads the `temperature_data.csv` file, parses the numeric temperature values, and draws the bars, axes, and a rotated x-axis label list using D3's modular APIs. The chart’s title and axis labels are added as SVG text elements.

RRuthvik Bairaboina

78% match