Skip to main content
SimilarExport ZIP
100%

Activity 7_Q1

✓ Published0🌍 Public
TTarshit Vupperla
Last edited Nov 7, 2024
Created on Nov 7, 2024

This example visualizes the distribution of content ratings among Netflix titles, displaying a pie chart of rating categories with percentage labels and a color-coded legend. The chart is rendered as an SVG using D3 v6, loaded from UNPKG, with data fetched from a remote CSV via `d3.csv`. The code uses `d3.rollups` to count titles per rating, `d3.pie` and `d3.arc` to generate slices, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, while local ES6 modules are also demonstrated.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity7_Question1

This example visualizes the distribution of Netflix titles by type, showing the count and percentage of movies versus TV shows in a pie chart. The chart renders as an SVG with colored slices, percentage labels positioned at each arc’s centroid, and a legend beside the chart. Using D3 v6, the code loads data from a CSV file via `d3.csv`, aggregates counts with `d3.rollups`, and generates arcs with `d3.pie` and `d3.arc`. Color is assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Ggroup118sai@gmail.com
89% match
Loading thumbnail…

Activity 7.1 Q1

This pie chart displays the distribution of Netflix content types, showing the proportional share of each category in the dataset. The visualization is rendered using D3 v6 with SVG elements, employing d3.pie and d3.arc to generate the slices and d3.scaleOrdinal with schemeSet2 for color encoding. Labels are positioned at arc centroids, and a legend with counts is included. The data is loaded via d3.csv from a remote GitHub-hosted CSV file, with counts aggregated using d3.group.

Nnissisharon61@gmail.com
88% match
Loading thumbnail…

Activity 7_Q2

This visualization displays a stacked area chart of Netflix movies and TV shows, showing the distribution of content ratings across release years. The chart uses d3.area to create overlapping filled regions for each rating category, with each layer colored via d3.scaleOrdinal and d3.schemeCategory10. The code groups the CSV data from a GitHub repository using d3.rollups to count titles by year and rating, then renders SVG paths with axes generated by d3.axisBottom and d3.axisLeft. A legend maps colors to ratings, and the chart includes proper margins, labels, and tick formatting for readability.

TTarshit Vupperla
88% match
Loading thumbnail…

q1_activity7

This visualization presents a pie chart showing the distribution of Netflix content by type, differentiating between Movies and TV Shows. It loads the Netflix titles CSV dataset from a GitHub repository and uses D3.js v7 to aggregate the data with `d3.rollups` and render the chart with `d3.pie` and `d3.arc` into an SVG. The implementation also uses `d3.scaleOrdinal` for color encoding and creates a custom HTML legend alongside the chart. The display includes count labels on each slice and explanatory axis labels below.

Bbadiniswetha@gmail.com
86% match
Loading thumbnail…

Activity 7

This example visualizes the distribution of movies rated above 8.5 by genre as a pie chart, with a custom legend using distinct D3 symbols (circles, squares, triangles, diamonds, and crosses) for each genre. It loads CSV data asynchronously via `d3.csv`, converts the relevant column to numbers, and renders the chart as SVG using `d3.pie` and `d3.arc`. The visualization uses a color scale with `d3.schemeCategory10` and includes axis labels and a title, though no axes are drawn.

AAamani Chamarthi
85% match
Loading thumbnail…

Activity 7_Q1

This interactive pie chart displays the distribution of movie ratings (G, PG, PG-13, R) across different genres. A dropdown menu allows viewers to toggle between individual rating classes or their total, with each genre represented as a colored slice whose angle encodes the count. The visualization uses D3 v7 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG, while `d3.csv` fetches data from a remote gist. Hovering over a slice reveals a tooltip with the genre and exact value.

KKrishna.
84% match
Loading thumbnail…

Activity-7Q1

This example shows five small pie charts displaying genre distributions across five rating ranges, from "below 5.0" to "above 8.5". The dataset is loaded via `d3.csv` from a GitHub raw link, with each chart labeled by rating range. The code uses `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and SVG text for slice labels. Each chart includes a legend below it and is rendered as an inline-block div within a flex container.

Jjahnavigummadi@my.unt.edu
84% match
Loading thumbnail…

Activity7-Q1

This interactive pie chart visualizes total movie ratings by genre, with a legend and tooltip for detailed values. The code uses D3.js v7, loading CSV data and aggregating it with `d3.rollup` and `d3.sum`, then generating arcs via `d3.pie` and `d3.arc`. A tooltip appears on mouseover, and the SVG is styled with CSS, featuring a color scale using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart is centered with extra space allocated for the legend, and the title explicitly states "Total Ratings by Genre."

119n81a0581sunny@gmail.com
83% match