ACNH Fish Data

100%

ACNH Fish Data

✓ Published0🌍 Public

Last edited Jan 24, 2023

Created on Jan 24, 2023

The visualization displays raw data from the Animal Crossing: New Horizons fish dataset, presented as a JSON object. It loads a CSV file from a GitHub gist and converts it to a structured array using `csvParse`. The page uses D3 v7 to manage state and re-render the data as a formatted text block via `select`, `join`, and `.text`.

AI-generated description

Data on all the fish from Animal Crossing New Horizons! https://www.kaggle.com/datasets/jessicali9530/animal-crossing-new-horizons-nookplaza-dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization

This example displays a CSV dataset’s metadata summary, including file size in kilobytes, row count, and column count, presented in a styled header and preformatted text block. It loads D3 v7 via CDN and uses `d3.csv` to fetch remote data from a GitHub gist, then formats the output with `d3.csvFormat` and `Math.round`. The page also embeds an external SVG image of a house, with layout controlled through custom CSS classes. The visualization demonstrates basic data loading, parsing, and textual output without any graphical charting.

AAsherpranayp

65% match

Loading thumbnail…

Loading and Parsing CSV Data exercise - Dataviz 2020 course 13 & 15

This example demonstrates how to load and parse a CSV file using D3 v5 and the Fetch API, displaying the dataset’s basic metrics—row count, column count, and file size—in a large text block. It fetches the raw CSV from a GitHub Gist, parses it with `d3.csvParse`, and writes the results to the page. The code includes alternative commented approaches using `d3.csv` and async/await, highlighting the parsing logic. The data originates from a manually cleaned Wikipedia table on fish as food, covering edible fish categories by texture and flavor.

WWhitney Hung

65% match

Loading thumbnail…

Activity6_Q3

This scatter plot visualizes a fish dataset by plotting each specimen’s weight on the x-axis and height on the y-axis, with colored circles distinguishing species (Bream, Roach, Whitefish, Parkki, Perch) via a custom color lookup. The visualization loads CSV data from a GitHub repository, parses numeric fields, and uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create axes and map data coordinates. Markers are drawn as SVG circles using a dataset join, while axis labels are manually positioned and rotated. The chart fills the browser window by setting its dimensions to `window.innerWidth` and `window.innerHeight`.

Ppadiginetivishnupriya@gmail.com

65% match

Loading thumbnail…

ImportingData

This example demonstrates how to load an external CSV dataset into a web page for inspection. It fetches animal bite records from a GitHub-hosted CSV file using D3’s `d3.csv` method, which returns a promise. Once the data resolves, the code logs the parsed array of objects to the browser’s console, showing the raw structure of the dataset without any visual rendering. The page relies on D3 v7 and plain JavaScript within an HTML file, with no additional frameworks or chart components involved.

ZZach2826

65% match

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file, showing the row count, column count, and file size in kilobytes, followed by the first 10 rows as formatted JSON. The visualization uses D3 v5’s `select` and `csv` APIs to load and parse the data, then writes the output into `pre` elements on a black background with green monospace text. The data, sourced from a file about Mario game sales, is processed entirely in the browser without additional rendering libraries.

CChooo4u

65% match

Loading thumbnail…

world-happiness-data

This example loads the Iris dataset from a CSV file and displays it as raw JSON text in a `<pre>` element. The visualization uses d3.csvParse to convert the CSV string into an array of objects, then coerces numeric columns to numbers. It demonstrates a state management pattern with d3-selection’s select and join methods, where data is asynchronously fetched and rendered after a loading state. The code shows only text output, not a graphical chart.

Ccsabavath@wpi.edu

64% match

Loading thumbnail…

loading_data_NH_2

This example demonstrates asynchronous data loading with D3 v7, displaying the contents of a CSV file as formatted JSON text in a pre element. It uses `fetch()` to retrieve `data.csv`, `csvParse` from D3 to convert the raw CSV string into an array of objects, and then iterates through the parsed data to coerce the numeric columns (`sepal_length`, `sepal_width`, `petal_length`, `petal_width`) from strings to numbers. The visualization implements a unidirectional data flow where a `setState` function updates the application state, triggering a re-render that initially shows "LOADING" before the fetched data appears.

NNavak94

64% match

Loading thumbnail…

Data Visualization

This example displays a simple dashboard that presents a hello message from the author and summarizes a dataset loaded from a GitHub gist. The text announces the file’s approximate size in kilobytes, the number of rows, and the column count. The visualization uses D3.js version 7, specifically the `d3.csv` and `d3.csvFormat` APIs, to fetch and parse the CSV data and then inject the computed summary into an HTML `<pre>` element. The page also embeds an external SVG image and relies on basic CSS for styling.

Hharika-1929

64% match