Pie Chart to show Runtime of top rated movies on IMDB

100%

Pie Chart to show Runtime of top rated movies on IMDB

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 24, 2023

This visualization presents the runtime of the top ten rated movies on IMDB as a pie chart, with each slice colored by runtime and accompanied by a legend listing the movie title and its duration in minutes. The chart is rendered as SVG using D3 v5, with the `pie`, `arc`, and `scaleOrdinal` functions from D3 computing the slice geometry and categorical color scheme. Data is loaded from a CSV file hosted on GitHub, and hover events log the runtime to the console.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Pie chart

This example visualizes the top movies and their ratings using a pie chart, with each slice representing a movie and its size proportional to the rating value. The chart renders as an SVG, using D3.js v5's `pie` and `arc` generators to create the segments and a color scale for differentiation. Ratings are loaded from a CSV file via `d3.csv`, and a legend on the right displays each movie's name alongside its corresponding rating value, formatted with `d3.format`.

AAISWARYAMARAPATLA1999

80% match

Loading thumbnail…

Pie Chart

This pie chart visualizes IMDB ratings for Marvel and DC movies, comparing titles like The Avengers, Infinity War, and The Dark Knight. The chart uses d3.pie to compute arc angles from the data values and d3.arc to generate SVG path segments, with d3.scaleOrdinal assigning categorical colors. Each slice responds to mouseover and click events, displaying a tooltip with the movie name and rating via d3.event positioning. Data loads from a comma-separated CSV file pulled from a GitHub gist, with the visualization rendering entirely as SVG within a fixed-size viewport.

Hhappymail6

77% match

Loading thumbnail…

Fork of Pie Chart

This visualization shows the top 10 countries by total Netflix movies and shows, displayed as a pie chart with a color-coded legend listing each country and its corresponding library size. The data is loaded from a CSV file via d3.csv, sorted descending, and sliced to the top 10 entries. The pie layout is computed with `d3.pie`, arcs are drawn using `d3.arc`, and categorical colors come from `d3.scaleOrdinal` with `schemeCategory10`. SVG elements are appended and styled with external CSS, and the legend includes both country names and numeric values.

Yyaswanthsen

77% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the top ten countries by total Netflix library size, using a categorical color scheme. It is rendered as an SVG with D3 v5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and a custom legend. The data is loaded from a CSV file and sorted to display the largest values. Hovering over a slice logs the library size to the console.

AAditya Pujari

76% match

Loading thumbnail…

Fork of Nikita's Pie Chart

A pie chart visualizes movie review ratings from a CSV dataset loaded via a Gist URL, with each slice colored and labeled by movie title alongside a legend showing its numeric rating. Built with D3 v5, the code uses `d3.csv` to fetch data, `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` for color assignment. The SVG renders centered slices and a legend with rectangles and text, formatted using `d3.format`.

Rradhadevarapu

76% match

Loading thumbnail…

Fork of Pooja's Pie Chart

This fork of a pie chart visualizes movie ratings for recent Indian films. The visualization uses a D3.js v5 pie layout with a categorical color scale to differentiate movie titles. A legend displays each movie name alongside its corresponding rating value in points. Data is loaded from a remote CSV file via the `d3.csv` method, and the chart is rendered as an SVG with `d3.arc` for the pie segments and `d3.scaleOrdinal` for color assignment.

PPoojaThandra

75% match

Loading thumbnail…

Pie Chart

A pie chart visualizes the distribution of documentary film titles by their associated values and percentages, with an accompanying legend displaying each label, numeric value, and percentage. The chart uses D3 v5’s `pie()` generator with a null sort to compute arc segments, which are rendered as SVG paths via the `arc()` function. A color scale (`scaleOrdinal`) maps values to a custom palette. The legend is built manually with rectangles and text elements, formatted using `format('.4~g')` for the values. The data is loaded asynchronously from a local JSON file using `json()`.

Ssalimjivani

75% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of seven documentary films by their associated values, presented with a legend on the right. The chart uses D3.js v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `format` to compute the arc segments and render them as SVG paths. The data is loaded from `data.json` and sorted in its original order. Each legend entry displays the film label, its raw value, and percentage, with colors mapped via a categorical color scale.

Ssalimjivani

75% match