Skip to main content
SimilarExport ZIP
100%

T9Q1

✓ Published0🌍 Public
Cchintamanenithp@gmail.com
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This example renders a donut chart of total horsepower aggregated by car make from a CSV dataset hosted on GitHub. It uses D3 v7 modules including `d3.rollup`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to create colored arcs with labeled slices. A legend is appended to the SVG, and the chart is generated inside a group transformed to the center of the canvas.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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…

(Q3)

This example visualizes a car dataset as a scatter plot of horsepower against torque, with each point colored by the car’s make and an opacity of 0.7. It uses D3.js v7 (loaded via UNPKG) to fetch a CSV from a GitHub repository, then employs `d3.scaleLinear` for both axes, `d3.extent` for domains, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. SVG rendering is used for circles, axis labels via `d3.axisBottom` and `d3.axisLeft`, and a legend built with `selectAll` and `append`.

Rreddyswethuvahana@gmail.com
83% 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
82% match
Loading thumbnail…

Task-9/10 Q1

This D3.js pie chart displays the distribution of automobile makes by their average horsepower values, with each car make represented as a colored slice paired with a custom legend. The visualization loads CSV data from a GitHub repository using `d3.csv`, then applies `d3.pie()` to compute arc angles and `d3.arc()` to generate the SVG path geometries. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) colors each segment. The code renders the chart inside an SVG container with explicit width and height attributes, while a separate HTML div builds the legend items using dynamically generated colored circles and text labels.

Ttallurisaiteja96@gmail.com
82% match
Loading thumbnail…

PROJECT

This visualization shows a pie chart of car makes by horsepower, with a corresponding color-coded legend. The data is loaded from a remote CSV file using `d3.csv` and parsed into labels and numeric values. D3 v7’s pie layout (`d3.pie`) and arc generator (`d3.arc`) render the segments, while an ordinal color scale (`d3.scaleOrdinal` with `schemeCategory10`) assigns colors. The chart is drawn as SVG, with a separate HTML legend built dynamically. It includes a centered title and a bottom label for the make category.

Ttallurisaiteja96@gmail.com
80% match
Loading thumbnail…

Q3

This example shows a scatter plot of car data, comparing horsepower on the x-axis against torque on the y-axis, with each point colored by the car’s make. The visualization uses d3.csv to load data from an external CSV file, then applies d3.scaleLinear for both axes and d3.scaleOrdinal with d3.schemeCategory10 for coloring. It renders circles as SVG elements, includes axes labeled with text, and displays a legend listing each make.

Rreddyswethuvahana@gmail.com
79% match
Loading thumbnail…

activity 7 task 1

This pie chart visualizes the distribution of horsepower values across different car makes from a CSV dataset. The code uses D3 v7’s `pie()` and `arc()` generators to compute and draw the slices as SVG paths, with a `scaleOrdinal` color scale mapping each make to a distinct fill. A legend is appended as SVG rectangles and text labels, while axis titles for “Car Make” and “Horsepower” are added manually. The visualization reads data asynchronously via `csv()`, converts horsepower to numeric values, and renders with a light gray background.

Ssindhureddykandada@gmail.com
79% match
Loading thumbnail…

Activity 7.1

This D3.js pie chart visualizes the distribution of car makes from a CSV file loaded from a GitHub repository. It uses `d3.pie` and `d3.arc` to generate the pie slices, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing the categorical color scheme. The chart displays percentage labels on each segment and includes a legend generated with HTML. Data is aggregated using `d3.rollups` to count occurrences of each make, and the SVG output is rendered within a centered layout.

NNagalakshmi Thota
78% match