Skip to main content
SimilarExport ZIP
100%

lm_piechart_Task9

✓ Published0🌍 Public
LLokesh Madem
Last edited Apr 21, 2024
Created on Apr 21, 2024

A pie chart visualizes profit distribution across regions, with each slice's area proportional to the region's profit value and labeled in a legend alongside the corresponding profit amount. The chart renders as an SVG using D3 v5 APIs, including `d3.pie()` to compute arc angles, `d3.arc()` to generate path segments, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Data is loaded asynchronously from a remote JSON file provided via GitHub Gist, with profit values parsed as numbers before rendering. The legend maps each color to a region name and its profit value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

LM_Task9&10

This example displays the land area percentage of continents as a pie chart, with a legend listing each continent and a colored swatch. The chart is rendered using D3.js (version 4.2.2) with SVG elements, where slices are generated via `d3.pie` and `d3.arc`. Hovering over a slice triggers a tooltip that shows the region and profit value, using mouse events to position it. The data is fetched from a CSV file hosted on GitHub, and the visualization includes a drop shadow filter applied to the SVG group.

LLokesh Madem
82% match
Loading thumbnail…

Pie Chart

A pie chart displays the proportion of profits for each country in a dataset loaded from a CSV file. The visualization uses D3.js v5, employing the `pie` and `arc` functions to generate the circular segments, which are rendered as SVG paths. A legend, built with SVG `rect` and `text` elements, identifies each country and its corresponding profit value. Color encoding is applied via `scaleOrdinal` with a custom color range, and profit values are formatted as thousands (K) using the `format` function. The chart is titled "Profits in Each Country."

AAlankruthSai
81% match
Loading thumbnail…

Task9_Q1

This pie chart displays the sales distribution for ten product types, ranging from Plushies with 5000 units to Watches with only 30 units. The chart is rendered as an SVG using the D3.js v4 library, with each slice colored via a custom ordinal palette. The code defines a fixed dataset inline, uses `d3.pie()` to compute the arcs, and `d3.arc()` to draw them. A clickable legend is positioned to the right, although the click handler does not implement filtering logic.

Jjyothirmai318@gmail.com
78% match
Loading thumbnail…

Task9-Q1

A pie chart displays the percentage of land area per continent, with a color-coded legend and a hover tooltip that reveals each value. Built with D3.js v4, it uses `d3.pie` and `d3.arc` to generate the SVG paths, `d3.scaleOrdinal` for color mapping, and a custom tooltip that follows the mouse. The chart is resizable and re-renders on window resize. Static data is hardcoded in JavaScript, while the SVG includes a Gaussian blur filter for a subtle shadow effect.

Mmythripopuri2001@gmail.com
78% match
Loading thumbnail…

Task-10

This example displays a pie chart with a side legend, both rendered as SVGs. The D3 pie layout computes arc angles based on the percentage values, while d3.arc generates the path data and d3.schemeTableau10 assigns categorical colors. A second SVG contains the legend with colored rectangles and text labels, and the data is loaded from a remote CSV file.

Bbhargavr016@gmail.com
78% match
Loading thumbnail…

Pie Chart

This example displays a pie chart of sales figures for different companies, with each segment labeled by its proportional value and paired with a legend showing company names and sales totals. The chart is rendered as SVG using D3 v5, with data fetched from a CSV URL. It uses D3’s `pie` and `arc` generators to create the segments, a `scaleOrdinal` to map sales values to a set of predefined colors, and custom text elements to label each slice.

Mmanvithareddykarra
78% match
Loading thumbnail…

Task-9

This visualization shows the top 10 store areas by sales as a pie chart, with each slice labeled by its store area code and corresponding sales value, alongside a legend listing all areas. The code loads a CSV dataset from GitHub, sorts and filters it, then uses d3.pie() and d3.arc() to generate the chart within an SVG canvas. A d3.scaleOrdinal assigns distinct colors to slices, and custom text elements are positioned using arc.centroid(). The legend is built manually with SVG rects and text elements, and axis-like labels for "Store Area" and "Sales" are added as decorative text.

AArungopal Andalam
78% match
Loading thumbnail…

task9&10

This pie chart displays the proportional distribution of fruit quantities from a CSV file, labeling each slice with its fruit name and including a color-coded legend. Built with D3 v7, it uses the `d3.pie` and `d3.arc` generators to compute and render arcs as SVG paths, with `d3.scaleOrdinal` assigning categorical colors. Data is loaded asynchronously via `d3.csv`, and labels are positioned using `arc.centroid`.

HHanuReddy
78% match