Skip to main content
SimilarExport ZIP
100%

Task8_Question2

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

A stacked bar chart displays the hours seven people spend across six hobbies—Outdoors, Indoors, Reading, Shopping, Fitness, and Travel—using a diverging color palette. The horizontal bars encode total hours per person, segmented by hobby, with a tooltip revealing exact values on hover. The visualization is rendered with D3 v7, using `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to construct the chart, while `.on('mouseover')` events manage a custom tooltip. Data is loaded from a CSV file, and the SVG output is styled with custom fonts and a soft background.

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…

Task8_Tutorial2

A stacked bar chart displays the daily time allocation for five people across categories like work, exercise, and leisure, with each bar segmented by activity and scaled from 0 to 24 hours. The chart uses D3 v7’s `d3.stack` to compute the stacked series, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for axes. SVG rectangles render the segments, with mouseover effects and a tooltip, while the data comes from an inline CSV file with genres as rows and activities as columns.

Ppogirimayoor@gmail.com
86% match
Loading thumbnail…

Task8_tutorial2

This visualization displays the daily hours spent by five people across five activity categories—work, exercise, socializing, chores, and leisure—as a stacked horizontal bar chart. The chart uses a linear x-axis for hours (0–24) and a categorical y-axis for each person, with interactive tooltips showing percentage values on hover. The example employs D3 v7’s `d3.stack` for data stacking, `d3.scaleBand` for the categorical axis, `d3.scaleOrdinal` for category colors, and SVG rendering with custom CSS for styling.

Ppogirimayoor@gmail.com
85% match
Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart, titled "Time Spent on Daily Activities," visualizes the proportional distribution of time across five categories for ten daily activities. Each bar represents an activity, with colored segments showing the percentage of time spent in categories like "less than 1 hour" to "more than 6 hours". The visualization uses D3 v7 with an SVG rendering approach, employing `d3.stack()` to generate the stacked data and `d3.scaleOrdinal` for color mapping. Interactive tooltips display exact percentages on hover, built with D3 event handlers and HTML div elements.

Aamanipeddolla@my.unt.edu
82% match
Loading thumbnail…

activity 6_task_2

This stacked bar chart shows the daily time allocation for five life stages—children, adolescents, young adults, middle-aged, and elderly—across categories such as sleep, work/study, entertainment, outdoor activities, and meditation. Each bar segment represents a category’s duration in minutes, with a tooltip revealing exact values on hover. Built with D3 v7, the visualization uses d3.stack() to aggregate the data, d3.scaleBand() for the y-axis, and d3.scaleLinear() for the x-axis, rendering SVG rectangles. Styling leverages CSS for typography and axis formatting, with a custom tooltip div for interactivity.

Ssairohithchada@gmail.com
82% match
Loading thumbnail…

task 8 question 2.2

A stacked horizontal bar chart shows the proportion of ratings (below 4, 4-5, 5-6, 6-7, 7-8, above 8) for six food categories, with each bar segmented by rating range. The visualization uses D3.js v7 with SVG rendering, employing d3.stack() to aggregate the data, d3.scaleBand() for the category axis, d3.scaleLinear() for the percentage axis, and d3.scaleOrdinal() for color encoding. Interactive tooltips display the exact percentage of each rating segment on hover, using event listeners and d3.format() to present values. The data is loaded from a CSV file containing pre-computed proportions.

Vvchittimadha@gmail.com
80% match
Loading thumbnail…

Activity6_Task2_Question_2

A stacked bar chart displays monthly sales totals for Electronics, Clothing, and Groceries across six months. Each bar segment represents a category’s contribution, with tooltips revealing exact values on hover and a color-coded legend identifying series. Using D3 v7, the visualization loads CSV data via `d3.csv`, constructs stacked series with `d3.stack()`, and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear through mouse events, while axes and legend are generated with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`.

Aadityatrip9899@gmail.com
80% match
Loading thumbnail…

Task8_Question2

This visualization presents a stacked bar chart displaying patient details, with each bar representing a patient and segments showing the percentage contribution of different attributes such as age, weight, and height. The chart uses a horizontal layout, with bars stacked by category and color-coded via a scaleOrdinal palette. Hovering over a segment reveals a tooltip with the exact percentage value for that category. The implementation uses d3.v7's stack, scaleLinear, and scaleBand APIs, rendering as SVG with data loaded from Patientdata.csv, and includes interactivity through mouseover events.

KKeerthi
79% match
Loading thumbnail…

Q1Task2

A horizontal stacked bar chart displays the proportional breakdown of five rating categories for six named categories, sourced from a local CSV. The implementation uses D3 v7's `d3.stack` and `d3.scaleOrdinal` to generate SVG rectangles, with `d3.axisBottom` and `d3.axisLeft` for scales. Hover interactions reveal per-segment percentages via an HTML tooltip, while a color scale and axis labels clarify the distribution.

Vvaishalireddy55555@gmail.com
79% match