Project Iteration Week 7

100%

Project Iteration Week 7

✓ Published1🌍 Public

Last edited Oct 9, 2025

Created on Oct 9, 2025

A histogram displays the number of reported sightings against a selected weather variable, using a stacked bar layout to break down counts by precipitation type or season. Built with React and D3 v7, the visualization reads a CSV file and renders SVG bars with interactive tooltips. The x-axis dynamically updates based on user-selected variables like temperature or humidity, while categorical colors distinguish categories via a legend.

AI-generated description

https://github.com/alexiscaira/dataviz-project

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Iteration Two

A histogram displays the number of sightings for a selected weather variable, with an interactive dropdown to switch among conditions like temperature, humidity, and wind speed. Built with React and D3 v7, the visualization uses `d3.bin` to generate bins, `d3.scaleLinear` for axes, and SVG rendering. Data is loaded from a CSV using `d3.csv`, and a custom event communicates dropdown changes between D3 and React state.

AAlexis Caira

90% match

Loading thumbnail…

Project Iteration Week 9

A scatter plot compares the number of sightings against a user-selected weather variable, where each point is colored by precipitation type or season. Built with React and D3 v7, the chart uses D3's `bin` function to aggregate data into histogram bins, with axes, labels, and a legend rendered via `axisBottom`, `axisLeft`, and SVG elements. Animated rain and snow effects are generated with custom `requestAnimationFrame` loops, and a trendline toggle overlays a statistical line. The data comes from a CSV file with location, date, and weather details.

AAlexis Caira

87% match

Loading thumbnail…

Project Iteration Week 10

This interactive React visualization displays Bigfoot sighting records from a CSV as a histogram of sighting counts against a selected weather variable (like temperature, humidity, or wind speed), with points colored by precipitation type or season. A toggle button switches between this scatter plot and a map view showing sighting locations as red circles projected onto a US state map using d3.geoAlbersUsa and d3.geoPath. The scatter plot includes a trendline, a legend, and playful animated rain and snow effects driven by requestAnimationFrame. Data is loaded with d3.csv, and the visualization uses d3.bin for histogram binning.

AAlexis Caira

85% match

Loading thumbnail…

Project Iteration One

This visualization shows the distribution of Bigfoot sighting counts across temperature ranges, using a histogram where the x-axis represents mid-day temperature in Fahrenheit and the y-axis shows the number of sightings per temperature bin. The chart is built with React and D3.v7, loading data from a CSV file containing sighting details, then using D3's `bin` and `scaleLinear` functions to compute and render the bars as SVG rectangles. The visualization includes styled axes, labels, and a title, with a placeholder comment suggesting future color encoding by precipitation type.

AAlexis Caira

80% match

Loading thumbnail…

Project Iteration Week 11/13

This interactive visualization explores Bigfoot sightings across the United States, allowing users to toggle between a binned scatterplot showing sighting counts against various weather variables and a zoomable map of sighting locations. The graph can be colored by precipitation type or season, with optional trendlines and whimsical rain and snow animations overlaid on the chart. The map renders U.S. state boundaries via d3.geoPath with TopoJSON and displays each sighting as a tiny pine tree icon, with hover tooltips and a reset zoom button. Built with React and D3 v7, the visualization updates dynamically through custom events.

AAlexis Caira

78% match

Loading thumbnail…

Histogram

This histogram displays the distribution of a selected weather-related column, such as temperature, from a San Francisco weather dataset. The chart updates with smooth transitions when a different input column is chosen from a dropdown menu or when the bin count is adjusted via the number input. Built with React and D3 v5, it renders as SVG and uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`. Interactive tooltips highlight each bar and show its class range and frequency on mouseover.

SSchmittYannic

77% match

Loading thumbnail…

Generalized histogram

The visualization displays a grid of generalized histograms for eight weather metrics, including windSpeed, humidity, and temperatureMax, sourced from a JSON dataset. Each chart renders bars using SVG rectangles, with a dashed line and label marking the mean. Built with React and D3 v5, the code employs `d3.json`, `d3.histogram`, and `d3.scaleLinear` to compute bins and scales, while `d3.axisBottom` handles the x-axis labels.

Jjbruzzo

76% match

Loading thumbnail…

Starter Template

This example shows a histogram of humidity measurements from weather data, with bars colored cornflower blue and a maroon dashed line marking the mean humidity. The visualization is built using D3 v5 and renders to SVG, using `d3.histogram` to bin the continuous humidity values and `d3.scaleLinear` for both axes. The chart is made accessible with ARIA roles and labels, and it includes a labeled x-axis for humidity. The data is loaded asynchronously from a JSON file hosted on GitHub.

Jjbruzzo

75% match