Activity_Tutorial_3.1

100%

Activity_Tutorial_3.1

✓ Published0🌍 Public

Last edited Mar 31, 2025

Created on Mar 31, 2025

This stacked bar chart displays mobile operating system market share percentages across five global regions, with colored segments for Android, iOS, and Other. Each region’s horizontal bar spans from 0 to 100 percent, and hovering over a segment reveals its exact value via a tooltip. The visualization uses D3 v7’s `d3.stack()` to transform the CSV data, `d3.scaleBand` for region positioning, `d3.scaleLinear` for percentages, and `d3.schemeSet2` for categorical colors. SVG rendering handles the axes, while mouse events update tooltip opacity and content.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_Tutorial2_Q2

This stacked bar chart visualizes mobile operating system market share (Android, iOS, and Other) across five global regions, with horizontal bars showing percentage values that sum to 100%. Interactive tooltips display exact numeric values on hover. The visualization uses D3 v7’s `d3.stack()` to compute layered data, `d3.scaleBand()` for categorical y-axis positioning, `d3.scaleLinear()` for percentage scaling, and `d3.scaleOrdinal()` with `d3.schemeSet2` for coloring. Bars render as SVG rectangles within a grouped `<g>` element, with data loaded from a CSV file specifying regional OS percentages.

Cchowdaryhemanth14@gmail.com

97% match

Loading thumbnail…

Activity6_Question2

This visualization presents a stacked bar chart of mobile operating system market share across five global regions, with Android, iOS, and Other segments summing to 100% per region. It uses D3 v7 to load CSV data via `d3.csv`, stack series with `d3.stack`, and scale values with `d3.scaleLinear` and `d3.scaleBand`. Rectangles are colored using `d3.schemeSet2`, and hover interactions display segment percentages through a custom tooltip. The SVG rendering features labeled axes with percentage tick formatting.

Kkandooriabhiram@gmail.com

91% match

Loading thumbnail…

Activity6_Question - 2

A horizontal stacked bar chart displays global smartphone market share across six countries, with each bar segmented by manufacturer (Apple, Samsung, Xiaomi, Oppo, Vivo, Others) and encoded in color via `d3.scaleOrdinal`. Built with d3.v7 and SVG, the visualization uses `d3.stack()` to compute cumulative segment positions, `d3.scaleLinear` for the share axis, and `d3.scaleBand` for country grouping. Interactive tooltips, styled in CSS, reveal precise percentages on mouseover, while the data originates from the embedded `data.csv` file.

NNitish Thotakura

83% match

Loading thumbnail…

Activity6_Q2.3

This stacked bar chart visualizes the distribution of smartphone sales across five price categories for ten brands, with each bar normalized to show proportions of total sales. The D3.js v7 code loads data from a CSV file and renders an SVG visualization, using `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.axisBottom()` with percentage tick formatting. Interactive tooltips display the exact percentage for each segment on hover, while a legend identifies the color-coded categories.

MMeghana Sadhu

82% match

Loading thumbnail…

Activity6_Question2

This stacked bar chart shows the percentage of device usage (Mobile, Laptop, Tablet, TV) across five age groups, from 10-20 to 51+. The visualization uses D3 v7 with `d3.scaleOrdinal` for color encoding, `d3.scaleLinear` for the percentage x-axis, and `d3.scaleBand` for the age-group y-axis. Interactive tooltips appear on hover via the `mouseover`, `mousemove`, and `mouseout` events, displaying the exact percentage for each device segment. Data is loaded from a CSV file, and the chart is rendered as an SVG with a legend positioned to the right.

Mmohanalaharic@gmail.com

81% match

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage of internet usage across five age groups, segmented by region, with each bar normalized to 100%. The visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color encoding, mapping regions to distinct hues. Interactive tooltips appear on hover, displaying the precise percentage for each region-age combination using `d3.format('.2f')`. The chart leverages `d3.axisBottom` and `d3.axisLeft` with SVG rendering, reading from a `data.csv` file that contains proportional usage values for North America, Europe, Asia, Africa, and South America.

Ggoudrohit2000@gmail.com

80% 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

80% match

Loading thumbnail…

Activity6 Q 2.3

This stacked bar chart shows sales figures for laptops, phones, and tablets across five retail stores, with each store represented as a horizontal bar broken into three colored segments. The visualization uses d3.stack() to process the CSV data, d3.scaleLinear and d3.scaleBand for positioning, and an ordinal color scale for categories. Interactive tooltips appear on mouseover, displaying exact sales values via a custom HTML div, while the SVG rendering includes axis labels and a legend.

RRukmini Devi Y

79% match