Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter -(pie chart)

✓ Published0🌍 Public
Ssowjanya
Last edited Oct 25, 2025
Created on Oct 25, 2025

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.

AI-generated description

Car Performance Pie Chart

This project visualizes vehicle horsepower distribution using D3.js.

Files

  • index.html → Main HTML structure
  • style.css → Styling for layout and visuals
  • index.js → D3 logic to render the pie chart
  • CarPerformance.csv → Dataset hosted on GitHub

Data Source

CSV hosted at:
CarPerformance.csv (GitHub Raw)

How to Run

  1. Open index.html in your browser, or
  2. Fork on VizHub, ensuring CSV URL points to GitHub Raw.

Output Preview

Pie chart showing:

  • Low (≤120 HP)
  • Medium (121–160 HP)
  • High (>160 HP)

Legend is placed at the top-right corner for readability.

MIT Licensed

Similar vizzes

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
88% 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
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
84% 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
84% match
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
83% match
Loading thumbnail…

Fork of D3 Starter - line chart

This line chart visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, revealing the general trend of decreasing fuel efficiency as engine power increases. Sorted by horsepower, the data is plotted as a single smooth line using D3's `d3.line` generator, with scales defined by `d3.scaleLinear` and axes rendered via `d3.axisBottom` and `d3.axisLeft`. The CSV data is loaded asynchronously from a GitHub repository and drawn as an SVG within a styled container. The chart includes labeled axes for horsepower and MPG, with the line styled in a teal color.

Ssowjanya
83% match
Loading thumbnail…

Fork of D3 Pie chart

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`.

Nnishanththouta16@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