Skip to main content
SimilarExport ZIP
100%

Fork of Q1_DataViz_PiechartForCarPerformance

✓ Published0🌍 Public
NNita
Last edited Mar 26, 2025
Created on Mar 26, 2025

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.

AI-generated description

Car Performance Data Visualization

An interactive and responsive data visualization that displays car performance metrics using D3.js.

Features

  • Interactive pie chart visualization of car performance data
  • Toggle between different metrics (horsepower, torque, highway MPG)
  • Group data by manufacturer or individual car models
  • Responsive design that works on desktop and mobile devices
  • Interactive tooltips showing detailed information
  • Highlighting effect when hovering over chart segments or legend items

Usage

  1. Open index.html in a web browser
  2. Use the dropdown menus to switch between different metrics and grouping options
  3. Hover over pie segments or legend items for detailed information

Technical Details

  • Built with D3.js version 6
  • Uses ES6 modules for better code organization
  • Responsive design with CSS media queries
  • Data aggregation and processing utilities
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
90% match
Loading thumbnail…

Fork of Q1_DataViz_PiechartForCarPerformance

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.

Nnikhilkinnera1998@gmail.com
90% 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
84% 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
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
84% 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
83% 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
82% 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
81% match