Skip to main content
SimilarExport ZIP
100%

Activity 7-Q 1

✓ Published1🌍 Public
Ttallapanenisahithi@gmail.com
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from Activity6_task 3

This example displays the distribution of chocolate sales percentages across eight chocolate types using a pie chart with a manually constructed legend and axis labels. It loads sales data from a remote CSV file and renders the chart as an SVG using D3 v6. The code uses `d3.csv` to fetch data, `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` to assign colors to each chocolate type. A static legend lists each type alongside its percentage, while text labels are placed at arc centroids.

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_Question1_PieChart

This pie chart visualizes chocolate sales by product for March, sourced from a CSV file hosted on GitHub. It uses D3.js to load and filter the data, calculating total sales per product with `d3.rollup` and `d3.sum`. The chart is drawn with `d3.pie()` and `d3.arc()`, while an ordinal color scale maps product names to a blue interpolated palette. A custom legend displays each product alongside its percentage of total sales, rendered as an SVG with a flexible HTML layout.

DDee
85% match
Loading thumbnail…

Activity7.1_Question1

This visualization shows fruit sales data as a pie chart with a legend and axis labels, comparing sales across five fruit types. It loads data from a CSV file via `d3.csv`, then uses `d3.pie()` and `d3.arc()` to generate SVG paths for each slice. A `d3.scaleOrdinal` with `d3.schemeCategory10` colors the arcs, and the chart is rendered as an SVG in a 600x400 viewport. The markup is created with D3 v7 selections and appends.

Vvidyagangasani@my.unt.edu
85% match
Loading thumbnail…

Activity 7-Q 2

This stacked area chart visualizes monthly sales volumes across eight chocolate types—including Dark, Milk, White, Ruby, Vegan, Caramel, Hazelnut, and Almond—using a color-coded legend. The visualization loads CSV data from a GitHub repository via `d3.csv`, then applies `d3.stack` with `.keys` and `d3.area` to generate layered SVG paths. It scales the x-axis with `d3.scaleBand` for months and the y-axis with `d3.scaleLinear` for total counts, while `d3.axisBottom` and `d3.axisLeft` render the labeled axes.

Ttallapanenisahithi@gmail.com
85% match
Loading thumbnail…

Activity 7_question1

This example shows a donut chart of categorical sales data, with each slice labeled by category and a legend on the left. Hovering over a slice displays a tooltip with the percentage share of the total sales. The code uses D3 v7 with `d3.pie` and `d3.arc` to generate the pie geometry, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Data is loaded as CSV from a GitHub gist, and the SVG is rendered with a centered group and a 200-pixel right margin for the legend.

Vvenkatdinesh5010@gmail.com
84% match
Loading thumbnail…

Activity 7.1

This pie chart displays the distribution of fruit quantities sold, with each slice representing a fruit type and labeled with its percentage of total sales. The visualization loads CSV data from a GitHub repository, converts the "Quantity Sold" field to numeric values, and uses D3.js v7's `d3.pie()` and `d3.arc()` generators to create the SVG arcs. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) assigns distinct colors to each fruit, while percentage labels are positioned using `arc.centroid()`. A custom HTML legend below the chart maps each color swatch to its corresponding fruit name.

NNagalakshmi Thota
84% match
Loading thumbnail…

Activity-7 q-1

A pie chart displays the distribution of sales counts across different brands, with each slice labeled and colored uniquely. The chart is rendered as an SVG using D3.js v7, with data loaded from a CSV file via `d3.csv` and aggregated using `d3.rollup`. Slices are generated with `d3.pie`, and a legend positioned to the right shows brand color mappings. Hover tooltips are not implemented, but static labels and a Tableau10 color scheme provide clarity.

Bbhargavireddy4016@gmail.com
84% match
Loading thumbnail…

Activity 7 Q1

This example shows a pie chart that visualizes categorical data loaded from a remote CSV file, with each slice colored using a categorical color scale and a legend pairing colors with category and subcategory labels. The chart is rendered as SVG using D3.js v6, where the `d3.pie()` generator computes slice angles and `d3.arc()` creates the path shapes. Data is fetched via `d3.csv`, and the color mapping uses `d3.scaleOrdinal` with `d3.schemeCategory10`. The code also adds axis labels (X and Y) that are not tied to the pie chart, acting as placeholders within the SVG layout.

Vvishnutejareddyambati@my.unt.edu
83% match
Loading thumbnail…

Activity 7_question1

A pie chart displays categorical sales proportions, with each slice labeled and colored by category. Hovering over a slice reveals an HTML tooltip showing the percentage of total sales. The visualization is built with D3 version 7, using the `d3.pie()` layout and `d3.arc()` generator to create slice paths. It loads CSV data from a GitHub Gist via `d3.json()`, applies an ordinal color scale, and includes a custom legend. An SVG canvas renders all marks, while tooltip positioning tracks mouse coordinates.

Ddivya.matavalam828@gmail.com
83% match