Skip to main content
SimilarExport ZIP
100%

activity_6 question2

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

This example presents a stacked horizontal bar chart that visualizes the distribution of low, moderate, and excellent product ratings as percentages, with each bar segment representing a rating category. The chart uses D3 v7's stack, scaleLinear, scaleBand, and axisBottom APIs to construct the visualization from a local CSV file. Interactive tooltips display the exact percentage of each rating when hovering over a segment, achieved through event listeners that calculate the value from the underlying data. SVG rendering handles the output, and the chart is enhanced with custom styling from an external stylesheet.

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…

Question 2 activity 6

A stacked bar chart displays product ratings across three categories: low, moderate, and excellent, using percentage proportions loaded from a local CSV file. D3 v7’s `d3.stack` and `scaleOrdinal` assign colors to rating segments, while `scaleBand` positions products on the y-axis and `scaleLinear` maps proportions to bar widths. Interactive tooltips appear on mouseover, showing formatted percentage values for each rating type. The SVG renderer applies axes with gridlines, a title, and axis labels, styled via external CSS.

Sskykarthik97@gmail.com
93% match
Loading thumbnail…

Activity6_Question2

A stacked bar chart displays the percentage of five rating levels (Below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, Above 8.5) across six product categories, with each bar totaling 100%. The visualization highlights how rating distributions vary by category. Using d3.stack() and d3.scaleOrdinal for color encoding, the SVG renders horizontal bars via d3.scaleBand and d3.scaleLinear. Interactive tooltips appear on mouseover, showing exact percentage values computed with d3.format, using data from a CSV file.

Jjayanthbalina@gmail.com
91% match
Loading thumbnail…

Activity6_Question2

This stacked horizontal bar chart shows the distribution of ratings for six food categories, from "Below 4" to "Above 8," with each bar segment representing the percentage of ratings in that range. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for the y-axis categories. Hovering over a segment highlights it and displays a tooltip with the exact percentage, while the data is loaded from a local CSV file. The SVG rendering includes custom axis labels and a legend.

PPadmajaKodati@my.unt.edu
91% match
Loading thumbnail…

activity6_task2

A stacked horizontal bar chart displays customer satisfaction ratings across five product categories, with segments representing the percentage of responses in each rating level from "Excellent" to "Very Poor." The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for product categories, and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. Data comes from a local CSV file loaded asynchronously.

TThai Ha Dang
90% match
Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the distribution of user ratings across five tech categories, with each bar proportionally segmented from "below 5.0" to "above 8.5." Using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the percentage x-axis, the chart employs d3.stack to compose the segments. A hover tooltip reveals exact percentages per segment, with the data loaded via d3.csv. SVG rendering and smooth opacity transitions for the tooltip enhance interactivity.

Bbhargavr016@gmail.com
90% match
Loading thumbnail…

Activity6_2

This stacked horizontal bar chart displays customer satisfaction ratings for six product categories, with segments representing the percentage of ratings falling into five ranges from below 2.0 to above 4.5. The visualization uses D3 v7 to load CSV data and render SVG elements. Categories appear on the y-axis, while a linear x-axis shows the proportion for each rating band. An ordinal color scale distinguishes rating levels, and interactive tooltips display the exact percentage for each segment on hover. The chart includes axis labels, a title, and a legend.

DDee
90% match
Loading thumbnail…

activity6_question2

A stacked bar chart displays TV brand ratings across five percentage categories (below 2.0 to above 6.5), with each bar segmented by brand. The visualization loads data from a CSV file and renders SVG using D3 v7. It employs `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` to position and color segments, while mouseover events trigger a custom tooltip showing exact rating percentages.

1188r1a0559@gmail.com
90% match
Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the percentage distribution of ratings across six categories (Technology, Finance, Healthcare, Education, Sports, Entertainment), with each bar segmented into five rating ranges from below 5.0 to above 8.5. The visualization uses d3.stack to compute cumulative segment positions, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the percentage x-axis, and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment, while the SVG rendering includes axes with tick marks and custom styling from the linked CSS.

Ssaisnehapalle@my.unt.edu
90% match