Loading Carnegie Museum of Art Data

100%

Loading Carnegie Museum of Art Data

✓ Published0🌍 Public

Last edited Jan 20, 2023

Created on Jan 20, 2023

This example demonstrates the process of loading and parsing a CSV dataset from the Carnegie Museum of Art, which contains metadata for artworks including titles, creation dates, and dimensions. The visualization initially displays a placeholder showing "LOADING" as a `<pre>` element, then asynchronously fetches the data using the `fetch` API. After the dataset is retrieved, the code uses D3's `csvParse` function to convert the CSV string into an array of objects, converting date fields into JavaScript `Date` objects and numeric fields into numbers. The resulting parsed data is then displayed as JSON in the `<pre>` element.

AI-generated description

From: https://www.kaggle.com/datasets/mfrancis23/carnegie-museum-of-art

Carnegie Museum of Art made its collections records of accessioned artworks public. It contains data on around 28269 objects across all departments such as fine arts, decorative arts, photography, contemporary art, and the Heinz Architectural Center.

Each record has attributes including title, artwork creation date, date acquired by the museum, the physical location of artworks, size, some information about the artist, etc.

Since the dataset contained a lot of artworks/records, the file size exceeded the limit mentioned in the assignment. Therefore, the dataset was processed down to hold less than 10,000 rows of data.

This dataset is being offered under CC0 1.0 Universal license.

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading MoMA Data

This example demonstrates the initial step of loading and parsing the Museum of Modern Art’s collection dataset using d3.csvParse within a Vue-based application. It fetches the CSV file and converts raw text into an array of objects, transforming numeric fields like dimensions and dates (negating BeginDate and EndDate to represent years) and converting zero values to null. The parsed data is then displayed as raw JSON in a pre element using D3’s selection and join methods.

EEri Kim

84% match

Loading thumbnail…

Loading the Tate Collection Data

This example demonstrates the process of loading and parsing the Tate Collection dataset, displaying the raw JSON representation of the parsed records in a `<pre>` element. The visualization initially shows a loading state before fetching the CSV file, which is then parsed using `d3.csvParse`. Numeric fields like width, height, depth, and acquisition year are converted to appropriate types, and the resulting array of artwork objects is rendered as formatted JSON text, highlighting the data structure and attributes such as artist, title, medium, and dimensions.

EEri Kim

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

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

79% match

Loading thumbnail…

Loading Data

This example demonstrates how to load and inspect a CSV dataset in a web page. It fetches a remote CSV file containing CSS named colors using `d3.csv` with a URL, then displays the file size in kilobytes, the number of rows, and the number of columns in a `<pre>` element. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse` to show different parsing approaches. The visualization is minimal, presenting only textual metadata about the data rather than a graphical chart.

JJosephStalnaker

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7, displaying the parsed dataset’s size, row count, and column count as large text. The code calls `d3.csv` to fetch the named colors dataset from a GitHub gist, then uses `d3.csvFormat` to calculate the data’s size in kilobytes. The results are injected into a `<pre>` element via plain JavaScript DOM manipulation, with minimal CSS styling for readability. The visualization focuses on data ingestion and summary rather than graphical rendering.

CCees Kaandorp

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file in the browser. It first fetches a remote CSV containing CSS named colors, then uses `d3.csvParse` to convert the raw text into a structured array of objects. The visualization displays summary statistics about the parsed data—file size in kilobytes, number of rows, and number of columns—in a large `<pre>` element. The code relies on the native `fetch` API within an async function, and renders results as plain text without any charts or graphical elements.

Jjim25522532

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3’s `d3.csv` method, displaying basic metadata about the dataset. The visualization outputs three statistics—the file size in kilobytes, the number of rows, and the number of columns—into a large HTML `<pre>` element. The data comes from a GitHub Gist containing CSS named colors. The code also includes commented-out alternatives using the `fetch` API, `async`/`await`, and `d3.csvParse` to show multiple parsing approaches within the D3 v5 and React framework context.

Nnkohdatavis

78% match