Fork of Activity_6 Question2

100%

Fork of Activity_6 Question2

✓ Published0🌍 Public

Last edited Oct 22, 2024

Created on Oct 22, 2024

This example visualizes the percentage of movie ratings by genre using a stacked horizontal bar chart. Each bar segment represents a genre, with colors mapping to categories like Comedy or Drama, and hover interactions reveal precise percentages. Built with D3 v7, the chart utilizes `d3.stack` to compose the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rendering. The tooltip is implemented with a custom HTML div, while styling comes from a Google Fonts import.

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…

Fork of Activity-6 Question2

This stacked bar chart shows how movie ratings vary across genres, with each bar divided into rating categories and the total always equaling 100%. Hovering over a bar segment reveals a tooltip with the exact percentage for that rating within the selected genre. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to generate SVG rects, with `d3.axisBottom` and `d3.axisLeft` for axes. A custom tooltip displays precise values, while the color palette distinguishes rating levels.

Ssaimanvith22@gmail.com

94% match

Loading thumbnail…

Fork of Activity6_Question2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the percentage of ratings in five categories from "below 5.0" to "above 8.5". The visualization uses d3.stack() to create stacked segments, d3.scaleBand for the genre categories, and d3.scaleOrdinal with a custom color palette. Hovering over any segment reveals a tooltip displaying the exact percentage for that genre and rating level. The data comes from a CSV file loaded and processed with D3 v7, rendered as SVG elements.

SSatish Nallamadugu

93% match

Loading thumbnail…

Fork of Activity-6 Task2

This stacked bar chart illustrates the distribution of movie ratings across genres, revealing how genre impacts rating percentages. Hovering over a segment displays the exact percentage via a tooltip. Built with D3.js v7, the visualization computes stacked proportions from CSV data and renders the chart as SVG, using `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` for the color scale. The tooltip is a positioned HTML div.

Hharshaps15@gmail.com

92% match

Loading thumbnail…

Fork of Activiy6_question2

This stacked bar chart visualizes how movie genres relate to rating distributions, showing the proportion of each rating category within genres like Pop, Rock, and Jazz. The horizontal bars represent genres, with segments colored by rating level and a tooltip displaying exact percentages on hover. Built with D3 v7, the code uses `d3.stack()` to compute the stacked segments, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Data comes from a static CSV file, and SVG rendering handles the visualization with an interactive tooltip appended to the body.

Ddineshreddy.ravula@gmail.com

92% match

Loading thumbnail…

Fork of Activity 6

This example visualizes the percentage distribution of movie ratings across six genres using a stacked bar chart rendered with SVG. The chart displays rating categories from below 5.0 to above 8.5 as colored segments, with each genre represented as a horizontal bar. The code loads data from a CSV file using `d3.csv` and constructs the visualization with `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack`. Interactive tooltips appear on mouseover, showing the exact percentage for each segment. Colors are assigned using `d3.schemeCategory10`, and hover effects are implemented with CSS transitions.

Aanushapodapati99@gmail.com

92% match

Loading thumbnail…

Fork of Activity6question2

A stacked horizontal bar chart shows the percentage distribution of IMDb ratings across six genres, using five rating brackets from below 5.0 to above 8.5. The code loads data from a CSV file and uses d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to build the chart. Each segment displays a tooltip on mouseover that reports the exact percentage for that genre and rating bracket. The visualization uses SVG rendering with D3 v7.

Vvaishnavi6gan@gmail.com

92% match

Loading thumbnail…

Fork of Activity_06_2

A stacked bar chart displays the percentage distribution of movie ratings across genres, with each bar segment representing a rating level and colors distinguishing them. The visualization uses d3.stack() to compute stacked series and d3.scaleOrdinal() for color mapping, rendering SVG rectangles via d3.selectAll(). Hovering triggers a tooltip showing the exact percentage for each rating segment. Data is loaded from a CSV file with rating percentages per genre, and the chart includes axes, labels, and a legend.

Ssahaspragna6@gmail.com

91% match

Loading thumbnail…

Fork of Activity 6 Task 2

This example visualizes IMDb movie ratings across six genres with a stacked horizontal bar chart. Each bar represents a genre, segmented by rating categories from "below 5.0" to "above 8.5," showing the proportion of films in each rating band. The visualization uses D3 v7 with d3.stack, d3.scaleBand, and d3.scaleLinear to construct the chart, and includes interactive tooltips that display exact percentages on mouseover. The SVG rendering loads data from a local CSV file and applies a custom color scale for the rating categories.

Ttallapanenisahithi@gmail.com

91% match