Skip to main content
SimilarExport ZIP
100%

Activity 7.1 Q1

✓ Published0🌍 Public
Kkesava
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from Hello VizHub

This example visualizes total daily minutes spent on various social media platforms as a pie chart. It loads data from a CSV file hosted on GitHub, processes it by summing the `Daily_Minutes_Spent` per `App`, and renders SVG paths using `d3.pie` and `d3.arc`. A legend is added with colored rectangles and labels. The code specifically uses D3 v5 APIs such as `select`, `csv`, `scaleOrdinal`, and the pie/arc generators.

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…

Activity7.1_Qustn 1

This pie chart visualizes average hours spent per week on various social media platforms, sourced from a CSV file loaded with `d3.csv`. It uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG slices and a color scale. Labels and connector polylines are positioned via `arc.centroid` and `outerArc.centroid`. Clicking a slice updates an HTML div with platform-specific details, while a legend lists all platforms.

PPreethamreddyannavaram@my.unt.edu
89% match
Loading thumbnail…

Activity7_Q1

This pie chart shows the percentage distribution of the most-used social media platforms, with each slice labeled by its percentage value and a color-coded legend listing platform names. The visualization is built with D3 v5, using d3.pie and d3.arc to generate the segments, d3.scaleOrdinal to assign categorical colors, and d3.format to display numeric labels. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering positions the chart and legend within a fixed 960x500 viewport.

YYeruva Snehith Reddy
85% match
Loading thumbnail…

Fork of Activity7.1_Qustn 1

This example shows an extended donut chart of social media platform usage, displaying the average hours per week spent on each platform as pie slices with labeled leader lines and a dynamic legend. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to generate the slices from CSV data loaded via `d3.csv`, with `d3.scaleOrdinal` assigning categorical colors. Outer arc centroid positions and a custom `midAngle` function compute label placement, while connector polylines and text elements are appended directly to an SVG canvas. The legend is built dynamically by iterating over the data, with each row containing a colored rectangle and platform label.

NNita
83% match
Loading thumbnail…

Activity 7 Q1

This pie chart visualizes spending categories by percentage, with each slice colored via a categorical color scale and labeled through an interactive legend. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to compute and render the arcs, while `d3.csv` loads the dataset from a GitHub repository. SVG rendering displays the chart, with legend items and axis labels positioned manually. The color scale employs `d3.scaleOrdinal` with `d3.schemeSet2`, and slice strokes are styled white for separation, though axis labels are placeholders rather than computed scales.

Aanisha.peddireddy@gmail.com
83% match
Loading thumbnail…

Activity 7_Q1

A pie chart displays the proportional spending across unnamed categories, with each slice color-coded and paired with a legend on the right side. The visualization loads CSV data from a GitHub repository using `d3.csv`, then constructs the chart with `d3.pie()` and `d3.arc()`. Color assignment uses `d3.scaleOrdinal` with the `schemeSet2` range. The SVG is rendered via D3 v7, with slices stroked in white and space reserved for axis labels.

Mmsnikhil2608@gmail.com
82% match
Loading thumbnail…

Activity7.1

A pie chart displays the share of browser usage from a CSV dataset, with each slice labeled by its percentage. The chart uses D3 v7 to load CSV data asynchronously, applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, and renders via SVG. A legend on the right maps color swatches to browser names, while slice texts show the corresponding usage values. The example demonstrates handling remote CSV data, SVG path generation, and legend construction with D3's `select` and `append` methods.

SSiddhardha
81% match
Loading thumbnail…

activity7.1q1

This visualization is a pie chart that shows the distribution of user behavior classes. The data comes from a CSV file linked in the code. The chart uses D3.js version 6.7.0, specifically the `pie`, `arc`, and `select` functions to generate pie slices and display percentage labels for each class. A legend on the right identifies the color coding. The overall title sits below the chart, with an "Activity7.1q1" title in the HTML head.

Ssudheervnarasimha1@gmail.com
81% match
Loading thumbnail…

Activity7.1 Q2

This example shows two distinct data visualizations in one page: an area chart tracking monthly salaries across 2023, and a pie chart displaying browser market shares. The area chart uses D3’s `d3.area` generator with time-scaled axes and explicit axis labels, while the pie chart loads CSV data via `d3.csv`, applies a `d3.pie` layout, and renders arcs with `d3.arc` and a color scale. Both visualizations rely on SVG rendering and D3 v6, with the pie chart adding an interactive legend.

SSiddhardha
80% match