Skip to main content
SimilarExport ZIP
100%

activity6_Question2

✓ Published0🌍 Public
Ccherrylmarym@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Hello VizHub

This example shows a horizontal stacked bar chart comparing the percentage of movie ratings across different genres. Each genre (banana, poacee, sorgho, triticum) is a row, and each colored segment represents a rating category's proportion. The chart uses D3 v7's `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `stack()` to create the stacked segments from the CSV data. Hovering over a segment uses a custom tooltip to display the exact percentage for that genre and rating category.

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-6_Question-2

This example visualizes the impact of movie genres on ratings using a stacked bar chart, where each genre (represented by vegetables in the data) is broken down into rating-level percentages that sum to 1. Hovering over any segment displays a tooltip with the precise percentage for that rating category. The chart is built with D3 v7, using `d3.stack()` to create stacked bars, `d3.scaleBand()` for the y-axis, and `d3.scaleLinear()` for the x-axis. User interactions are handled through `.on('mouseover')`, `.on('mousemove')`, and `.on('mouseout')` events, with data loaded from an embedded CSV.

RRISHIK KURIKELLY
90% match
Loading thumbnail…

activity 6question 2

This stacked bar chart displays the distribution of movie ratings across five genres, segmenting each genre's total percentages into five rating ranges from "Below 5.0" to "Above 8.5". The visualization uses `d3.stack()` to aggregate the data, with `d3.scaleOrdinal` assigning distinct colors to each rating category. Horizontal bars are rendered using `d3.scaleBand` for genres and `d3.scaleLinear` for the percentage axis. Interactive tooltips, implemented with mouseover events, display the exact percentage for each rating segment when hovering, enhancing the data's readability. The chart is built with D3 v7 and rendered as SVG, using data from a CSV file.

Ttsumanth619@gmail.com
89% match
Loading thumbnail…

Activity6_Qu-2

This stacked bar chart visualizes the percentage distribution of movie ratings across different genres, with each bar segment representing a rating category. The chart uses a horizontal layout where genres appear on the y-axis and percentage values on the x-axis. Users can hover over individual segments to see precise percentage tooltips, and clicking a segment displays the value in an alert. The visualization is built with D3.js v6, using `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical axis, and `d3.scaleLinear()` for the numerical axis. Data comes from a CSV file containing genre and rating percentage columns.

Rrakshithareddy217@gmail.com
89% match
Loading thumbnail…

activity6question2

This example shows how movie ratings vary across genres using stacked horizontal bars, where each bar segment represents the percentage of ratings falling into one of five rating brackets from below 5.0 to above 8.5. The visualization makes it easy to compare rating distributions across genres like Drama, Comedy, and Non-fictional works. Built with D3 v7, the chart uses d3.stack to compute the layered data and d3.scaleOrdinal for color encoding. Hovering over a segment triggers a tooltip showing the exact percentage for that genre and rating level, while the legend identifies each rating category.

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

Question2

This stacked bar chart shows the percentage distribution of movie ratings across different genres, with each horizontal bar broken into colored segments representing rating levels from 'Less than 3' to 'More than 6'. The visualization uses d3.stack() to process the CSV data and d3.scaleBand() for the genre categories on the y-axis, with d3.scaleLinear() mapping percentages on the x-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that rating level within the genre, while the chart uses d3.axisBottom() and d3.axisLeft() for axes and a color ordinal scale to distinguish rating categories.

Mmeghna.reddy700@gmail.com
89% match
Loading thumbnail…

Activity6_question2

This stacked bar chart displays the percentage distribution of movie ratings across five genres, with each bar segmented into five rating categories from below 5.0 to above 8.5. The chart reveals how genre influences rating patterns, such as Documentaries having the highest proportion of high ratings, while Action films show the largest share of low ratings. Hovering over a segment displays the exact percentage via a tooltip. The visualization uses d3.v7 with SVG rendering, employing `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleLinear` to construct the stacked bars from the CSV data.

Nneerajreddyaluka@gmail.com
89% match
Loading thumbnail…

Question 3

A stacked horizontal bar chart displays the distribution of movie ratings across six genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." The chart uses D3 v7's `d3.stack()` and `scaleOrdinal` for color mapping, with `scaleLinear` for the x-axis and `scaleBand` for genres. Tooltips appear on mouseover via `d3.select` and `event.pageX`/`pageY`, showing the exact percentage per rating category. Data originates from a local `data.csv` file rendered as SVG.

GGangumalla Ruchitha Reddy
89% match
Loading thumbnail…

activity-6_question-3

This stacked bar chart shows the percentage distribution of rating levels across different movie genres, revealing how genre influences audience ratings. Hovering over each bar segment displays exact percentages via pop-ups, with each genre’s total summing to 100%. The visualization uses D3.js v7’s `d3.stack()` and `d3.scaleBand()` to create the bars, with `d3.scaleOrdinal()` and `d3.schemeCategory10` assigning colors to rating categories. Data is loaded from a CSV file using `d3.csv()`, and the SVG rendering includes axes generated by `d3.axisBottom()` and `d3.axisLeft()`.

Ssiddhartha gurram
89% match