Skip to main content
SimilarExport ZIP
100%

act8

✓ Published0🌍 Public
Rravularasesh3102@gmail.com
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Hello VizHub

This example displays a stacked bar chart of movie ratings by genre, sourced from a local CSV file. The visualization uses React and D3 v7 to render SVG bars, with scales for linear percentages and categorical genres. It employs `d3.stack`, `scaleBand`, and `scaleLinear` to compose the bars, while a color scale distinguishes categories. Interactive tooltips, built with D3 selectors, reveal percentage values on hover.

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…

act8_task2

This example presents a stacked horizontal bar chart of movie ratings by genre, with each genre row segmented proportionally across categories like Action, Comedy, and Drama. Hovering over a segment reveals a tooltip with the exact percentage. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleOrdinal` for the categorical color scheme, and `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded from a CSV file, and all rendering is done to an SVG canvas.

Rravularasesh3102@gmail.com
92% match
Loading thumbnail…

act8_task2

This visualization presents a horizontal stacked bar chart showing the distribution of movie ratings across six genres, from Documentary to Action. The chart uses D3.js v5 with SVG rendering, employing a band scale for genres and a linear scale for percentage values. Interactive tooltips display exact percentages on hover. The code demonstrates D3's stack, scaleOrdinal, and axisBottom APIs, along with custom styling via the Yanone Kaffeesatz font.

Rravularasesh3102@gmail.com
90% match
Loading thumbnail…

Act6-tutorial2

This stacked bar chart visualizes the distribution of movie ratings across six genres, using horizontal bars to show the percentage of ratings in five categories from "below 5.0" to "above 8.5." The chart loads CSV data, builds the stacked layout with d3.stack(), and scales positions using d3.scaleLinear and d3.scaleBand. Interactive tooltips display exact percentages on mouseover, while an ordinal color scale distinguishes rating categories. The visualization is rendered as SVG using D3 v7, with axis labels and a legend highlighting genre-specific rating patterns.

RRayabarapu Nikhitha
89% match
Loading thumbnail…

act8_task2

This horizontal stacked bar chart visualizes the proportional distribution of movie ratings across genres, with each bar divided into colored segments for action, comedy, drama, thriller, and horror. Built with D3 v7 and rendered as SVG, the chart uses d3.stack(), d3.scaleBand(), and d3.scaleLinear() to position segments, while d3.axisBottom with gridlines and custom tooltips display exact percentages on hover. Data comes from a static CSV file loaded locally.

Rravularasesh3102@gmail.com
88% match
Loading thumbnail…

Activity 7 Task 2

A stacked horizontal bar chart displays the percentage distribution of movie ratings across six genres, using data from a CSV file. The visualization uses D3 v7's `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to render SVG rectangles, with a color scale distinguishing five rating categories. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. The chart includes labeled axes, a legend, and a title.

AArun Pratap
88% match
Loading thumbnail…

Activity6_Task2

This is a stacked horizontal bar chart showing the percentage distribution of IMDb movie ratings across six genres, with ratings grouped into five categories from "below 5.0" to "above 8.5." The visualization uses d3.svg to render four-chart series with d3.stack for the stacked bars, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. Interactive tooltips appear on hover using D3 event handlers, displaying the exact percentage for each genre-rating combination. Data comes from a local CSV file containing proportional values per genre.

JJhansi Balla
87% match
Loading thumbnail…

activity8_tutorial2

This stacked bar chart shows the distribution of IMDb movie ratings across genres, with each horizontal bar divided into five rating categories from below 5.0 to above 8.5, expressed as percentages summing to 100%. Hovering over any segment reveals a tooltip with the precise percentage for that genre and rating level. Built with D3 v7, the visualization uses `d3.stack()` to compute stacked segments, `d3.scaleOrdinal` for categorical coloring, and `d3.scaleBand`/`d3.scaleLinear` for axes, rendering all graphics as SVG. Data comes from a CSV file containing six genres and their rating proportions.

Ssaitejauppu0206@gmail.com
87% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes 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 visualization uses d3.stack() to create the stacked segments, d3.scaleLinear() for the x-axis, and d3.scaleBand() for the categorical genre axis. Interactive tooltips appear on mouseover via d3.select and event handlers, displaying the precise percentage for each rating segment. The chart renders as SVG within a React framework, styling text elements with custom fonts from Google Fonts.

Cchinnivikramnunna@gmail.com
87% match