Skip to main content
SimilarExport ZIP
100%

Activity6_task2

✓ Published1🌍 Public
Ssivachandraramanaidu.vnof52@gmail.com
Last edited Apr 5, 2025
Created on Apr 5, 2025
Forked from Hello VizHub

This example shows a stacked bar chart comparing ratings for five genres across four streaming platforms (Netflix, Hulu, Disney+, Prime Video) as percentages of total ratings. The code uses D3 v7’s `d3.stack` to compute stacked segments, `d3.scaleLinear` for the horizontal percentage axis, `d3.scaleBand` for genre categories, and `d3.scaleOrdinal` with `d3.schemeCategory10` for platform colors. Data is loaded from a CSV file, rendered as SVG rectangles, and includes interactive tooltips via SVG `title` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_task2

This example shows a stacked bar chart comparing ratings for five genres across four streaming platforms (Netflix, Hulu, Disney+, Prime Video) as percentages of total ratings. The code uses D3 v7’s `d3.stack` to compute stacked segments, `d3.scaleLinear` for the horizontal percentage axis, `d3.scaleBand` for genre categories, and `d3.scaleOrdinal` with `d3.schemeCategory10` for platform colors. Data is loaded from a CSV file, rendered as SVG rectangles, and includes interactive tooltips via SVG `title` elements.

Ssivachandraramanaidu.vnof52@gmail.com
100% match
Loading thumbnail…

act6_Task2

This example presents a stacked horizontal bar chart comparing the distribution of movie ratings across six streaming platforms: Netflix, Hulu, Amazon Prime, Disney+, HBO Max, and Apple TV. The ratings are divided into five percentage-based categories, from below 5.0 to above 8.5. Built with D3.js v7, the visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal()` for the color scheme. The SVG rendering includes interactive tooltips that display the exact percentage for each rating category when hovering over a segment, with D3’s `axisBottom` and `axisLeft` for the percentage and platform axes.

Ssaisathvikapotluri@gmail.com
90% match
Loading thumbnail…

Activity6_Task2

This example uses a stacked horizontal bar chart to compare the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range from below 5.0 to above 8.5. The visualization, rendered as SVG, loads data from a local CSV file and uses D3 v7’s `d3.stack()` to create stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisLeft()` and `d3.axisBottom()` for axes. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination.

Hhaneesh@gctc.in
89% match
Loading thumbnail…

Activity6_Task2

This example shows a stacked horizontal bar chart of movie ratings across six genres, using the D3.js library (v7) to portray the percentage distribution of ratings from low to high for each genre. The data, sourced from a CSV file, is rendered as SVG. The code defines ordinal color scales for the rating categories, uses linear and band scales for positioning, and adds interactive tooltips on mouseover that display the exact percentage. D3 APIs like `d3.scaleOrdinal`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` are used for layout and formatting.

KKhushi Desai
89% match
Loading thumbnail…

activity_6_task2

This example presents a stacked horizontal bar chart showing the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of movies falling into one of five rating brackets. The chart uses D3 v7’s `scaleLinear`, `scaleBand`, `scaleOrdinal`, and `stack` API to compute and render the stacked bars from CSV data. Interactive tooltips, implemented with D3 selections and event handlers, display the exact percentage for each genre-rating combination on mouseover. The visualization is rendered as SVG within a 960×500 canvas, with axes labeled and styled via external CSS.

11810vineeth@gmail.com
89% match
Loading thumbnail…

Activity6_TASK-2

A stacked bar chart visualizes the distribution of five rating categories across six movie genres, with each bar segment showing the percentage of ratings within that genre. Hovering over a segment displays a tooltip with the exact percentage value. The chart uses d3.stack() to aggregate data from a CSV file, d3.scaleBand() for the categorical genre axis, and d3.scaleLinear() for the percentage scale. Colors are assigned via d3.scaleOrdinal(), and SVG rendering displays the horizontal bars with axis labels.

Vvinilavoddi@my.unt.edu
89% match
Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six genres, using percentage categories ranging from "below 5.0" to "above 8.5." The chart renders as SVG elements via D3 v7, with each genre represented as a horizontal bar segmented into five colored rating bands. The visualization employs `d3.stack()` to compute stacked series, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis percentages. Interactive tooltips appear on mouseover, displaying the exact percentage for any rating segment using `d3.format('.2f')`. The data comes from a local CSV file loaded with `d3.csv`.

Ssathvik0311@gmail.com
89% match
Loading thumbnail…

Activity6_Task2 (tutorial)

This example uses a stacked bar chart to show the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range (below 5.0 to above 8.5) as a percentage. The chart loads data from a local CSV file and renders it as SVG using D3 v7, employing `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal` for color coding, and `d3.scaleBand` for the categorical y-axis. Interactive tooltips appear on hover, displaying the exact percentage for each genre-rating combination, while axis labels and a title provide context.

Gguruabhay294@gmail.com
89% match