Skip to main content
SimilarExport ZIP
100%

Activity-7_Question-1

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-7.1

This animated pie chart visualizes the price distribution of gadgets from a CSV file, with each segment labeled and a corresponding color-coded legend. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, rendering SVG paths and text elements. Interactive tooltips appear on mouseover, displaying the gadget name and price. The chart is generated within an 800×500 SVG canvas, with the legend positioned separately and arcs animated from the center.

SSiva Kishore Reddy
88% 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
87% match
Loading thumbnail…

Activity 7 Question 1

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`.

Vvemulasai306@gmail.com
87% 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
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…

Activity 7.1 Question 1

This example shows a pie chart of product sales aggregated by category, with animated slices that grow into place using a transition. It uses D3.js v7 to load data from a CSV file hosted on GitHub Gist, aggregate sales with `d3.rollup`, and generate pie slices via `d3.pie` and `d3.arc`. Labels are placed outside the slices with connecting polylines, and a legend is appended. The animation relies on `transition.attrTween` with an interpolated arc.

MMandadi Nishita
85% match
Loading thumbnail…

Task - 9&10 - Q1)

This D3.js v7 visualization displays the prices of various gadgets as an interactive pie chart with a legend. It uses `d3.pie` and `d3.arc` to compute the chart geometry, with categorical colors from `d3.schemeCategory10` via `d3.scaleOrdinal`. Hovering over a slice reveals a tooltip showing the gadget name and price, and each slice is labeled with its corresponding name. Data is loaded from a remote CSV file using `d3.csv`. The chart is rendered as SVG, with the legend positioned separately using `d3.select` and appended HTML elements.

Mmulyasuji999@gmail.com
85% 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
85% match