Loading MoMA Data

100%

Loading MoMA Data

✓ Published0🌍 Public

Last edited Jan 28, 2023

Created on Jan 18, 2023

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.

AI-generated description

From: https://github.com/MuseumofModernArt/collection

The Museum of Modern Art (MoMA) has an evolving collection containing around 200,000 works from around the world. It includes a wide range of art, including painting, sculpture, printmaking, drawing, photography, architecture, design, film, and media and performance art.

MoMA is committed to helping everyone understand, enjoy, and use our collection. It features 98,361 artworks from 27,140 artists. And this dataset has 140,848 records, representing the MoMA’s collection that is cataloged in its database. It includes attributes such as title, artist, artist bio, date made, medium, dimensions, department, date acquired by the MoMA, 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.

The dataset is placed in the public domain using a CC0 License.

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Carnegie Museum of Art Data

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.

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

75% match

Loading thumbnail…

Tree with MoMA Dataset

A hierarchical tree visualizes the Museum of Modern Art's collection, with the root node labeled "Museum of Modern Art" and branches for departments like Architecture & Design, extending to classifications such as Architecture and Design. The d3.tree layout and d3.hierarchy arrange nodes, while circles are colored by top-level department using d3.schemeCategory10, and hover tooltips display node names. Data is parsed from a CSV using d3.csvParse and aggregated into the tree structure.

EEri Kim

73% match

Loading thumbnail…

Eri Kim - Transforming Data

This visualization presents a histogram of artworks from the MoMA collection, grouping them by medium and sorting the counts in descending order. It processes the CSV data with `flatGroup` and `map` to aggregate records, then displays the resulting summary as a JSON object. The code uses D3 v7 for data parsing and manipulation, and fetches country codes from the RestCountries API.

EEri Kim

71% match

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load a CSV file using D3.js within a Vue application, rendering the data as an SVG visualization. The dataset, Parisian Associations.csv, contains information about associations including their names, postal codes, activity fields, and membership counts. Using D3 v3, the code parses the CSV and binds the data to SVG elements, likely creating a bar chart or scatter plot to explore the distribution of associations across different activity fields, geographic situations, or member counts. The visualization highlights D3's data-joining capabilities and its integration with Vue for dynamic, data-driven web applications.

EEvryjazz

71% match

Loading thumbnail…

Bar Graph with Dropdown Menu of Artists

A dropdown menu of artists filters a bar graph showing the number of MoMA artworks per year for the selected artist. Hovering highlights bars in orange with a tooltip. The visualization loads data from a CSV using D3 v7's `csvParse`, builds the menu with D3 selections, and computes annual counts via `d3.rollup`. Additional buttons open a thumbnail gallery or histogram, though the code for the latter is incomplete.

EEri Kim

70% match

Loading thumbnail…

Loading data with D3

This example demonstrates how to load and inspect a remote CSV dataset using D3. It fetches a tidy version of the Anscombe’s quartet from a GitHub gist and displays three summary metrics in large text: the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to asynchronously parse the data, `d3.csvFormat` to calculate the raw size, and the `data.length` and `data.columns.length` properties to report the dataset’s dimensions.

Rrvdv

69% match

Loading thumbnail…

Loading Coffee Data

This example demonstrates a simple data-loading workflow for an Arabica coffee quality dataset sourced from Kaggle. It fetches a CSV file and parses it with `d3.csvParse`, displaying the resulting array of objects as raw JSON in a `<pre>` element. The visualization tracks loading states—showing `undefined`, `'LOADING'`, or the parsed data—through a state management pattern using `select` and `join`. The code explicitly uses D3 v7’s `select`, `csvParse`, and the `join` method to handle DOM updates.

SSpencer McAvey

69% match