Skip to main content
SimilarExport ZIP
100%

ice_7 , question 2

✓ Published1🌍 Public
Sshailajat1998@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from ice_7 , question 1

This pie chart visualizes the distribution of fuel types in a used-car dataset, with each slice encoded by a distinct color from D3's categorical scaleOrdinal scheme. The visualization is interactive: hovering over a segment displays a tooltip showing the fuel type and its exact count, while a dynamically generated legend maps colors to fuel categories for quick reference. Data is loaded from car_dataset.csv via d3.csv, and the chart is rendered with SVG in D3 v7, featuring smooth animated transitions. The tooltip and legend enhance accessibility and readability, making it easy to compare categorical proportions at a glance.

AI-generated description

Pie Chart with Tooltips and Legend

This project showcases a pie chart visualization with tooltips and a dynamic legend using D3.js library.

Features:

  1. Data Loading: Data is loaded from a CSV file (car_dataset.csv) using D3's d3.csv method.

  2. Pie Chart: A pie chart is rendered using SVG elements to visualize the distribution of fuel types present in the dataset.

  3. Interactive Tooltip: Mouseover events on each segment of the pie chart display a tooltip showing the fuel type and its count.

  4. Dynamic Legend: A legend is dynamically generated based on the unique fuel types present in the dataset, providing visual cues for the colors used in the pie chart.

  5. Color Encoding: Fuel types are encoded with distinct colors using D3's scaleOrdinal scale and a categorical color scheme.

  6. Responsive Design: The visualization adjusts to different screen sizes, maintaining its integrity and readability.

  7. External Library: D3.js library is included via CDN (https://d3js.org/d3.v7.min.js).

  8. Styling: CSS styling is applied to enhance the appearance of the tooltip, providing a clean and intuitive user experience.

  9. Modularity: The code is structured using functions and method chaining for improved readability and maintainability.

  10. Accessibility: The visualization is designed to be accessible, with tooltips providing additional information for users with disabilities.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7 Q1

This pie chart shows the distribution of cars by fuel type in a dataset loaded from a CSV file. The visualization displays three fuel categories as colored slices with labels, while a legend on the right lists each fuel type along with its corresponding car count. The chart uses D3.js v7 APIs including `d3.csv` for data loading, `d3.rollup` for aggregation, `d3.pie` for pie geometry, and `d3.arc` for arc paths. The SVG renderer draws the chart, and the code includes fake axis labels for fuel type and number of cars.

MMdAfikurRahmanKhan@my.unt.edu
85% match
Loading thumbnail…

Actitvity7:Questions:1

This pie chart displays the distribution of car fuel types from a CSV dataset, using a D3.js v6 script. The visualization renders as an SVG with color-coded slices and white label text. The code loads data from a GitHub URL, counts fuel type occurrences with `d3.rollups`, and constructs the chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a `schemeCategory10` color palette.

Ssaivaishnogaruda@gmail.com
85% match
Loading thumbnail…

Actitvity7:Questions:1

A pie chart visualizes the distribution of car fuel types from a CSV dataset, displaying each category with percentage labels and a matching legend. Built with D3 v6, the chart counts fuel-type occurrences, computes percentages, and renders slices using `d3.pie` and `d3.arc`, with a categorical color scheme from `d3.scaleOrdinal`. Percentages are placed on each slice via `arc.centroid`, while the legend is constructed with HTML elements styled by the same color scale. The SVG output is centered in the page, with data loaded asynchronously via `d3.csv`.

Ssaivaishnogaruda@gmail.com
84% match
Loading thumbnail…

Actitvity7:Questions:1

This example shows the distribution of fuel types among cars using a static pie chart. Hardcoded sample data assigns percentages to petrol, diesel, electric, and hybrid vehicles, with each slice labeled and colored using a categorical scale. The visualization is rendered with D3.js v6, using `d3.pie()` to compute arc angles and `d3.arc()` to draw SVG paths. A custom legend built from HTML divs lists each fuel type with its corresponding color and value.

Ssaivaishnogaruda@gmail.com
84% match
Loading thumbnail…

q2_piechart

This pie chart visualizes the share of cars by fuel type from the car_sales_kaggle dataset, displaying each category’s value and percentage directly on the slices and in a right-side legend. Built with D3 v7, it loads CSV data, aggregates counts per category, and uses `d3.pie`, `d3.arc`, and `d3.rollups` to compute and render arcs with leader lines and labels. A Tableau10 ordinal color scale distinguishes categories, while the SVG output includes hover tooltips via `title` elements and a clean, responsive layout.

Mmaddineni2112@gmail.com
83% match
Loading thumbnail…

Activity7:Questions:1

This visualization uses a D3.js pie chart to show the distribution of car fuel types, with slices representing the proportion of cars using each fuel type. The data is loaded from a CSV file via `d3.csvParse` and grouped with `d3.rollup` to count cars by fuel category. The chart is rendered as SVG using `d3.pie()`, `d3.arc()`, and a color scale from `d3.schemeCategory10`, with labels placed at each arc’s centroid.

Ssaivaishnogaruda@gmail.com
83% match
Loading thumbnail…

Pie chart ice 7

A pie chart shows the distribution of cars by cylinder count, sourced from the Auto MPG dataset. Each slice is labeled directly with its category and percentage, while a legend on the right lists raw counts. The chart uses D3 v7 modules `csv`, `rollup`, `pie`, `arc`, and `scaleOrdinal` with `schemeTableau10`, rendering slices and labels as SVG elements within an 880 by 520 pixel viewport.

SSreedevi Itta
82% match
Loading thumbnail…

ICE-7 pie chart

This pie chart visualizes the number of car units sold for different car models, with each slice colored distinctly and accompanied by a legend showing the car name and its corresponding value. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate the SVG paths, while data is loaded asynchronously from a CSV file via `d3.csv`. The rendering includes a centered pie with a 200-pixel outer radius, and the legend displays colored rectangles and text labels positioned to the right.

SSheshidharreddy
82% match