Skip to main content
SimilarExport ZIP
100%

Activity-6 Q3

✓ Published0🌍 Public
KKavyaEti
Last edited Oct 23, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example shows a stacked bar chart of manga readership by genre and age group, sourced from a local CSV file. Each age bracket, from 10-19 to 50 and above, contains segments for action and romance readers, with bar lengths proportional to reader counts. The visualization employs D3.js v7 and renders via SVG, using `d3.stack()` to create the stacked layout, `d3.scaleOrdinal` for genre colors, and `d3.scaleLinear` and `d3.scaleBand` for axes. Tooltips display exact reader numbers 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…

Activity-6 Q3

This visualization shows a horizontal stacked bar chart comparing manga readership across five age groups, breaking down readers into Action and Romance genre categories. The code uses D3 v7’s `d3.stack()`, `scaleLinear`, `scaleBand`, and `scaleOrdinal` with a custom color palette to render the SVG. Interactive tooltips appear on mouseover, displaying the specific genre reader count for each segment. The chart includes axis labels, a title, and a legend, with data loaded from a local CSV file via D3’s data-binding methods.

KKavyaEti
96% match
Loading thumbnail…

Activity-6 Q3

This example shows a stacked horizontal bar chart of manga readers by genre (Action and Romance) across five age groups, using data from a CSV file. It loads D3 v7 via UNPKG and renders SVG. The code uses `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, with a custom tooltip on mouseover. A legend and axis labels are included, and colors differentiate the two genres.

KKavyaEti
96% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays how readers rate book genres across three categories (Excellent, Good, Average), with each genre represented by a horizontal bar segmented by rating proportions. The visualization uses D3.js (v7) with an SVG rendering approach, loading data from a CSV file containing genre ratings as percentages. The code employs `d3.stack()` with `stackOrderNone` and `stackOffsetNone` to build the segments, along with `d3.scaleLinear` for the percentage axis and `d3.scaleBand` for genre categories. Users can click any segment to see the exact rating percentage via an alert.

Mmaheshsachin1234@gmail.com
85% match
Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes the distribution of book ratings across six literary genres, with each bar divided into four rating categories from below 3.0 to above 4.5. The visualization uses D3 v7 with an SVG renderer, employing d3.stack for data transformation, d3.scaleOrdinal for color mapping, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover to display precise percentages for each rating segment, with data loaded from a local CSV file.

Gganeshseeram5decem@gmail.com
84% match
Loading thumbnail…

Activity6_Question_2

This stacked bar chart shows the distribution of book ratings across six genres, with each bar representing the percentage of ratings falling into five categories from “Below 5.0” to “Above 8.5.” The visualization uses d3.stack() to create the stacked segments, d3.scaleOrdinal for color encoding, and d3.scaleBand for the genre axis. Hovering over any segment displays a tooltip with the exact percentage for that rating category. The chart is rendered as an SVG using D3 v7, with data loaded from a CSV file.

Ssaimanvith22@gmail.com
83% match
Loading thumbnail…

Activity-6 Q-9

A bubble chart visualizes manga and webtoon popularity by mapping the number of chapters on the x-axis, readers on the y-axis, and rating to bubble size, with genre encoding color. The D3.js v7 code loads CSV data and uses `d3.scaleLinear` for axes and bubble radius, plus `d3.scaleOrdinal` with `d3.schemeCategory10` for color. Interactive tooltips appear on mouseover, and an animated legend illustrates rating values using overlay circles.

KKavyaEti
83% match
Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows movie genre preferences across five age groups, with each bar segment representing the percentage of respondents who rated a particular movie type. The visualization uses d3.stack() to compute cumulative values and d3.scaleOrdinal with a custom color palette to distinguish categories. Mouse interactions trigger tooltips that display exact percentages, while d3.axisBottom and d3.axisLeft render the axes with gridlines. The data originates from a CSV file, and the chart is rendered as SVG using D3 v7.

Ttallapanenisahithi@gmail.com
83% match
Loading thumbnail…

Activity 6 task 2

This stacked bar chart visualizes the percentage distribution of book ratings across five genres, using data from a CSV file. Each bar represents a genre, segmented by rating ranges from "below 4.0" to "above 8.5", with a horizontal axis showing percentages. The visualization uses D3 v7's `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` APIs, rendering as SVG in a browser. Interactive tooltips display precise rating percentages per genre when hovering over bar segments, with opacity changes on mouseover. The chart includes axis labels, a title, and a color-coded legend for rating ranges.

Jjaideeptripurani12@gmail.com
82% match