Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Mar 5, 2024
Created on Mar 5, 2024
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
82% 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
82% 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…

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

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

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

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

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

[A3] January MinTemps in Alaska and California (Stripplot)

This visualization uses a stripplot to compare January minimum temperatures in Alaska and California. The p5.js sketch loads a CSV file and separates temperature readings by state, plotting each data point as a small blue ellipse. The dots for each state are jittered randomly within a narrow horizontal band, while their vertical positions map to temperature values on a custom-drawn axis. The rendering includes manually drawn axes, state labels, and a rotated y-axis title, with the data sourced from a GitHub-hosted CSV file.

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

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

Cctan13@dons.usfca.edu
72% match