Skip to main content
SimilarExport ZIP
100%

activity6_task2

✓ Published0🌍 Public
Ppaulphillips@my.unt.edu
Last edited Oct 21, 2024
Created on Oct 21, 2024
Forked from activity6_task2

This example visualizes apple quality ratings using a stacked horizontal bar chart, where each bar represents a sample and segments show the proportion of attributes like size, weight, sweetness, and acidity. The visualization uses D3 v7 with an SVG rendering, loading data from a CSV file. It employs d3.stack for stacking, d3.scaleLinear and d3.scaleBand for axes, and d3.axisBottom for the x-axis, with interactive tooltips 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…

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

Activity_6_task_3

This scatter plot visualizes the apple quality dataset, plotting fruit size on the x-axis against weight on the y-axis, with each point colored green or red to indicate good or bad quality. The visualization uses D3 v6 with SVG rendering, employing the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data, compute scales, and draw axes. The code retrieves the dataset from a GitHub-hosted CSV file and renders approximately 4,000 circles across the full browser window.

TThai Ha Dang
85% match
Loading thumbnail…

Activity6_Question 3

This stacked bar chart visualizes the distribution of fruit ratings across six categories, from “below 4.0” to “above 8.0.” Each horizontal bar represents a fruit, with segments colored by rating category and proportional widths indicating percentages. Built with D3 v7, the example uses `d3.stack()` for data transformation, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. It loads CSV data from a local file, renders SVG, and adds interactive tooltips on mouseover, styled with CSS.

Kkartheekgrpt@gmail.com
85% match
Loading thumbnail…

Activity6_Task2.1

This example shows a stacked horizontal bar chart comparing the percentage distribution of vegetable ratings across six categories, from “below 4.0” to “above 8.0.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, with `d3.scaleOrdinal()` for color mapping and `d3.scaleBand()` for the vegetable categories. Each bar segment displays a tooltip on mouseover, showing the exact rating percentage. The chart loads data from a CSV file and renders as SVG, with axes and labels styled via external CSS.

Ssumanthnaidu213@gmail.com
85% match
Loading thumbnail…

activity_6 question2

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.

HHarinathChakali33@gmail.com
85% match
Loading thumbnail…

activity-6-a-2

A stacked bar chart shows the distribution of food ratings across five categories, from "Below 5.0" to "Above 8.5," for six food items. Each bar segment’s length encodes the proportion of ratings, with hover interactions displaying exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles, with data loaded from a CSV file and a custom color scale mapping each rating category.

SSathishvepuri143@gmail.com
84% match
Loading thumbnail…

Activity6_Question3

This example shows a stacked horizontal bar chart comparing the percentage of ratings (from below 4.0 to above 8.0) for six different vegetables, with each segment colored by rating category. It uses d3.stack to transform the CSV data into stacked series and d3.scaleOrdinal for color mapping. The visualization relies on d3.axisLeft and d3.axisBottom for axes, while custom mouseover events trigger opacity changes and a tooltip displaying the exact percentage for each segment. The chart renders as SVG with axes and labels styled via external CSS.

UUday Vandanapu
84% match
Loading thumbnail…

Activity6_Task2_Q2

This stacked bar chart visualizes fruit sales across multiple years, using horizontal segments to compare totals for Apple, Orange, Mango, and kiwi from 2018 to 2021. The chart displays the proportional contribution of each fruit per year, with tooltips showing exact sales values on hover. Built with D3 v7, the visualization uses `d3.stack()` and `d3.scaleOrdinal` for color encoding, along with `d3.axisLeft` and `d3.axisBottom` for axes. Data originates from an embedded CSV file, rendered as SVG elements.

PPothuguntla Pranitha
84% match