Activity 6_Tutorial 2

100%

Activity 6_Tutorial 2

✓ Published0🌍 Public

Last edited Apr 14, 2024

Created on Apr 14, 2024

This example visualizes the distribution of IMDb movie ratings across different genres as a stacked horizontal bar chart. Each bar represents a genre, segmented by rating categories (below 5.0 through above 8.5), with segment widths proportional to percentage shares. Built with D3 v7 and SVG, it uses `d3.stack()` to generate stacked series, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Interactive tooltips on mouseover display the exact percentage for each genre-rating combination, using data from a provided CSV file.

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_tutorial2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five percentage-based rating categories from “below 5.0” to “above 8.5.” The data is loaded from a CSV file and rendered as SVG using D3 v7. The chart uses `d3.stack()` to compute the stacked series, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment.

Yyadlapallisaisathvik@gmail.com

95% match

Loading thumbnail…

activity 6_tutorial 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across different genres, showing the relative percentage of each genre falling into rating brackets from "below 5.0" to "above 8.5." The chart uses D3.js (v7) with SVG rendering, employing `d3.stack()` to create the stacked segments, `d3.scaleBand()` for the categorical genres, and `d3.scaleLinear()` for the percentage axis. Interactive tooltips display exact percentages on hover. The data comes from the included `data.csv` file, and the code uses D3's selection API and axis generation functions.

Ssairohithchada@gmail.com

95% match

Loading thumbnail…

Activity8Tutorial2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the percentage of films falling into five rating bands. The chart uses `d3.stack()` to layer rating categories within each genre, with hover interactions triggering tooltips that display precise percentages via `d3.select` and an HTML div. Data is loaded from a CSV file using `d3.csv`, and SVG rendering applies `d3.scaleOrdinal` for color encoding and `d3.scaleBand` for genre positioning. The chart includes a custom legend and axis labels rendered with D3’s axis generators.

BBindumadhavi

95% match

Loading thumbnail…

Tutorial2_Activity6

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar segment representing the percentage of titles falling into one of five rating ranges. The visualization uses D3 v7’s `d3.stack()` to compute stacked series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination. Data comes from a local CSV file, and the chart renders as SVG with a custom ordinal color scale.

SShiva Sai Reddy

94% match

Loading thumbnail…

Activity6_Tutorial2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.v7 with SVG rendering, employing `d3.stack()` for the stacked data, `d3.scaleBand()` for genre positioning, and `d3.scaleLinear()` for the percentage axis, styled with custom CSS.

Yyadlapallisaisathvik@gmail.com

94% match

Loading thumbnail…

Activity 6 Tutorial 2

This visualization shows the distribution of IMDb movie ratings across six genres, using horizontally stacked bar charts where each bar segment represents a rating category from "below 5.0" to "above 8.5" as a percentage. The code uses D3 v7 to load CSV data, applies `d3.stack` to compute stacked series, and renders the result as SVG rectangles with `d3.scaleLinear` and `d3.scaleBand`. A custom tooltip displays exact percentages on mouseover, with legend colors mapped via `d3.scaleOrdinal`.

BBharath Vupputuri

94% match

Loading thumbnail…

activity6_tutorial2

A stacked horizontal bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating category from “below 5.0” to “above 8.5.” The chart reads proportions along a linear percentage axis, using d3.stack to compute layer offsets and d3.scaleOrdinal with distinct colors for each category. Interactive tooltips appear on mouseover via D3 event handlers, showing the exact percentage for a given genre and rating segment. The example imports D3 v7 from UNPKG and renders the visualization as SVG, with axes formatted using d3.axisBottom and d3.axisLeft.

1188r1a0559@gmail.com

94% match

Loading thumbnail…

Activity6_tutorial-2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5". The visualization encodes percentages as horizontal bar lengths, using d3.stack() to compute stacked segments and d3.scaleOrdinal with a categorical color palette to distinguish rating bins. Interactive tooltips display exact percentage values on mouseover via D3 event handlers, while d3.axisBottom and d3.axisLeft position the percentage and genre scales. The SVG rendering uses data from an inline CSV file.

Aamulyareddykondru01@gmail.com

94% match