Skip to main content
SimilarExport ZIP
100%

Activity 7 Question 1

✓ Published0🌍 Public
Vvemulasai306@gmail.com
Last edited Nov 5, 2024
Created on Nov 5, 2024
Forked from Hello VizHub

This example visualizes the distribution of grocery item prices by category as a pie chart, with a text legend displaying each category’s total dollar value. It loads a CSV dataset from a GitHub gist, aggregates prices per category using `d3.rollup` and `d3.sum`, and renders the chart with `d3.pie`, `d3.arc`, and an ordinal color scale (`d3.scaleOrdinal`). The SVG is drawn via D3 v6, and the legend is built as styled HTML divs, with data fetched asynchronously through `d3.csv`.

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…

Activity-7_Question-1

This D3.js v7 example presents a pie chart visualizing gadget prices, with each slice labeled by name and a corresponding on-screen legend. A CSV dataset from a GitHub gist supplies the data, which drives a color-coded categorical scale. Segments are rendered as SVG paths, and hovering over a slice triggers a tooltip displaying the item name and price. The legend is built from rendered SVG rectangles, providing a static key alongside the animated chart interactivity.

Rrahul.bonu524@gmail.com
87% match
Loading thumbnail…

Activity 7 Question 1

This visualization shows the sales distribution by product as a pie chart, with each slice sized proportionally to the total sales for that product. The code loads a CSV file from a GitHub repository using `d3.csv`, then groups and aggregates the data with `d3.rollup` and `d3.sum`. It renders the pie chart using `d3.pie` and `d3.arc` paths, colors slices with `d3.scaleOrdinal` and the Tableau 10 color scheme, and adds a legend with product names and colored swatches. The chart is drawn as an SVG with white slice strokes and labels positioned at slice centroids.

Ddivya.matavalam828@gmail.com
86% match
Loading thumbnail…

Activity 7 Question 1

This example shows a classic pie chart built with D3.js, where each slice represents a category from a CSV dataset loaded remotely via `d3.csv`. The chart uses an ordinal color scale, and a legend lists each category alongside its subcategory. The code generates SVG paths with the `d3.arc` and `d3.pie` generators, and includes placeholder axis labels despite being a pie chart. The visualization renders entirely in SVG, with the legend placed to the right of the chart and a white stroke separating each slice.

Ccharanshiva769@gmail.com
86% match
Loading thumbnail…

Activity7_Question1

This example visualizes monthly spending across six selected expense categories—Electronics, Groceries, Travel, Dining Out, Healthcare, and Utilities—as a pie chart. The code loads CSV data via d3.csv, filters the records, and renders SVG slices using d3.arc and d3.pie. A d3.scaleOrdinal with schemeCategory10 assigns colors, while each slice includes a white label and a legend is drawn alongside. The chart is built as a reusable function pieChart, with axis-style labels added for context.

Ssjannaikode@gmail.com
86% match
Loading thumbnail…

Activity 7 Question 1

This visualization shows a pie chart of fruit quantities, with each slice labeled by fruit name and a color-coded legend on the left. It uses D3 v7 to load CSV data from a GitHub gist, calculating the arc paths with `d3.pie` and `d3.arc`. The chart includes fake X and Y axis labels for display, and text elements are positioned using `arc.centroid`. Colors come from `d3.scaleOrdinal` with `schemeCategory10`.

MMahimaChowdaryKasthala@my.unt.edu
86% match
Loading thumbnail…

Activity 7.1 Question 1

This pie chart visualizes product sales data, displaying the proportional share of each product category as a colored slice with corresponding legend labels and percentage values. The chart loads CSV data from a GitHub gist via `d3.csv` and renders it using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` assigning category colors. Legends are appended as SVG groups, showing category names and computed percentages, while the total sales value is calculated by summing the numeric `Value` field from the dataset.

MMandadi Nishita
85% match
Loading thumbnail…

Question-1_Activity7.1

A pie chart displays the distribution of sales counts across product categories, with each slice labeled in thousands and a corresponding legend showing category names and values. The visualization loads CSV data from a GitHub gist and uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate SVG paths and text elements. Colors are assigned via an ordinal scale mapping categories to a fixed array of named colors, and the chart is centered within an SVG canvas with legends positioned to the right.

Ppreethimedepalli4@gmail.com
85% match
Loading thumbnail…

Question 1 of Activity 7.1

This pie chart visualizes household expenditures by product category, with each slice labeled and connected to its corresponding value via an arrow line. The chart uses D3.js v7’s `d3.pie` and `d3.arc` generators to compute slice angles and paths, while `outerArc` and polylines position labels outside the circle. Data is loaded from a CSV file hosted on GitHub Gist. A legend, built with appended SVG rects and text, maps colors to categories, and `d3.scaleOrdinal` with `schemeCategory10` assigns categorical colors.

Kkrishi7079@gmail.com
84% match