Skip to main content
SimilarExport ZIP
100%

tutorial

✓ Published0🌍 Public
Nnishwitha.1032@gmail.com
Last edited Nov 1, 2024
Created on Nov 1, 2024

This example shows the distribution of highway fuel efficiency across car brands as a pie chart. Each slice is labeled with the brand name and its corresponding percentage of highway MPG. The visualization loads CSV data from a GitHub repository and uses D3’s `pie` and `arc` generators to create the slices, with `scaleOrdinal` assigning colors per brand. Labels are positioned using `arcGenerator.centroid`, and the SVG is centered within the viewport.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity7_question1

This example shows the distribution of highway MPG percentages across car brands using a pie chart, with each brand's name and percentage labeled directly on its corresponding slice. It loads CSV data from a GitHub repository, parses the numeric fields, and generates the pie layout with d3.pie() while rendering arcs via d3.arc() on an SVG canvas. React components define the axes and marks for an additional bar chart, though the main visualization uses D3’s scaleOrdinal for categorical colors and joins data to path and text elements. The chart is titled and styled using inline SVG attributes and CSS classes.

Nnishwitha.1032@gmail.com
84% match
Loading thumbnail…

Pie Chart

A pie chart displays automobile sales proportions for different car brands, with each slice labeled by percentage and accompanied by a legend showing brand names and their corresponding sales shares. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, with `scaleOrdinal` assigning colors from a predefined palette. Data is loaded as CSV from a GitHub repository, and the chart renders as SVG with custom styled text and legends.

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

ice7_task2_1

This example shows the distribution of car brands in a dataset as a pie chart, with each slice labeled by brand name and its percentage of the total. The visualization loads data from a remote CSV file using `d3.csv` with `d3.autoType`, then aggregates counts per brand via `d3.rollups`. It computes slice geometry with `d3.pie` and renders the arcs using `d3.arc`, applying a categorical color scale with `d3.scaleOrdinal` and `d3.schemeTableau10`. A manual legend lists the brands, using SVG groups and rectangles.

Kkmohithkumar7@gmail.com
80% match
Loading thumbnail…

Fork of Pie Chart

This D3.js example visualizes 2022 US auto sales by brand as a pie chart, displaying each brand's market share as a percentage and total sales in thousands. The chart uses D3's `pie` function to compute arc segments, `arc` to render the paths, and `scaleOrdinal` to assign a custom color palette. The visualization is drawn as SVG, with a legend showing brand names, market share percentages, and sales volumes. The data is loaded from a CSV file hosted on GitHub Gist using D3's `csv` method.

Eeravellisaimeghana
80% match
Loading thumbnail…

Actvity 7.1.1

This pie chart depicts the distribution of car models by brand, aggregated from a CSV file of individual car records. The visualization uses D3 v5 to generate SVG arcs, with an interactive tooltip revealing each brand's model count and percentage on hover. A legend displaying brand names, color swatches, and formatted model counts accompanies the chart, and the code explicitly uses `d3.pie`, `d3.arc`, `scaleOrdinal`, and `schemeCategory10` for rendering and color assignment.

Yyadlapallisaisathvik@gmail.com
80% match
Loading thumbnail…

Fork of Pie Chart

This example displays 2022 US auto sales by brand as a pie chart, with each slice’s color, percentage, and total sales in thousands labeled in a legend. It loads CSV data from a Gist URL using `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` assigning colors. The legend, built with SVG rectangles and text, shows each brand’s name, percentage of total sales, and absolute count. The chart is rendered synchronously in SVG within a static HTML page, with styling defined in an external CSS file.

RRahulSai05
80% match
Loading thumbnail…

Fork of Pie Chart

This example shows the 2022 U.S. auto sales distribution by brand as a pie chart with a color-coded legend listing each brand’s percentage and sales volume. It loads CSV data from a GitHub Gist using `d3.csv` and renders the chart with SVG. The chart uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for colors, and `d3.format` for tick labels, with legends built manually via appended SVG groups.

KKiran Jyothi Bodduluri-11604571
79% match
Loading thumbnail…

Activity 7.1-1

This example shows a pie chart of car sales by brand, using a dataset loaded from a GitHub-hosted CSV file. It aggregates the raw data with d3.rollup and d3.sum to compute total units sold per brand, then renders the slices with d3.pie and d3.arc in an SVG. Each brand receives a distinct color from a predefined map, and a legend displays the brand names alongside their corresponding sales totals. The visualization also logs intermediate data to the console for debugging.

DDeekshitha Annreddy
79% match