Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published0🌍 Public
KKhushi Desai
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Hello VizHub

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.

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…

Activity6_Task2

This stacked bar chart shows the percentage distribution of movie ratings across six genres, revealing how genres like Documentary and Action differ in their rating profiles. Each bar segment represents a rating category from below 5.0 to above 8.5, with hover interactions displaying exact percentages via a tooltip. Built with d3.v7, the visualization uses d3.stack for data transformation, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. Data originates from a CSV file containing genre-specific rating proportions. SVG rendering handles the visualization, with axes generated through d3.axisBottom and d3.axisLeft.

KKhushi Desai
95% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the proportion of films falling into five rating brackets. The visualization uses D3.js v7’s `d3.stack` and `d3.scaleOrdinal` to construct the bars, with `d3.scaleLinear` for the percentage axis and `d3.scaleBand` for the genre categories. Hovering over a segment triggers a custom tooltip via `d3.select` and event handlers, displaying the precise percentage for that rating bracket. Data comes from a CSV file and is rendered as SVG within the browser.

PPothuguntla Pranitha
95% match
Loading thumbnail…

Activity 6 Task 2

This stacked bar chart displays the distribution of movie ratings across six genres, breaking down each genre’s percentage into five rating categories from “below 5.0” to “above 8.5.” Using D3 v7 and SVG rendering, the code applies `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to construct the bars, while `d3.axisBottom` and `d3.axisLeft` handle axes. Interactive hover effects via tooltips show exact percentages with `d3.format`, and a legend clarifies color mapping for each rating category.

RRukmini Devi Y
94% match
Loading thumbnail…

Activity6_Task2

This example displays a stacked horizontal bar chart showing IMDb movie rating distributions across six genres, with proportions for rating brackets below 5.0 through above 8.5. The visualization uses D3 v7’s `d3.stack()` and `scaleOrdinal` to create the layered bars, while `d3.axisBottom` and `scaleBand` handle axes and genre categories. Interactive tooltips appear on mouseover, showing precise percentages using the `d3.format` function. The bars are rendered as SVG rectangles with data loaded from a local CSV file.

Vvamsikrishnakanchukommala@my.unt.edu
94% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes how movie ratings vary across six genres, showing the percentage of films that fall into each of five rating categories, from below 5.0 to above 8.5. Built with D3.js (v7) and rendered as an SVG, the chart uses a horizontal stacked layout where each genre forms a full-width bar, with color-coded segments representing rating levels. Interactive tooltips appear on hover, revealing the precise percentage for each genre-rating combination. The code employs `d3.stack`, `d3.scaleOrdinal`, and `d3.axisBottom` to process the CSV data and construct the visualization.

VVENKATESWAR RAO CHINTA
94% match
Loading thumbnail…

Activity6_Task2

This example visualizes IMDb movie ratings across six genres using a stacked horizontal bar chart, showing the percentage distribution of ratings across five score categories. The chart is rendered as SVG using D3 v7, with data loaded from a CSV file. The implementation demonstrates D3’s stack layout for proportional composition, d3.scaleBand for categorical positioning, and d3.scaleOrdinal for color encoding. Interactive tooltips reveal the exact percentage for each rating category on hover, with a legend positioned to the right.

Jjangalaupender@my.unt.edu
94% match
Loading thumbnail…

Activity6_Task2

This example shows the distribution of movie ratings across genres using a stacked horizontal bar chart, where each bar segment represents the percentage of films falling into rating brackets from below 5.0 to above 8.5. The visualization uses D3 v7 with an SVG rendering approach, employing d3.stack() to compute the stacked series and d3.scaleOrdinal with a custom color palette to distinguish rating categories. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination. The data comes from an external CSV file containing genre names and pre-computed proportional values.

Sshettisowmya01@gmail.com
94% 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
94% match