Loading the Tate Collection Data

100%

Loading the Tate Collection Data

✓ Published0🌍 Public

Last edited Jan 20, 2023

Created on Jan 20, 2023

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.

AI-generated description

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

This dataset provides a snapshot of the Tate collection. It has around 70,000 artworks that Tate owns or jointly owns with the National Galleries of Scotland. It is released under the Creative Commons Public Domain CC0 license. 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.

Attributes in this dataset include the artist, title, the medium used, year, acquisition year, dimensions, inscription, URL to the thumbnail image, etc.

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

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

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

76% match

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

75% match

Loading thumbnail…

Loading CSV

This example demonstrates loading a CSV dataset by fetching the Iris Dataset from a remote URL and displaying its raw JSON structure in the browser. The code uses d3.json to retrieve the data, then chains a promise to append a `<pre>` element to the body, formatting the response with JSON.stringify and indentation. The visualization itself is minimal, focusing solely on the data-loading workflow rather than rendering charts or graphs. It relies on D3 v5’s `json` method and standard DOM selection via `select`, making the asynchronous data-fetching pattern explicit.

Vvaynexie

74% match

Loading thumbnail…

D3 data loading

This example demonstrates asynchronous data loading in D3 by fetching a CSV file of iris flower measurements (`data.csv`) and displaying the parsed content as a JSON string inside a `<pre>` element. While the request is pending, the text shows “LOADING” before replacing it with the data. Using `d3.csvParse` alongside the `fetch` API, the code converts text into an array of objects, then coerces numeric fields such as `sepal_length` and `petal_width` into numbers with the unary plus operator. The visualization relies on D3 v7 selections with `.join()` to update the DOM, while `index.js` manages a simple state pattern.

SSubhendu Karmakar

74% match

Loading thumbnail…

Loading CSV

This example demonstrates how to load and display a CSV dataset using D3. It fetches the Iris Dataset from a remote URL and renders the parsed data as a JSON-formatted text block within the page. The code uses `d3.csv()` to asynchronously retrieve and parse the CSV file, then chains `.then()` to append a `<pre>` element to the body via `d3.select()`. The resulting output shows the structured data, making the loading and parsing process visible.

Bbio_sun

73% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of named colors using D3 v5. It fetches the remote CSV via `d3.csv`, then displays the file size in kilobytes, row count, and column count as large text in a `<pre>` element. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The visualization focuses on data ingestion metrics rather than graphical representation, highlighting basic D3 data-handling workflows.

TTOKIHISA

73% match