Skip to main content
SimilarExport ZIP
100%

Fork of D3 Pie chart

✓ Published1🌍 Public
Nnishanththouta16@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025
Forked from D3 Starter

This pie chart displays the distribution of engine types—Petrol, Diesel, Electric, and Hybrid—within a dataset, with values expressed as percentages. It visualizes categorical proportions using a standard circular layout generated by the D3.js `d3.pie` and `d3.arc` APIs, rendered as SVG paths. Slices are filled with colors from the `d3.schemeCategory10` ordinal scale, and each slice is labeled directly on the chart. A legend, built with custom HTML elements, maps each color to its corresponding engine type and percentage value, using the same color assignment from `d3.scaleOrdinal`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This example presents a pie chart of engine efficiency across various vehicle types. The D3.js code builds the visualization using the `pie` and `arc` generators, rendering SVG paths for each slice and a legend with colored boxes and formatted text labels. The chart's data is hardcoded within the script, and colors are assigned via `scaleOrdinal` with the `schemeCategory10` palette. The final visualization includes a title and a legend positioned to the right of the pie.

Ssanavenkatasurendrareddy@gmail.com
84% match
Loading thumbnail…

Fork of D3 Starter -(pie chart)

This pie chart visualizes the distribution of car horsepower into three ranges (Low ≤120 HP, Medium 121–160 HP, and High >160 HP) using data from a CarPerformance.csv dataset. The chart uses d3.csv to load the data, d3.scaleOrdinal for color encoding, and d3.pie with d3.arc to generate SVG path elements. Labels are positioned using arc centroid calculations, and a legend appears in the top-right corner. The visualization demonstrates how D3 v7 transforms tabular data into an interactive-free categorical pie chart with clean SVG rendering.

Ssowjanya
83% match
Loading thumbnail…

Fork of Vehicles pie chart

This fork of the classic Vehicles pie chart visualizes the distribution of vehicle makes in a dataset loaded from a GitHub Gist. The chart displays each make as a colored slice with a percentage label, alongside a legend showing the make name and its count. Built with D3.js v6, the code uses `d3.rollup` to aggregate counts, `d3.pie` to compute arc angles, and `d3.arc` to generate SVG paths. Slices are colored via a categorical scale and respond to mouse hovers.

Ssaisathwikaguntupalli@gmail.com
82% match
Loading thumbnail…

Actitvity7:Questions:1

This example shows the distribution of fuel types among cars using a static pie chart. Hardcoded sample data assigns percentages to petrol, diesel, electric, and hybrid vehicles, with each slice labeled and colored using a categorical scale. The visualization is rendered with D3.js v6, using `d3.pie()` to compute arc angles and `d3.arc()` to draw SVG paths. A custom legend built from HTML divs lists each fuel type with its corresponding color and value.

Ssaivaishnogaruda@gmail.com
81% match
Loading thumbnail…

Pie Chart

A pie chart built with D3 v7 displays the distribution of car types from a CSV file hosted on a GitHub Gist. The visualization aggregates raw records into categorical counts by type—Sedan, SUV, Truck, and Coupe—and shows each segment's percentage share using `d3.scaleOrdinal` with the `d3.schemeSet2` palette. D3's `arc` generator positions slices, while leader lines and external labels annotate each wedge. An interactive legend, populated via the `d3.select` API, highlights corresponding slices on hover, and a tooltip provides additional detail. The chart uses SVG rendering.

RRamdas Dheeraj
80% 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
80% match
Loading thumbnail…

Fork of Fork of Activity7_q1

This pie chart displays the distribution of horsepower values across different car makes, with each genre category represented as a colored slice proportional to its count. The visualization loads a CSV dataset via Papa Parse, then uses D3 v7’s `pie` and `arc` generators to compute slice paths and centroids, rendering labels at each slice’s center. Slices are filled with a categorical color scheme and separated by white stroke lines, while the SVG canvas is centered within a responsive container.

Nnandasaipalankius@gmail.com
80% match
Loading thumbnail…

Piechart_Q1

This pie chart displays the distribution of horsepower across car makes, including Scion, MINI, Kia, Honda, Ferrari, and Lamborghini. The visualization uses a D3.js (v5/v6.7) pie layout with an SVG rendering, assigning distinct colors from the `schemeCategory10` palette to each make. Tooltips reveal horsepower values, and a legend identifies car models, with data loaded via `d3.csv` from a remote GitHub URL and arcs generated through the `d3.pie` API.

Vvarmanithish5@gmail.com
79% match