Loading Data - Haunted Places in US

100%

Loading Data - Haunted Places in US

✓ Published0🌍 Public

Last edited Sep 4, 2025

Created on Sep 4, 2025

This example demonstrates how to load and parse a CSV dataset of haunted places in the US, displaying the raw data as JSON in a pre element. The visualization uses D3 v7's `csvParse` to parse the data, converting longitude and latitude strings to numbers. It fetches the `data.csv` file from the Shadowlands Haunted Places Index, initially showing "LOADING" until the fetch completes. The React-based app uses D3's `select` API to bind the container and update the display with `text(JSON.stringify(...))`.

AI-generated description

This data set comes from Data.World and scrapes from the Shadowlands Haunted Places Index for the US and cleans and geocodes the location.

https://data.world/timothyrenner/haunted-places/workspace/project-summary?agentid=timothyrenner&datasetid=haunted-places

Attributes include the following:

City: categorical
Country: categorical
Description: categorical nominal
Location: categorical
State: categorical
State_abbrev: categorical
Longitude: longitude coordinates
Latitude: longitude coordinates
City_longitude: longitude coordinates
City_latitude: longitude coordinates

MIT Licensed

Similar vizzes

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

78% match

Loading thumbnail…

Loading Data with React & D3 (information csv data permis US)

This example demonstrates loading a real-world US permanent visa dataset using D3’s `csv` utility within a React application. The visualization presents a plain-text summary of the raw CSV data, displaying its size in kilobytes, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading and re-render the page once the data arrives. The dataset is fetched from a remote Gist URL, and the summary is generated using `d3.csvFormat` to measure the data size before calculating the descriptive statistics.

Ddassermouna

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

75% match

Loading thumbnail…

Loading Data with react and D3

This example demonstrates how to load and display CSV data within a React application using D3. It shows a text summary of the dataset, including its size in kilobytes, row count, and column count, while the data is fetched asynchronously from a remote GitHub URL. The code uses React hooks like `useState` and `useEffect` along with D3’s `csv` function to parse the data, and renders the result as SVG text within a `<pre>` element.

Ccaptind

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

74% match

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and inspect a CSV dataset within a React application, displaying basic file statistics such as size in kilobytes, row count, and column count. The visualization uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, while D3’s `csv` function fetches the external data and `d3.csvFormat` measures its size. The result is rendered as plain text in a `<pre>` element, with a loading message shown until the data arrives. The data source is a GitHub gist URL.

SSam Hege

74% match

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display CSV data within a React application using D3 utilities. The app fetches a dataset of CSS named colors from a GitHub gist via the `d3.csv` method, storing the result in React state with the `useState` and `useEffect` hooks. Once loaded, a summary message is rendered as large SVG text, showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. While data is loading, the display simply shows the text “loading,” providing a clear visual state transition.

MMichael Bergerson

74% match

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load external CSV data within a React application using D3 utilities, showing the data as raw text in the browser. The code uses React’s `useState` hook to store the fetched dataset and `useCallback` for memoization, while D3’s `csv` and `csvParse` functions handle parsing the remote CSV file, which contains named CSS colors. The app renders a simple message displaying the parsed data object instead of a chart, highlighting the initial data-loading pattern rather than visualization.

Jjamesc4

74% match