Activity 7.1 Question 1

100%

Activity 7.1 Question 1

✓ Published0🌍 Public

Last edited Nov 7, 2024

Created on Nov 7, 2024

This example shows the distribution of car horsepower values as an interactive pie chart. It groups the data into ten horsepower bins using `d3.histogram`, then visualizes each bin’s count with `d3.pie` and `d3.arc` in an SVG. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) colors each slice, and a separate HTML legend displays the bin ranges. The data is loaded asynchronously via `d3.csv` from a GitHub Gist, demonstrating local ES6 module imports and D3’s histogram, pie, and arc APIs.

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…

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

86% match

Loading thumbnail…

Question1_A1

This pie chart visualizes the distribution of car horsepower across different makes, using D3 v7 to render SVG arcs and labels. The chart encodes horsepower values as arc sizes and colors each segment by car make, with a legend positioned to the right. Labels are placed along the arcs using `d3.arc`’s centroid method, and the data comes from an inline array of `{make, horsepower}` objects. A hover effect on the paths provides subtle interactive feedback.

Vvarmanithish5@gmail.com

86% match

Loading thumbnail…

activity7_question1

This example visualizes the distribution of car horsepower across ten manufacturers using a pie chart, with each slice representing a manufacturer and its size corresponding to the car's horsepower value. The visualization is built with React and D3 version 5, using the `pie` API to compute slice angles, `arc` to generate the donut-shaped paths, and `d3.selectAll` for SVG element creation. Data is loaded from a remote CSV via `d3.csv`, and percentage labels and a legend are rendered using D3's `format` and `schemeCategory10` color palette. All marks and text are rendered as SVG elements within a React component.

Nnishwitha.1032@gmail.com

86% match

Loading thumbnail…

Activity7.1_Question1

A pie chart displays the average horsepower for the top 10 car makers, with all remaining makers aggregated into an "Others" slice. Slices and labels are rendered using SVG paths and text elements via D3's `pie` and `arc` APIs, with a color legend on the right. The code loads car data from a CSV file using `d3.csv`, aggregates values with `d3.sum`, and uses `d3.arc` for slice geometry and `d3.scaleOrdinal` for categorical colors. Axis labels are added as text annotations, though the chart itself is circular.

GGunna,Praneeth Reddy

85% match

Loading thumbnail…

Activity-7 Question-1

This example renders a pie chart of the top ten cars by miles per gallon (mpg) from a CSV file loaded from a GitHub gist. D3's `pie` layout and `arc` generator create the slices, with each car assigned a random color via JavaScript. The chart displays mpg labels directly on each slice and includes a legend listing car names. The SVG is generated using D3 v5, with the data fetched using D3's `csv` function and sorted/sliced before rendering.

Kkandulasunny17@gmail.com

84% match

Loading thumbnail…

activity 7 question 1

This example shows a pie chart of car sales, with each slice representing a car model and its sales volume in thousands. The chart displays model labels directly on each slice and includes a color-coded legend on the right for identification. It loads a CSV file from a GitHub Gist and processes the data using D3 v6, specifically applying the `d3.pie` and `d3.arc` APIs to generate the pie geometry. The visualization renders as an SVG, using `d3.scaleOrdinal` with `d3.schemeCategory10` for slice colors.

Ccharishmakalyanapu@gmail.com

83% match

Loading thumbnail…

Activity 7.1 Question 1.1

This example shows a pie chart of programming language market shares, with percentage labels on each slice and a color-coded legend beside the chart. It loads data from a GitHub Gist URL using `d3.json`, then applies `d3.pie` and `d3.arc` to compute and draw the arcs as SVG paths. The visualization uses a `d3.scaleOrdinal` with `d3.schemeCategory10` for colors and positions legend items manually within the same SVG group.

Bbharatchowdarypotluri@my.unt.edu

83% match

Loading thumbnail…

Activity7:Questions:1

This example shows the distribution of car classes as a simple pie chart, with each slice labeled by its category name and percentage of the total. It loads a CSV file using `d3.csv`, aggregates class counts with a `reduce` operation, and renders the chart with D3’s `d3.pie` and `d3.arc` methods on an SVG. A categorical color scale (`d3.scaleOrdinal`) assigns colors from `schemeCategory10`, and labels are positioned using the arc centroid calculation while the slice area is scaled by the outer radius.

Ssaivaishnogaruda@gmail.com

83% match