Skip to main content
SimilarExport ZIP
100%

Assignment2Question 1

✓ Published0🌍 Public
KKondreddy Saikiran reddy
Last edited Apr 9, 2024
Created on Apr 7, 2024

An interactive pie chart visualizes US retail sales data for toys in 2023, sourced from a CSV file. The chart displays the proportional sales of different toy categories, using a color legend and a hover tooltip to show exact sales figures and percentages for each slice. Built with D3.js v7, the visualization uses `d3.pie` to compute arc data, `d3.arc` to generate path geometries, and SVG for rendering. The legend and chart are positioned side-by-side, with animations providing hover feedback and tooltip transitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment2Question 1

This example visualizes 2023 sales data for different product categories as an interactive pie chart, paired with a color-coded legend. Using D3.js (v7), it loads CSV data via the `d3.csv` method and renders the chart with `d3.pie` and `d3.arc`. The chart employs a categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) for slices and legend items. Hover interactions display a tooltip showing the sales value in billions, with transitions controlling tooltip opacity. The layout places the legend on the left and the pie chart on the right within separate SVG containers.

KKondreddy Saikiran reddy
88% match
Loading thumbnail…

Assignment2Question1

A pie chart displays the sales distribution of electronic items in 2023, with each slice labeled by category and value. The chart uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG arcs. Data is fetched as CSV from a GitHub repository, parsed with a custom function, and rendered with a corresponding HTML legend.

Gganesh.hns48@gmail.com
85% match
Loading thumbnail…

Assignment2 Question1

A pie chart visualizes sales distribution across five product categories, with each slice labeled and sized proportionally to its sales value. The chart uses D3.js v7 with SVG rendering, employing `d3.pie` to compute arc angles and `d3.arc` to generate the paths. A color ordinal scale assigns distinct hues to categories, while an accompanying legend lists each category with its exact sales figure. The data is loaded from a local array, matching the sample dataset, and the visualization centers the pie within a 600x500 SVG canvas.

Ppslharika@gmail.com
83% match
Loading thumbnail…

Assignment2-Question1

This example presents a pie chart visualizing sales distribution by item category, with each slice labeled by category and total sales amount. The chart is rendered as an SVG within an HTML page. It loads data from a remote CSV file and aggregates it using `d3.rollups` and `d3.sum`. The visualization is built with D3 v6, using `d3.pie` for the arc geometry, `d3.arc` for paths and label positioning, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. A legend and title/subtitle are also included.

SSaiKiranReddyKancharla@my.unt.edu
82% match
Loading thumbnail…

Question1

This pie chart visualizes the sales quantities of electronics item categories for 2022, with each slice labeled directly and a legend detailing category names and quantities. The visualization is built using D3.js v7 with SVG rendering, employing the `d3.pie()` generator and `d3.arc()` to create the chart, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors. Data is fetched from a remote CSV file hosted on GitHub Gists and parsed manually. Arcs and labels are positioned using centroid calculations, with a flexbox layout placing the legend to the right.

Tthakurnikhitha4@gmail.com
81% match
Loading thumbnail…

Assignment 2 Question1

This pie chart visualizes genre distribution from survey data, showing the proportion of responses in the "Less than 3" category. The code loads CSV data from a GitHub repository and uses d3.pie and d3.arc to generate SVG path segments, with d3.scaleOrdinal assigning colors to genres. Interactive hover tooltips appear via appended title elements, and the chart includes a legend and percentage labels positioned at arc centroids. The visualization renders as a static SVG with D3 v7, totaling 600×600 pixels.

Mmeghna.reddy700@gmail.com
80% match
Loading thumbnail…

Question1

This pie chart visualizes product sales distribution, with each slice sized proportionally to its revenue share and a corresponding legend displaying category names and percentage values. The chart uses d3.pie and d3.arc to generate the SVG paths, with a scaleOrdinal color scale assigning distinct hues to each segment. Data is loaded asynchronously from a CSV via d3.csv, and percentage labels are formatted with d3.format. The total sum of all values is calculated to compute each category’s share.

MMandadi Nishita
80% match
Loading thumbnail…

Question 1

This pie chart visualizes fruit sales data, displaying the proportional share of each fruit category as a labeled slice with a corresponding legend. The chart is rendered as an SVG using D3 version 7, with the pie generator `d3.pie()` and arc generator `d3.arc()` calculating angular extents and centroids for labels. Data is loaded via `d3.csv` from a remote Gist, and the color scale `d3.scaleOrdinal` with `d3.schemeSet2` assigns categorical colors. The legend is built using `d3.select` and `enter()`, while sales values are cast to numeric type before creating the pie layout.

Tthokalarohith83@gmail.com
80% match