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

Last edited Mar 5, 2024

Created on Feb 29, 2024

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.

AI-generated description

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

Similar vizzes

[A4] MaxTemp Readings from January 2016 in Alabama (Box Plot)

This visualization displays a box plot of maximum temperature readings from January 2016 in Alabama, drawn as an SVG using D3.js v7. The plot includes a gray box spanning the interquartile range with lines for the minimum, median, and maximum values, all positioned along a linear temperature axis. The code loads CSV data via `d3.csv`, computes quartiles with `d3.quantile`, and renders the chart using `d3.scaleLinear` and `d3.axisBottom`. Hovering over the box highlights it in orange and displays a tooltip with the five-number summary.

81% match

[A4] Daily Average Temp Readings from Alabama in January (Histogram)

This example shows a histogram of daily average temperature readings from Alabama in January, with temperature on the x-axis and the count of readings per bin on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub Gist, `d3.histogram()` to bin the temperature values, and `d3.scaleLinear` along with `d3.axisBottom` and `d3.axisLeft` to render the SVG axes. Gray bars fill each bin, and hovering over a bar turns it orange while displaying the count as a text tooltip.

79% match

[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.

[A3] Day-to-Day Average Temp Readings from Alabama in January (Histogram)

This histogram visualizes day-to-day average temperature readings from Alabama in January, showing the frequency of temperatures binned into five-degree ranges from 10–15°F up to 46–50°F. The chart displays eight bars, with bar height representing the count of days in each temperature bin. The visualization loads CSV data via p5.js’s `loadTable` function and renders the plot using p5.js canvas drawing methods, including custom axes, grid lines, and labeled tick marks. The code manually sorts temperature values into bins using conditional logic and draws each bar with `rect`, while labels and a rotated y-axis title are positioned with `text` and `rotate`.

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

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

[A3] MaxTemp Readings from January 2016 in Alabama (Box Plot)

This visualization displays a box plot of maximum temperature readings from January 2016 in Alabama, drawn on a p5.js canvas. The plot shows the distribution of temperatures with a box spanning the interquartile range, whiskers extending to the minimum and maximum values, and a median line. The data is loaded from a remote CSV file using p5.js’s `loadTable` function. The sketch calculates quartiles using a custom linear interpolation method and maps the values to screen coordinates to render the box, whiskers, axis marks, and labels.

77% match