Skip to main content
SimilarExport ZIP
100%

CS 360 final project pie charts

✓ Published0🌍 Public
EEmperor-Nathan
Last edited Dec 2, 2022
Created on Nov 29, 2022

This example presents two interactive pie charts that compare English Wikipedia page views by device type (mobile web, mobile app, and desktop) for two selected months. Users can advance the left chart’s month using arrow buttons or an auto-playing animation, while hovering over any slice displays a tooltip with its precise count. The visualization is built with D3.js v4, using `d3.pie` for slice geometry, `d3.arc` for rendering paths, and an ordinal color scale. Data is loaded from a CSV file containing monthly totals from 2016 to 2022.

AI-generated description

This chart shows English Wikipedia views by device type by month. Hover over the pie chart slices to show more information. Click the arrows for the left chart to advance the timeframe, and click "Play animation" to auto-advance.

D3 resources: https://d3-graph-gallery.com/graph/pie_basic.html

MIT Licensed

Similar vizzes

Loading thumbnail…

CS 360 final project line chart

This chart displays monthly Wikipedia pageviews for four language editions (English, Polish, Catalan, and Icelandic) from 2016 to 2022, using a log-scaled y-axis to accommodate their vastly different magnitudes. The visualization uses D3 v7 with SVG rendering, employing `d3.line` with basis curves, `d3.scaleLog`, `d3.scaleTime`, and `d3.axisBottom`/`d3.axisLeft`. Hovering over a path highlights it by dimming others, while clicking toggles a line’s opacity. The data comes from a CSV file with monthly view counts.

EEmperor-Nathan
78% match
Loading thumbnail…

CS 360 final project viz 4

This visualization shows the top three most-viewed English Wikipedia articles per month from December 2015 to October 2022, with gold, silver, and bronze bars for first, second, and third place. Each row represents a month, and bar lengths reflect view counts on a linear scale from zero to 150 million. Hovering over a bar reveals a tooltip with the article title, ranking, and exact view count. The code uses d3.scaleLinear, d3.axisTop, d3.axisBottom, and d3.csv to load the data and render the SVG.

EEmperor-Nathan
74% match
Loading thumbnail…

Mobile_app_usage_piechart

This pie chart visualizes the distribution of mobile app users across five behavior classes—from minimal to addicted users—based on categorical data loaded from a remote CSV. Each slice is colored using `d3.scaleOrdinal` with `d3.schemeSet2`, and the chart animates its initial appearance via `transition.attrTween` with an interpolated arc. Hovering translates slices outward using `arc.centroid`, while percentage labels and a legend clarify proportions. The SVG rendering includes simulated axis labels, and the code relies on `d3.pie`, `d3.arc`, and `d3.rollup` to aggregate counts.

Bbhavyagolla64@gmail.com
72% match
Loading thumbnail…

Pie chart

This pie chart displays browser market share percentages, with each slice colored via a categorical scale and a legend identifying the browser names. It uses D3 v7 with `d3.pie` and `d3.arc` to generate the SVG paths, and `d3.csv` to load the remote dataset. Hovering over a slice reveals a tooltip showing the browser and its exact share, while the chart includes a bold title and white stroke separators between slices.

Vvenkatamanikantavaddi@my.unt.edu
72% match
Loading thumbnail…

Pie chart

The visualization displays two interactive pie charts comparing apple and orange counts across five regions, with a toggleable radio interface to switch datasets. Built with D3.js (v5.16.0), it renders an animated SVG donut chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` color scales. Legends appear as colored dots and labels beside the chart. On dataset change, arcs transition smoothly via `transition.attrTween` with interpolation, and a delayed auto-animation replays the arc tweens every two seconds. Data is loaded asynchronously from `data.json` via `d3.json`.

KKrister
71% match
Loading thumbnail…

user_bheviour_piechart_bhavyagolla

This pie chart visualizes user behavior classes derived from mobile app usage data, categorizing users into five levels from “Minimal User” to “Addicted User.” The visualization loads a CSV dataset via `d3.csv` and uses `d3.rollup` to count occurrences per class, then renders animated SVG slices with `d3.pie` and `d3.arc`. Slice labels display percentages, while hover interactions shift slices outward using `arc.centroid` and `transition.attrTween`. A legend with `d3.scaleOrdinal` and `d3.schemeSet2` maps colors to behavioral categories.

Bbhavyagolla64@gmail.com
71% match
Loading thumbnail…

CS 725 Information Visualization - VI5

This example presents animated pie charts that cycle through workforce gender data for seven tech companies, contrasting against a static stacked bar chart rendering of the same dataset. The pie chart animation relies on button clicks to advance through companies, forcing users to rely on memory for comparisons. The stacked bar chart uses `barplot` in R to enable direct, length-based comparisons with lower cognitive load. Data originates from a USA Today report on Apple's diversity statistics, and the code utilizes D3.js for the SVG pie chart and R for the bar chart.

CChristosT
71% match
Loading thumbnail…

Pie chart Test

This example shows a simple pie chart of browser usage, displaying four labeled slices with a legend-like color scale. The visualization is rendered as an SVG element using D3 v6, with data hardcoded in the script rather than loaded from the CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal` for color mapping. Each slice includes a text label positioned via `label.centroid()`. The chart is centered on the page using CSS transforms.

VVeerle
71% match