Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published2🌍 Public
MMandadi Nishita
Last edited Oct 20, 2024
Created on Oct 20, 2024
Forked from Hello VizHub

This example presents a stacked horizontal bar chart showing the distribution of IMDb ratings across different genres, with each genre broken into five rating categories from "below 5.0" to "above 8.5." The visualization uses D3 v7’s `d3.stack()` function to compute stacked values and `d3.scaleOrdinal()` with a custom color palette to distinguish rating bands. Interactive mouseover events, handled via `.on()`, reveal tooltips displaying the exact percentage for each genre-rating combination. The chart is rendered as an SVG, with axes formatted using D3’s `d3.axisBottom` and `d3.axisLeft`, and data is loaded from a local CSV file.

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

Activity6_Task2

A stacked horizontal bar chart displays the percentage of IMDb movie ratings across six genres, broken into five rating brackets from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack` and `d3.scaleBand` to generate the bars, with `d3.scaleOrdinal` assigning distinct colors to each rating category. Interactive tooltips appear on mouseover, showing the exact percentage for a specific genre and rating bracket. Data comes from the included CSV file, and the visualization renders as SVG.

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

Activity6_Task2

This stacked horizontal bar chart shows the distribution 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.stack() to compute the stacked segments and d3.scaleOrdinal() with a categorical color scale to distinguish rating bands. The code renders SVG rectangles via data joins and includes an interactive tooltip triggered by mouseover events, displaying the exact percentage for each genre-rating combination. Data comes from a CSV file containing precomputed proportions for each genre.

GGunna,Praneeth Reddy
96% 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
96% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows how IMDb movie ratings are distributed across genres, with each bar segment representing the percentage of films falling into rating bands from “below 5.0” to “above 8.5.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked series and `d3.scaleOrdinal` for color mapping, rendering as SVG. Hovering over a segment triggers a tooltip showing the exact percentage for that genre and rating category, while axis labels and a title clarify the data. The chart reads from a local CSV file structured with genre rows and rating-band columns.

Bbhargavr016@gmail.com
96% match
Loading thumbnail…

activity_6_task2

This example presents a stacked horizontal bar chart showing the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of movies falling into one of five rating brackets. The chart uses D3 v7’s `scaleLinear`, `scaleBand`, `scaleOrdinal`, and `stack` API to compute and render the stacked bars from CSV data. Interactive tooltips, implemented with D3 selections and event handlers, display the exact percentage for each genre-rating combination on mouseover. The visualization is rendered as SVG within a 960×500 canvas, with axes labeled and styled via external CSS.

11810vineeth@gmail.com
95% match
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
95% match