Skip to main content
SimilarExport ZIP
100%

Loading Disney+ Data

✓ Published0🌍 Public
Jjjlaber
Last edited Jan 23, 2023
Created on Jan 23, 2023
Forked from Loading Data

This example demonstrates the process of loading a Disney+ dataset containing information about all TV shows and movies on the platform, displaying the raw parsed data as JSON in a `<pre>` element. The visualization initially shows a "LOADING" state before fetching the CSV from a GitHub gist using the `fetch` API, then parses it with D3's `csvParse` function. The code uses D3 v7's `select` and `join` operations to update the display, and the dataset includes fields such as title, director, cast, country, release year, rating, and duration.

AI-generated description

Loading Disney+ dataset that has information about all TV Shows/Movies currently offered on the platform.

(Dataset from: https://www.kaggle.com/datasets/shivamb/disney-movies-and-tv-shows)

Column Description/Data Types

show_id: unique id that is connected to each tv show/movie (Ordinal)

type: indicates wether media is a movie or tv show (Categorical)

title: name of the movie/show (Categorical)

director: director(s) of the given movie/show (Categorical)

cast: main cast of the movie/show (Categorical)

country: country where media was produced (Categorical)

date_added: date that media was added to Disney+ (Quantitative)

release_year: orginal release year of the movie/show (Quantitative)

rating: rating of the movie/show (PG, PG-13, etc.) (Categorical)

duration: total duration of movie/show (either min or seasons) (Quantitative)

MIT Licensed

Similar vizzes

Loading thumbnail…

Global Land‑Ocean Temperature Index dataset

This example demonstrates the loading and display of an IMDB movies dataset, showing the raw parsed data as JSON in a `<pre>` element. It uses D3 v7's `csvParse` to convert the CSV file into an array of objects, with fields like title, genre, year, rating, and revenue. The visualization implements a simple asynchronous data-loading state machine, transitioning from an initial `undefined` state to a `'LOADING'` string and finally to the parsed dataset. The code uses D3's `select` and the `join` pattern to bind and render the data.

VVinayak Revankar
77% match
Loading thumbnail…

Netflix Movies & TV Shows

This visualization displays the raw contents of the Netflix Movies & TV Shows dataset as a JSON-formatted text dump. It initially shows a loading message before fetching the CSV file and parsing it with D3’s `csvParse` method, then renders the resulting array of records as pretty-printed JSON using D3’s `select` and `join` APIs. The code does not yet produce a graphical chart, only a textual representation of the data’s attributes like title, type, and release year.

Ccsabavath@wpi.edu
76% 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
76% match
Loading thumbnail…

Loading Data - Goodreads Books

This example demonstrates the initial step of a data visualization pipeline: loading a Goodreads dataset from a CSV file. It shows raw JSON-formatted data in a `<pre>` element, with attribute names and values like book titles and ratings clearly visible. The code uses D3 v7's `csvParse` and `select` within a state-management pattern, where `fetch` retrieves the file and `setState` updates the view after parsing. The visualization itself is minimal, displaying the loaded data structure without any graphical encoding.

AAlexis Caira
76% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in D3, displaying the Iris Dataset as a raw JSON string in a `<pre>` element. The visualization initializes with a loading state, fetches the CSV file via `fetch`, and parses it using `d3.csvParse`. After conversion, numeric columns are cast to numbers before being rendered. The code uses `d3.select` and the `.join()` operation to update the displayed data, showcasing a minimal data-loading and state-management pattern with D3 v7.

Bbillmccabeusa@hotmail.com
75% match
Loading thumbnail…

loading data

This example demonstrates how to load and inspect external data using D3 version 6. It fetches a local CSV file containing movie information and logs the server response to the browser console. The code uses the native `fetch` API to request the data, then attaches a promise handler to display the response object, though it does not process or visualize the CSV contents further. The page itself contains only the title "loading data," with no rendered charts or graphical output, focusing solely on the initial data-loading step.

DDiane0325
75% 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
75% match
Loading thumbnail…

Learning how to load and parse the data with d3 today

This example demonstrates how to load and parse a CSV dataset using D3.js, displaying metadata about a collection of movies. It shows the raw data structure, including row and column counts, memory usage, and column names, alongside static SVG posters for three films with their titles and release dates. The visualization uses D3's `d3.csv` method to fetch the remote CSV file from a GitHub gist and then dynamically updates a `<pre>` element with computed statistics about the dataset. The page also incorporates inline SVG graphics and a purple/pink color scheme, with the CSS file defining typography and layout. The code highlights the parsing process without any interactive or animated elements.

NNanditha Reddy
75% match