Skip to main content
SimilarExport ZIP
100%

Activity 7_Q2

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

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.

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…

Activity 7_Q1

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.

TTarshit Vupperla
88% match
Loading thumbnail…

Activity7_question2

This area chart visualizes the number of Netflix Movies and TV Shows released per year, using two semi-transparent filled paths to compare the growth of each content type over time. The visualization loads a CSV dataset from a GitHub gist, filters entries by type, and aggregates counts per release year using `d3.rollups`. Built with D3 v7, it renders SVG elements with `d3.area` generators, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes axes, labels, and a legend.

Ggroup118sai@gmail.com
87% match
Loading thumbnail…

Activity6_Question 2

This visualization presents a stacked bar chart of movie ratings by genre and percentage. Built with D3 v7, it loads CSV data and uses `d3.stack()` to create the stacked segments, with `d3.scaleOrdinal()` for color coding. A custom tooltip, implemented as a styled HTML div, displays the exact rating percentage on hover. The SVG output is generated via D3’s selection and layout APIs, including `d3.axisBottom` and `d3.axisLeft` for axes.

Kkartheekgrpt@gmail.com
84% match
Loading thumbnail…

Activity6_ques2

This visualization shows the distribution of movie ratings across different genres using a stacked horizontal bar chart. Each bar represents a genre, divided into colored segments that indicate the proportion of films falling into five rating bins, from "below 5.0" to "above 8.5." The chart uses a d3.scaleOrdinal for color encoding and d3.scaleBand for the categorical y-axis, with the data loaded from a CSV file. The code employs d3.csv, d3.select, and various join methods to efficiently render the SVG output.

Kkbhavithareddy06@gmail.com
84% match
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
84% 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
84% match
Loading thumbnail…

Activity6_Q2

This visualization shows the distribution of cinema ratings across six movies, with each bar divided into five rating segments (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, and above 8.5) as percentages that sum to 100%. The stacked bar chart uses d3.stack() to group the horizontal bars, d3.scaleLinear for the percentage axis, and d3.scaleBand for movie categories. Interactive tooltips display exact percentages on mouseover using event handlers, while SVG rectangles with a color scale make each rating segment distinct. The data comes from the provided Cindata.csv file.

Nnikhithadadi@my.unt.edu
83% 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
83% match