Skip to main content
SimilarExport ZIP
100%

Basic Scatter Plot with React & D3

✓ Published1🌍 Public
AAlexis Caira
Last edited Sep 10, 2025
Created on Sep 9, 2025

A scatter plot maps temperature midpoint against moon phase for Bigfoot sighting reports, with each point colored by the reported season. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as WebGL elements. The dataset contains 1,000 sightings from the BFRO database, covering locations across the US from the 1970s to recent years.

AI-generated description

This data can be found here: https://data.world/timothyrenner/bfro-sightings-data and pulls from Bigfoot Field Researchers Organization (BFRO) data set. There are 5000+ rows, but I cut it down for this viz to the first 1000. It references sightings across the US in a wide range of time from 1970's to the last couple years.

This viz includes mapping the temperature_mid to the moon_phase and also color coding the points by season (summer, spring, fall, winter, unknown)

Attributes include the following:

  • Observed date and time
  • Location details
  • County
  • State
  • Season
  • Title
  • Latitude
  • Longitude
  • Classification
  • Geohash
  • Temperature_high
  • Temperature_mid
  • Temperature_low
  • Dew point
  • Humidity
  • Cloud_cover
  • Moon_phase
  • Precip_intensity
  • Precip_probability
  • Precip_type
  • Pressure
  • Summary
  • uv_index
  • Visibility
  • Wind_bearing
  • Wind_speed
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot Iteration

A scatter plot visualizes 1,000 Bigfoot sighting records from the BFRO dataset, plotting mid-range temperature against UV index with points color-coded by season. The chart uses React state to load and format CSV data, then passes it to a D3.js rendering function that employs `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles for marks. The visualization applies a Comic Sans font and includes labeled axes and a title.

AAlexis Caira
88% 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
80% 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…

Fork of Scatter Plot

This interactive scatter plot visualizes temperature readings over time using React and D3 v7. The visualization employs scaleTime and scaleLinear to map timestamps and temperature values to SVG coordinates, while custom AxisBottom and AxisLeft components render the time-formatted x-axis and numeric y-axis. The data is loaded asynchronously from a CSV file containing weekly San Francisco temperature measurements using D3's csv utility. Each data point is rendered as a circle mark with a tooltip displaying the day of the week.

Nnkarinti
77% match
Loading thumbnail…

Scatter Plot

This example plots temperature readings from a CSV file over time, showing the daily temperature cycle in San Francisco. The visualization uses D3 v5 with React, rendering an SVG scatter plot where each circle represents an hourly observation. The code employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperatures to coordinates, with `axisBottom` and `axisLeft` for labeled axes. The data is loaded via `d3.csv`, and circles are appended to the SVG with a fixed radius and red fill at reduced opacity.

Ggregosaure
76% match
Loading thumbnail…

Loading Data - Bigfoot Sighting Locations

This visualization demonstrates the asynchronous loading and parsing of a Bigfoot sighting dataset using D3.js within a React application. It initially displays a "LOADING" state before fetching data from a CSV file via the `fetch` API, then parses it with `d3.csvParse`. Numeric attributes are converted to correct types before rendering the raw JSON data into the view, highlighting the critical data preparation step for web-based visualizations. The code uses D3.js selection and join operations to update the display efficiently.

AAlexis Caira
76% match
Loading thumbnail…

Scatter Plot with Time Series

A scatter plot displays temperature readings against timestamps from a San Francisco weekly weather dataset, using circular marks positioned by time and linear temperature scales. Built with React and D3 v6, the visualization renders as SVG with reusable axis components and tooltips showing formatted day labels. Data loads via CSV from a remote gist, with `scaleTime` and `scaleLinear` handling the mapping, while `d3.timeFormat` formats tick labels.

AAndres de la Garza
76% match