Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6

✓ Published0🌍 Public
Aanushapodapati99@gmail.com
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from 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.

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 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
93% 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
93% 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
92% match
Loading thumbnail…

Fork of Activity6_Task2

This visualization shows the distribution of movie ratings across six genres as a stacked bar chart, with each bar representing a genre and segments showing the percentage of films in five rating categories from “below 5.0” to “above 8.5.” The chart highlights how genres like Documentary tend toward higher ratings while Action skews lower. Built with D3.js v7, the SVG uses `d3.stack()` for stacked segments, `d3.scaleOrdinal` for colors, and `d3.axisBottom` for the percentage axis. Hovering over a segment triggers a tooltip that displays the precise rating percentage using `d3.select` and the `d3.format` function. Data comes from the embedded CSV file.

Hharsha13638@gmail.com
92% match
Loading thumbnail…

Fork of Activity_6 Question2

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.

Bbhavanadupati3@gmail.com
92% match
Loading thumbnail…

Activity-6_2

This visualization shows the distribution of movie ratings across six genres, using a stacked horizontal bar chart where each bar is divided into five rating categories from "Below 5.0" to "Above 8.5". The chart uses D3 v7 with an SVG rendering and a color legend to distinguish the rating segments. The data is hardcoded in the script, and the visualization includes an interactive tooltip that displays the percentage value of each segment when hovered over, with the segment slightly dimming on mouseover. The chart is built using `d3.stack()` for the stacked data structure, `d3.scaleBand()` for the y-axis genres, and `d3.scaleLinear()` for the x-axis percentages.

MMdAfikurRahmanKhan@my.unt.edu
91% match
Loading thumbnail…

Activity_6_2

This stacked bar chart visualizes the distribution of movie ratings across six genres, showing the percentage of ratings in five categories from "below 5.0" to "above 8.5". The chart uses `d3.stack()` and `d3.scaleOrdinal` for color encoding, with a linear x-axis for percentages and a band scale for genres. Hovering over a segment triggers `d3.select` and tooltip updates via `d3.mousemove`, displaying the exact percentage. The SVG is rendered with `d3.axisBottom` and `d3.axisLeft`, while data is loaded from a CSV file containing the genre and rating proportions.

Ssahaspragna6@gmail.com
91% 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
91% match