Skip to main content
SimilarExport ZIP
100%

Assignment 3 - Interactive Stacked Bar Chart

✓ Published2🌍 Public
TTony Mai
Last edited Mar 19, 2026
Created on Mar 18, 2026

This interactive stacked bar chart visualizes daily activity intensity for multiple users, sourced from Fitbit data in `dailyIntensities_merged.csv`. A dropdown menu switches between users, displaying four stacked segments—inactive, light, moderate, and intense activity—as proportions of a 1440-minute day. Built with ECharts 5.3.2, it uses the `bar` series with `stack: 'total'` for the bars, and adds translucent connecting polygons between adjacent bars via the `type: 'polygon'` element to highlight temporal transitions.

AI-generated description
MIT Licensed

Similar vizzes

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

Assignment 3 - Scatter Plot with Linear Regression

This interactive visualization uses ECharts and the ecStat regression API to plot hourly step counts against calories burned for individual users from a Fitbit dataset. A dropdown menu switches between 33 users, each rendering a scatter plot with a linear regression line overlaid. The regression transform is applied via `ecStat.transform.regression`, while the chart itself loads data from a CSV file and updates dynamically through a change event listener.

TTony Mai
74% match
Loading thumbnail…

Interactive Barchart

This interactive bar chart displays the volume of user behavior activity across 24 hours for a selected date. A dropdown menu allows the user to choose from unique dates in the dataset, triggering a smooth transition animation as bars grow to their new heights. The chart is rendered as SVG using D3 version 7, with bars that respond to mouse hover by dimming others and showing a tooltip with the hour and activity count. The code leverages D3's `transition` API, `join` for updating marks, and custom `menu` and `interactiveBar` modules, pulling data from a CSV file hosted on GitHub.

CChenYb9807
74% match
Loading thumbnail…

Activity 6_Task 2_Question

This stacked horizontal bar chart shows the proportional distribution of participation across seven fitness class types, broken down into five intensity levels from “Very Low” to “Very High.” The bars are color-coded by intensity, with tooltips revealing exact percentages on hover. The visualization uses D3’s stack function to build the segments, scaleLinear for the x-axis, scaleBand for the y-axis, and d3.format to render percentages, all drawn as SVG elements within a simple HTML page.

Sshettisowmya01@gmail.com
73% match
Loading thumbnail…

Stacked-bar with own data

A stacked bar chart visualizes the total distance of physical activities per year, with bars segmented by sport type (Run, Ride, Walk, and Hike combined). The chart uses an SVG rendering pipeline with D3 v7’s `d3.csv` for data loading, `d3.group` and `reduce` for aggregation, and `d3.stack` to compute stack offsets. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a categorical `d3.scaleOrdinal` assigns colors to the four activity categories. The data originates from a personal fitness tracking CSV, with distances converted from meters to kilometers.

GGabriel Ing
72% match
Loading thumbnail…

Fork of Fork of Fork of ECharts 2

A single-axis scatterplot shows one user's hourly step counts and total intensity across Tuesday hours for one week, using ECharts 5.3.2. Each point’s x-position is the hour, and the symbol size encodes step total. The chart filters a CSV dataset of Fitbit activity to a hard-coded user ID and date range, then maps intensity values to point size. Data is loaded via `fetch` and parsed manually, with chart configuration built from `title`, `singleAxis`, and `series` arrays.

TTony Mai
72% match
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
72% 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
72% match