Skip to main content
SimilarExport ZIP
100%

activity6_tutorial2

✓ Published1🌍 Public
1188r1a0559@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Hello VizHub

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.

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_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
97% match
Loading thumbnail…

Activity6_tutorial

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segmented by rating level from below 5.0 to above 8.5. The visualization uses D3.js v7 with an SVG rendering, mapping genres along the y-axis and percentage along the x-axis. The code employs `d3.stack()` for stacked bar generation, `d3.scaleOrdinal()` for color encoding, and D3's axis APIs (`d3.axisBottom`, `d3.axisLeft`) for tick marks. Hovering reveals a custom tooltip displaying the exact percentage for each rating segment using `d3.format()`.

Vvidiyalasahithi1999@gmail.com
96% match
Loading thumbnail…

Activity 6 Tutorial 2

This stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, showing the proportion of titles falling into five rating brackets from "below 5.0" to "above 8.5." The chart uses d3.stack to create the stacked segments and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover via D3 event handlers, displaying the exact percentage for each genre-rating combination. The SVG output is generated using the d3.js library (v7) with data loaded from a CSV file, and the chart includes axis labels and a title rendered with custom fonts.

Nnikhilapogula@my.unt.edu
96% match
Loading thumbnail…

Activity6_tutorial2

A horizontal stacked bar chart displays the distribution of IMDb movie ratings across six genres, with proportions for five rating brackets from below 5.0 to above 8.5. Built with D3.js (v7), the visualization uses `d3.stack()` for cumulative bar construction, `d3.scaleOrdinal()` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for axes. Interactive tooltips on mouseover reveal precise percentage values for each genre-rating segment.

Nnishwitha.1032@gmail.com
96% match
Loading thumbnail…

Activity6_tutorial2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the proportion of films falling into five rating brackets from "below 5.0" to "above 8.5." Each bar represents a genre, segmented by rating category with distinct colors. The visualization uses d3.stack() to compute the stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Hover interactions highlight individual segments and display a tooltip with the exact percentage, computed from the pre-aggregated proportions in the CSV data.

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

Activity 6 Tutorial 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into five rating brackets. Each horizontal bar is divided into colored segments, with hovering revealing exact percentages via a custom tooltip. The visualization uses D3.js version 7, employing `d3.stack` for data transformation, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` for color mapping. Data comes from a CSV file, rendered as SVG with mouseover events for interactivity.

BBamanGayathri
96% match
Loading thumbnail…

Activity6_tutorial2

This stacked bar chart visualizes how IMDb movie ratings are distributed across six genres, showing the proportion of films falling into five rating brackets from below 5.0 to above 8.5. Each genre’s bar is segmented by rating category, with colors and a legend clarifying the categories, and hovering over a segment reveals the exact percentage via a tooltip. The visualization uses d3.v7’s `d3.stack` and `d3.scaleOrdinal` for data stacking and color mapping, with SVG rendering and axes created via `d3.axisBottom` and `d3.axisLeft`. Data comes from the included CSV file.

Yyadlapallisaisathvik@gmail.com
95% match