Skip to main content
SimilarExport ZIP
100%

Loading Data - Squirrel Census

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

This example demonstrates the process of loading and parsing a CSV dataset from the Squirrel Census, which contains 433 squirrel sightings across 24 New York City parks. The visualization initially displays a loading state before fetching the data file, then renders the parsed data as a pretty-printed JSON object. The code uses d3.csvParse to convert the CSV string into an array of objects, and then converts specific fields like park_id, above_ground, squirrel_latitude, and squirrel_longitude to numeric values using the unary plus operator. The visualization is built with D3.js version 7.6.1, using the select and join methods to manage the DOM structure.

AI-generated description

This data is from The Squirrel Census and reflects data collected about squirrel sightings across 24 parks in New York City on March 4th, 2022. It was ran by 72 volunteers and NYC Open Data. There are 433 sightings counted.

The paper can be read here and is a fun read: https://www.thesquirrelcensus.com/data

Attributes include the following:

  • Area name: categorical nominal (sections of NY)
  • Area ID: nominal qualitative
  • Park name: categorical nominal
  • Park ID: nominal qualitative (numbered to represent a place)
  • Squirrel ID: nominal qualitative
  • Primary fur color: categorical
  • Highlights fur color: categorical
  • Color notes: categorical
  • Location: categorical
  • Above Ground: quantitative
  • Activities: categorical
  • Interactions with humans: categorical
  • Squirrel lat: latitude coordinates (DD.DDDDDD format)
  • Squirrel long: longitude coordinate (-DD.DDDDDD format)
MIT Licensed

Similar vizzes

Loading thumbnail…

Loading CSV Data with D3

This example shows a static SVG composition of colored rectangles and circles on a grid of axes, built with D3.js v3. The code loads park data from a CSV file using `d3.csv`, which converts the rows into an array of JSON objects, then logs the result to the console. The rendering uses raw SVG elements defined directly in the HTML, not generated by D3. The data source is the external `Map_Parks.csv` file, and the visualization itself is a fixed geometric layout rather than a data-driven chart.

11pixelzz
74% match
Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the raw parsed data as a stringified JSON object in a `<pre>` element. The visualization uses a state management pattern with a `setState` function to handle asynchronous data loading, initially showing a "LOADING" placeholder. It fetches `data.csv`, parses it with `d3.csvParse`, and converts numeric columns to numbers before updating the display. The Iris flower dataset is used as the data source, with the rendering approach being a simple text-based output rather than a graphical chart.

IIshaChid76
73% match
Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the Iris dataset as formatted JSON text in a `<pre>` element. The visualization initially shows a "LOADING" state, then fetches `data.csv` via the Fetch API and parses it using `d3.csvParse`. The code explicitly converts string measurements into numbers for all four numeric columns. State management is handled through a simple `setState` pattern, where the `viz` function checks whether data is loaded, triggers the asynchronous fetch, and re-renders once the parsed array of objects is available.

CCurran Kelleher
73% 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
72% match
Loading thumbnail…

loading_data_NH_2_solar_data_data_transformation

This example loads a CSV of daily solar power generation data from Bloomington Parks & Rec and transforms it for analysis. The visualization initially displays the parsed data as JSON text in a `<pre>` element, showing categorical fields like address and department alongside quantitative metrics like watt_hours and latitude. It uses d3.csvParse to load the dataset, then coerces numeric columns with the unary plus operator. A d3.flatRollup operation groups records by address and counts observations, logging an array of `{address, count}` objects to the console. The code demonstrates data loading, type conversion, and aggregation before any visual rendering occurs.

NNavak94
72% match
Loading thumbnail…

Loading and Parsing CSV Data National Park Trails

This example demonstrates loading and parsing a CSV dataset of U.S. National Park Trails, displaying basic file statistics: size in kilobytes, row count, and column count. It uses D3.js v5’s `d3.csv` method to fetch and parse the remote CSV file asynchronously, then formats the result with `d3.csvFormat` and calculates metadata. The code also includes commented alternatives using the Fetch API with `async`/`await` and a nested `fetch` callback approach, illustrating different parsing strategies. The visualization itself is purely text-based, rendered inside a large `<pre>` element.

ZZiyang Gao
72% match
Loading thumbnail…

New York Parks

This visualization displays the first record from a CSV file containing New York State parks data, showing its fields like park name, coordinates, facility type, and photo path. The code loads the data using an import statement, then converts the first data object to a formatted JSON string with `JSON.stringify`. The resulting JSON is rendered inside a scrollable container, with the text size determined by a `fontSize` variable. The visualization serves as a simple data inspection tool, presenting the structure of the dataset in a readable format.

CCurran Kelleher
72% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 5. It fetches a wildlife trade dataset from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in a large text block. The code uses d3.csv to fetch and parse the data, then accesses the resulting array and its columns property. An alternative approach using the Fetch API with async/await and d3.csvParse is also included as commented-out code.

KKarenNg
72% match