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

100%

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

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Feb 13, 2024

Created on Feb 13, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

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

Cctan13@dons.usfca.edu

77% match

Loading thumbnail…

A2 - Temps (Heatmap)

This heatmap visualizes average monthly temperatures for seven U.S. states in 2016, using a yellow-to-orange color scale where warmer temperatures appear brighter. The p5.js sketch loads CSV data via `loadTable`, processes it in `preload()` and `setup()`, and renders colored squares for each state–month combination on a Canvas. A legend explains the color range, and axis labels identify states and months. The code uses p5.js drawing functions like `fill()` and `square()` to construct the grid.

Cctan13@dons.usfca.edu

76% match

Loading thumbnail…

Strip Plot

A strip plot displays the average temperature of ten cities for each month of 2016, with each month’s ten readings jittered horizontally to reduce overplotting. The visualization uses the p5.js library, loading a CSV dataset from a GitHub Gist via the `loadTable` function, and renders circles on a canvas with hover tooltips showing exact temperature and month values. Axis labels and tick marks for temperature and month are drawn manually, with random offsets precomputed in a `randomNum` array to distribute points.

AAllen Ho

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

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

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

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

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

68% match