Skip to main content
SimilarExport ZIP
100%

Loading Data - Bigfoot Sighting Locations

✓ Published0🌍 Public
AAlexis Caira
Last edited Sep 4, 2025
Created on Sep 4, 2025
Forked from Loading Data

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.

AI-generated description

This data is from the Kaggle set Bigfoot Sightings and can be found here: https://www.kaggle.com/datasets/thedevastator/unlocking-mysteries-of-bigfoot-through-sightings?select=bfro_locations.csv and pulls from Bigfoot Field Researchers Organization (BFRO) data set. There was 5000+ rows, but I cut it down for this viz to 2000

Attributes include the following:

  • observed: temporal - ISO Date time
  • Location Details: categorical nominal
  • county - categorical
  • State - categorical
  • Season - categorical
  • Title - categorical nominal
  • Latitude: longitude coordinate
  • Longitude: longitude coordinates
  • number: nominal (report number)
  • classification: categorical
  • geohash: ordinal geospatial data
  • temperature_high: quantitative interval
  • temperature_mid: quantitative interval
  • temperature_low: quantitative interval
  • dew point: quantitative interval
  • humidity: quantitative interval
  • cloud_cover: quantitative interval
  • moon_phase: quantitative ordinal
  • precip_intensity: discrete ordinal
  • precip_probability: continuous quantitative
  • precip_type: categorical
  • pressure: quantitative
  • summary: categorical nominal
  • uv_index: ordinal quantitative
  • visibility: continuous quantitative
  • wind_bearing: continuous quantitative
  • wind_speed: continuous quantitative
MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3 utilities. It fetches the CSS named colors dataset from a GitHub gist and displays a summary of the data, including its size in kilobytes, row count, and column count. The React state management tracks the loaded data, initially showing a "Loading..." message until the asynchronous fetch completes. The visualization uses React 16.9, D3 7.0.1, and renders the summary text as HTML.

Mmattbwebster
80% match
Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading a CSV dataset from a remote URL inside a React component, displaying the data’s file size, row count, and column count as text. Using React hooks (`useState` and `useEffect`), it fetches the data with `d3.csv`, then formats the output with `d3.csvFormat`. The visualization renders as SVG, with the loaded information shown in a large `pre` element, while a loading message appears until the data arrives. It highlights the integration of D3’s data-loading and formatting utilities within a React lifecycle.

BbeauMarko
80% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset from a remote URL using React and D3. It shows the data’s file size, row count, and column count in a large text display, initially showing “Loading…” until the data arrives. The React component uses `useState` and `useEffect` to asynchronously fetch the data via D3’s `csv` utility, then passes it to a custom `message` function that formats the statistics for rendering as SVG text within a `<pre>` element.

BBrittany Harden
79% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates asynchronous data loading in a React component using D3’s `csv` function to fetch a named-color dataset from a GitHub gist. The app renders a text summary displaying the data size in kilobytes, row count, and column count once the CSV arrives, with a loading message before completion. It uses React hooks (`useState`) to manage state and invokes `d3.csv` within the component. The visualization is minimal, showing only a `<pre>` element with dynamic text, originally intended to accompany a "following circle" SVG sketch visible in the HTML comments.

Yyungchiau
79% match
Loading thumbnail…

Loading Data w/ React and D3

This example demonstrates how to load external CSV data with D3 and manage it through React state. The app uses `d3.csv` to fetch a dataset from a GitHub gist, storing the parsed result via React's `useState` and `useEffect` hooks. While the data loads, the screen displays “loading”; once available, a custom `message` function reports the dataset’s size in kilobytes, row count, and column count as large SVG text. The visualization is minimal, focusing on the integration of D3's data-loading utilities with React's component lifecycle.

RRaphael Fogha
79% match
Loading thumbnail…

Loading Data with React D3

This example demonstrates how to load and display a CSV dataset within a React component using D3. It reads a file containing CSS color specifications, including keyword, hex value, and a numeric field, and shows the column names once the data is loaded. The visualization is rendered as SVG, with the React app managing the asynchronous state. The code uses React hooks like `useState` and the D3 `csv` function to fetch and parse the data, displaying a loading message until the dataset is ready.

SSabyasachi Goswami
79% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3 utilities, displaying a text summary of the data’s size and structure. It shows how React state manages the asynchronous data-fetching lifecycle, with a loading message shown until the data arrives. The code uses `d3.csv` to fetch the CSS named colors dataset from a GitHub gist, then formats the result with `d3.csvFormat` to compute kilobyte size, row count, and column count. React's `useState` and `useEffect` hooks trigger the fetch and store the parsed data, while the final output renders as SVG text via a `<pre>` element.

BBruno Simoes
79% match
Loading thumbnail…

Loading data with react and d3

This example shows a stylized face built from SVG shapes, with a loading message that reports the size, column count, and row count of a remote CSV dataset. The face includes gradient-filled eyes, an arc-based mouth, and a specular lighting filter, all rendered through React components. Data is fetched asynchronously using `d3.csv` inside a `useEffect` hook, and the loading summary is computed with `d3.csvFormat` and displayed in a `<pre>` element. The visualization demonstrates integrating D3’s data-loading and formatting utilities with React state and SVG rendering.

JJonas Carvalho
79% match