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

100%

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

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Feb 21, 2024

Created on Feb 20, 2024

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.

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

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

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

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

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

[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

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

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

69% match