Skip to main content
SimilarExport ZIP
100%

Task-8-Q2.3

✓ Published0🌍 Public
Mmdadeebfarhaan@gmail.com
Last edited Apr 12, 2024
Created on Apr 12, 2024
Forked from Task-8-Tutorial-2

This example shows the distribution of game ratings across six sports, with each sport’s ratings divided into five percentage categories. It uses a stacked horizontal bar chart, where each bar segment represents the proportion of ratings in a category, and the total bar length spans from zero to one hundred percent. The visualization is rendered as SVG using D3 v7, with data loaded from a CSV file. The code leverages D3’s `scaleBand`, `scaleLinear`, `stack`, and `scaleOrdinal` APIs to construct the chart, and tooltips display the precise percentage for each segment.

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_Task 2

This visualization shows the distribution of star ratings (1 to 5) for different sports, displayed as a stacked horizontal bar chart where each bar represents a sport and segments show the proportion of each rating. The data comes from a CSV file with ratings for six sports, and the chart uses D3 v7 with SVG rendering. The code builds the stacked layout using `d3.stack()`, scales data with `d3.scaleLinear` and `d3.scaleBand`, colors segments via `d3.scaleOrdinal`, and includes interactive tooltips on mouseover that display the exact percentage for each rating segment.

Jjakeh311@yahoo.com
89% match
Loading thumbnail…

task2

This example presents a stacked horizontal bar chart titled "Most viewed sports," visualizing the percentage distribution of ratings across six sports (Football, Basketball, Cricket, Tennis, Golf, Athletics) using five rating categories from a CSV file. The chart uses `d3.scaleOrdinal` for color mapping and `d3.scaleBand` for the category axis, with `d3.stack` to aggregate the percentage data. Interactive tooltips display exact percentage values on mouseover, and the SVG rendering employs `d3.axisBottom` for the x-axis and custom styling from CSS.

Yyashwanthkirla95@gmail.com
88% match
Loading thumbnail…

activity 6 task2

This stacked bar chart shows the distribution of ratings across six sports, with each bar segmented into five rating levels from “below 5.0” to “above 8.5.” The visualization uses D3.js v7 to create a horizontally stacked bar chart, where the x-axis represents the percentage (scaled from 0 to 1) and the y-axis lists the sports. Interactive tooltips display the exact percentage for each segment on mouseover, formatted to two decimal places. The chart uses `d3.scaleOrdinal` for color assignment, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis, rendering with SVG and styled via CSS.

Iibrahimpatnamrohit1990@gmail.com
88% match
Loading thumbnail…

Activity 6_Task-2_Question_2

This example visualizes the distribution of viewership ratings across five sports, using a horizontal stacked bar chart where each bar segment represents the proportion of viewers in a rating category (e.g., "Below 5.0", "5.0-6.5"). The chart, rendered with D3.js v7, employs a band scale for the y-axis and a linear scale for the x-axis. The code builds the stacked bars using `d3.stack` and `d3.scaleOrdinal` for color mapping, with interactive tooltips showing exact percentages on hover. Data is loaded from a static CSV file.

Rrajkodavati7@gmail.com
87% match
Loading thumbnail…

Task 6.2

This example shows a stacked horizontal bar chart comparing five sports across five attributes—Popularity, Physical Intensity, Strategy, Teamwork, and Entertainment Value—using data from a CSV file. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the categorical y-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that attribute, while the chart includes a legend and axis labels for clarity.

Pperamranji
85% match
Loading thumbnail…

Sports Ratings

This stacked bar chart displays the distribution of fan ratings across six sports, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` with a categorical color palette. Hovering over any segment triggers a tooltip showing the exact percentage for that rating category. The chart includes axes, a legend, and is rendered as SVG with data loaded from a CSV file.

Lleftymadi
85% match
Loading thumbnail…

Task2_Question3

This stacked bar chart visualizes the distribution of movie ratings across six sports genres, showing the proportion of each rating category within every genre. The chart uses D3.js to render horizontally stacked bars and percentage axes, with genres like Football and Soccer displayed along the y-axis. The data is loaded from a CSV file, and interactive tooltips provide precise percentage values for each rating segment on hover, revealing the impact of genre on audience ratings. The visualization encodes the five rating ranges using color-coded segments that sum to 100% for each genre.

UUday Vandanapu
85% match
Loading thumbnail…

Activity6_Task2_Q2

This example uses a stacked horizontal bar chart to display the distribution of app ratings across categories like Social Media and Gaming, with each bar segment representing a rating range's percentage. Built with D3 v7, the visualization relies on `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to compute and render segments from the CSV data. Tooltips, implemented via D3 selection and mouse events, display exact percentages on hover. The SVG output uses a custom color scale for the five rating categories.

KKondreddy Saikiran reddy
84% match