Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published0🌍 Public
Ppenumutchu.manobhiram@gmail.com
Last edited Apr 10, 2024
Created on Apr 7, 2024
Forked from Hello VizHub

This example displays a stacked bar chart of IMDb movie ratings across six genres, showing the percentage distribution of ratings within categories such as below 5.0, 5.0-6.5, and up to above 8.5. The visualization reads from a CSV file and uses d3.stack, d3.scaleOrdinal, d3.scaleBand, and d3.axisBottom to render the SVG. Each rectangle responds to mouseover events, displaying a tooltip with the exact percentage for that genre and rating bracket. The chart includes a title, axis labels, and a color legend.

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_Task2

This example shows a stacked horizontal bar chart of IMDb movie ratings across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses D3 v7 to load CSV data and render SVG elements. It employs d3.stack() to compute the stacked series, d3.scaleBand for the genre axis, d3.scaleLinear for the percentage scale, and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment using d3.format.

VVasanth Krishna
96% match
Loading thumbnail…

Activity6_Task2

A stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar divided into five rating intervals from "below 5.0" to "above 8.5." The visualization uses d3.stack() to aggregate the data, d3.scaleBand() for the categorical genre axis, and d3.scaleLinear() for the percentage axis. Hovering over a segment displays a tooltip with the exact percentage via d3.select and mouse events. The SVG rendering applies a color scale with five distinct hues and reads data from a CSV file.

Nnsairitwikreddy@gmail.com
95% match
Loading thumbnail…

Activity6_Task2

A stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segmented by five rating ranges from "below 5.0" to "above 8.5" as percentages. The visualization uses D3 v7 to load CSV data, applies `d3.stack()` to create stacked series, and renders SVG rectangles with `d3.scaleOrdinal` for color encoding. Interactive tooltips, implemented via mouse events, display the exact percentage for each rating segment on hover, while axes are generated using `d3.axisLeft` and `d3.axisBottom`.

Vvemulasai306@gmail.com
95% match
Loading thumbnail…

Activity6_Task2

This example uses a stacked horizontal bar chart to compare the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range from below 5.0 to above 8.5. The visualization, rendered as SVG, loads data from a local CSV file and uses D3 v7’s `d3.stack()` to create stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisLeft()` and `d3.axisBottom()` for axes. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination.

Hhaneesh@gctc.in
95% match
Loading thumbnail…

Activity6_Task2

This example displays a stacked horizontal bar chart showing IMDb movie rating distributions across six genres, with proportions for rating brackets below 5.0 through above 8.5. The visualization uses D3 v7’s `d3.stack()` and `scaleOrdinal` to create the layered bars, while `d3.axisBottom` and `scaleBand` handle axes and genre categories. Interactive tooltips appear on mouseover, showing precise percentages using the `d3.format` function. The bars are rendered as SVG rectangles with data loaded from a local CSV file.

Vvamsikrishnakanchukommala@my.unt.edu
95% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, where each bar segment represents a rating category from "below 5.0" to "above 8.5." Hovering over a segment reveals the exact percentage via a tooltip. Built with d3.v7, the visualization uses `d3.stack()` to create the stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisBottom()` for the percentage x-axis. Data is loaded from CSV using `d3.csv()` and rendered as SVG elements with interactive mouse events for the tooltips.

Kkamalini.ponnuru11@gmail.com
95% match
Loading thumbnail…

Activity6_Task2

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" as percentages. It loads CSV data and uses d3.stack to compute the stacked series, d3.scaleBand for the genre axis, d3.scaleLinear for the percentage axis, and d3.scaleOrdinal with a custom color palette. SVG rectangles render the segments, and mouse events trigger an HTML tooltip displaying the precise percentage for each segment.

Ppenujulilikhil01020@gmail.com
95% match
Loading thumbnail…

Activity6_Task2 (tutorial)

This example uses a stacked bar chart to show the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range (below 5.0 to above 8.5) as a percentage. The chart loads data from a local CSV file and renders it as SVG using D3 v7, employing `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal` for color coding, and `d3.scaleBand` for the categorical y-axis. Interactive tooltips appear on hover, displaying the exact percentage for each genre-rating combination, while axis labels and a title provide context.

Gguruabhay294@gmail.com
95% match