Fork of Fork of Activity7_q1

100%

Fork of Fork of Activity7_q1

✓ Published0🌍 Public

Last edited Nov 4, 2024

Created on Nov 4, 2024

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.

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…

Fork of Activity 7.1D3.JS

This visualization shows a pie chart of vehicle types from a CSV dataset, with slice sizes representing the count of each vehicle type and a color-coded legend identifying the categories. It uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeTableau10` to generate and color the SVG paths, while `d3.rollup` aggregates the raw data. The chart includes axis labels and a title, with the underlying data fetched from a GitHub gist via `d3.csv`.

AAbhinay Peeta

87% match

Loading thumbnail…

Fork of Activity7:Questions:1

This example shows the distribution of car fuel types in a dataset, with each slice of a pie chart representing a fuel category and its size reflecting the number of cars using that fuel. It uses D3.js v7 to fetch a CSV file from a GitHub repository, parse the data, and group it by the "Fuel" attribute using `d3.rollup`. The pie chart is rendered as SVG with `d3.pie` and `d3.arc`, labels are positioned using `arc.centroid`, and a color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10`.

Ssaivaishnogaruda@gmail.com

87% match

Loading thumbnail…

Fork of Activity_7_Q1

This visualization shows the distribution of car classes in a dataset, displaying the proportion of each category as a donut chart with percentage labels on each slice. The chart uses D3.js version 7.8.5, loaded via CDN, to create the pie layout and arc generators, with a categorical color scale mapping four classes—unacc, acc, vgood, and good—to distinct colors. Data is loaded remotely from a CSV file hosted on GitHub Gist, and a legend on the right side displays each class with its raw count. The SVG rendering includes white strokes between slices to visually separate the segments.

GGOPI MUPPURI

86% 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

86% 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

86% match

Loading thumbnail…

Fork of activity7 question1

This pie chart displays the distribution of three flower species from a loaded CSV dataset. The visualization uses d3.pie and d3.arc to compute and render the slices, with d3.scaleOrdinal providing categorical colors. Species names appear as labels positioned at each slice's centroid using arc.centroid, and the entire chart is drawn as SVG elements within a 500x500 viewport. The chart loads data through d3.csv from a remote gist URL and converts count values to numbers for proportional slice sizing.

Ssahithitoomu@gmail.com

85% match

Loading thumbnail…

Fork of Activity 7_Answer 1_D3.JS

This chart shows the distribution of vehicle types in a dataset as a pie chart, with each slice labeled in a legend and the raw counts provided via hover tooltips. The chart uses an SVG rendering approach with D3.js v7, specifically leveraging `d3.pie` for angle generation, `d3.arc` for path construction, and `d3.rollup` to aggregate the CSV data by vehicle type. The color scale uses `d3.scaleOrdinal` with the Tableau10 scheme. An x-axis title and a mislabeled y-axis title (indicated as "Count (slice size)") are decorative, as no coordinates are plotted.

IILYAS AHMED

85% 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