Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published0🌍 Public
SSree Yuktha Sunkara
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Activity-6

This bar chart displays average genre ratings across six categories—Action, Adventure, Comedy, Drama, Horror, and Sci-Fi—expressed as percentages. Built with Chart.js 3.7.0 and rendered on a Canvas element, the visualization loads from CDN and uses a `getElementsAtEventForMode` click handler to alert the selected bar’s label and value. The chart applies styling through custom `backgroundColor` and `borderColor` arrays, with tooltips and axis ticks configured for percentage formatting. Data originates from a local CSV file, though the example uses hardcoded values.

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 distribution of movie ratings across six genres, breaking down each genre into five rating ranges from below 5.0 to above 8.5. The visualization uses D3 v7 with SVG rendering, loading data from a local CSV file and converting percentage values to numbers. The chart employs `d3.stack()` to create stacked segments, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for percentages, with a color scale distinguishing rating ranges. Interactive features include tooltips on mouseover and a custom modal on click that displays the complete rating breakdown for each genre.

Ssreejabommineni1506@gmail.com
85% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage of each rating level (below 5.0 to above 8.5) across six movie genres, illustrating how genre impacts ratings. The visualization uses plain HTML, CSS, and JavaScript with event listeners that trigger alert pop-ups showing the exact percentage on click. Data from data.csv includes proportions summing to 1 per genre, though the displayed bars are static placeholders rather than dynamic renderings of the full dataset.

Ssumanthnaidu213@gmail.com
85% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of five rating categories across six movie genres, revealing how genre influences audience reception. The chart uses stacked rectangles to represent proportions, with a color-coded legend and tooltips displaying precise percentages on hover. Built with D3.js v7, the visualization uses `d3.stack()` for data aggregation, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG rendering. The data comes from a CSV file with genre-based rating percentages, styled with custom CSS for interactive elements.

Ssowmyaammula.sdv@gmail.com
84% match
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
84% match
Loading thumbnail…

Activity 8_task 2

This stacked bar chart visualizes movie ratings by genre, with each bar showing the percentage distribution across action, comedy, drama, thriller, and horror categories. The chart uses a horizontal layout with a linear x-axis for percentages and a band scale for genres, coloring each segment distinctly. Built with D3 v7, the visualization renders as SVG and includes interactive tooltips on mouseover that display the exact percentage for each genre-rating combination. The data is loaded from a CSV file and processed using D3’s stack layout and scaleOrdinal for color mapping.

Sshivasaikumart@gmail.com
84% 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
84% match
Loading thumbnail…

Activity-8_Task2

A horizontal stacked bar chart displays the distribution of IMDb 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.stack to compute the layered bar segments, d3.scaleBand for genres on the y-axis, and d3.scaleLinear for the percentage scale on the x-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each genre-rating combination. Data comes from a CSV file loaded with d3.csv.

SSree Yuktha Sunkara
84% 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
84% match