Skip to main content
SimilarExport ZIP
100%

Fork of Q1_DataViz_PiechartForCarPerformance

✓ Published0🌍 Public
Nnikhilkinnera1998@gmail.com
Last edited Mar 26, 2025
Created on Mar 26, 2025

This example shows the distribution of horsepower across various car models using a pie chart with a color-coded legend. It loads CSV data from a GitHub gist via `d3.csv`, then builds the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` using `d3.schemeCategory10`. The SVG renders labeled arcs with model and horsepower values, while a separate legend group lists each model. The code uses D3 v6 and renders entirely as SVG within a dedicated container.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Q1_DataViz_PiechartForCarPerformance

This pie chart displays the distribution of horsepower across various car manufacturers. The visualization uses a D3.js pie chart to represent each model's contribution to total horsepower, with percentage labels displayed directly on the slices. A legend maps colors to car models, while the chart includes axis labels for context. The implementation uses d3.pie for slice calculation, d3.arc for path generation, and d3.scaleOrdinal with d3.schemeCategory10 for color assignment. Data is loaded from a remote CSV file and rendered as SVG within a web page.

Nnikhilkinnera1998@gmail.com
91% match
Loading thumbnail…

Fork of Q1_DataViz_PiechartForCarPerformance

This interactive pie chart visualizes car performance metrics, allowing users to toggle between horsepower, torque, and highway MPG while grouping data by individual models or manufacturers. The visualization aggregates the dataset and limits top slices with an "Other" category for readability. Built with D3.js v6, it uses the `d3.pie` layout, `d3.arc` generators, and `d3.scaleOrdinal` for colors, with hover tooltips, animated slice transitions via `transition.attrTween`, and an interactive legend. The responsive SVG chart adapts its width to viewport size.

NNita
90% match
Loading thumbnail…

Fork of ICE-7 Pie Chart

This fork of the ICE-7 Pie Chart visualizes the horsepower of the top 12 car models from a CSV dataset. The chart uses a pie layout and arc generator to render slices in an SVG, with colors mapped by a categorical scale. Legends display each model name and its horsepower value (e.g., "230 hp") beside a matching color swatch. The code imports D3 v5 modules like `csv`, `pie`, `arc`, and `scaleOrdinal`, loads data from a GitHub gist URL, and sorts entries by horsepower before rendering.

NNanditha Reddy
87% 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
85% match
Loading thumbnail…

CarPerformance PieChart

This pie chart visualizes how vehicles in the CarPerformance dataset are distributed across three horsepower ranges: low (≤120 HP), medium (121–160 HP), and high (>160 HP). Each slice’s size reflects the count of vehicles in that category, with colored segments and a legend for identification. The visualization loads data from a CSV file using `d3.csv`, then applies `d3.pie` and `d3.arc` generators to create the slices. A `d3.scaleOrdinal` color scale maps the categories to distinct colors, while `arcGen.centroid` positions the labels within each slice.

Ssowjanya
85% 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
85% match
Loading thumbnail…

Task9_Q1

This example displays a D3.js pie chart visualizing horsepower totals for different car makes, with a legend showing each make and its percentage of the total. The chart uses a tooltip that appears on mouseover, revealing the make and horsepower value. The code imports D3 functions like `arc`, `pie`, and `scaleOrdinal`, and loads data from a GitHub CSV. It renders as an SVG with a categorical color scheme.

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