Fork of Pie Chart

100%

Fork of Pie Chart

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 27, 2024

This example renders an aggregated pie chart of car selling prices grouped by make, with labels and leader lines connecting each slice to its name. The code uses D3 v7’s `d3.group`, `d3.sum`, `d3.pie`, and `d3.arc` to compute and draw the chart in SVG, along with a color scale via `d3.scaleOrdinal`. A legend and a data table are also generated from the same aggregated dataset, styled on a light blue background.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

pie

This example renders a pie chart of fictional car brand values using D3 v4 and React. The chart displays ten slices in a circular SVG layout, with each slice colored via d3.scaleOrdinal and d3.schemeCategory10. Hovering over a slice triggers mouseover and mousemove events that show a tooltip with the brand name and value, while reducing the opacity of other slices. A separate legend div is built alongside the SVG, and the chart uses d3.arc and d3.pie for geometry and data binding.

NNaimisha-M

84% match

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes 2015 sales data for different companies using a legend and colored arcs. The chart displays each brand’s year-to-date profit converted to thousands and rendered as a simple SVG pie. The code imports D3 v5 modules like `pie`, `arc`, and `scaleOrdinal` to generate the chart, while loading data from a CSV via D3’s `csv` function. React is used as the framework, and the page is styled with custom CSS for headings and legend text.

Ssowmyanagula@my.unt.edu

83% match

Loading thumbnail…

Fork of Fork of Fork of Pie Chart

This example visualizes 2022 US auto sales by brand using a pie chart built with D3 v5. The chart displays proportional slices for each brand, with a legend showing brand names and corresponding sales values in thousands, alongside color-coded rectangles. The code loads CSV data from a GitHub gist via `d3.csv`, processes it with `d3.pie`, and renders SVG paths using `d3.arc` with ordinal color scaling. Legends are appended as SVG groups, and sales values are formatted with `d3.format`.

Bbindhureddy98

83% match

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes February car prices from a CSV dataset, showing each car model’s proportional share via colored slices and a legend with both percentage and dollar values. The code uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` loading functions to render the SVG, with legends positioned manually and formatted using `format`. Interactive selection and tooltips are absent; the display is static, relying on hard-coded color ranges and a centered layout.

Eeravellisaimeghana

83% match

Loading thumbnail…

Fork of Pie Chart

This example visualizes state sales data as a pie chart, with each slice colored by total sales value and a corresponding legend listing state names alongside their formatted dollar amounts. The top ten states by sales are shown, sorted in descending order. Built with React and D3 v5, it uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths, while d3.csv loads the external dataset from a GitHub gist. Mouseover events log slice data to the console, and all rendering occurs within an SVG container.

NNeeharikaGali

83% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example visualizes 2022 US auto sales by brand using a pie chart, with each slice's fill color and legend label derived from the sales data. The chart is rendered as SVG, with pie segments generated by the `d3.pie` and `d3.arc` functions, while `d3.scaleOrdinal` maps colors to sales values. Legend entries include each brand name and its sales total formatted with `d3.format`. Data is loaded asynchronously from a CSV file via a custom `getData` module using D3 v5's `d3.csv`.

KKolliTeja

82% match

Loading thumbnail…

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with a color-coded legend listing each brand and its total sales in thousands. The code loads CSV data from a GitHub gist using `d3.csv`, then computes the pie layout with `d3.pie` and draws the segments with `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and the chart is rendered as SVG in a 960×500 viewport, with a separate legend group built from the same data.

Bbindhureddy98

82% match

Loading thumbnail…

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with each slice colored and accompanied by legends displaying brand names, percentage of total sales, and sales in thousands. It uses d3.pie and d3.arc to generate the SVG paths, d3.scaleOrdinal for color assignment, and d3.csv to load data from a gist. Percentages and formatted sales values are rendered via d3.format alongside the chart’s interactive legend.

Kkarumanchimanasa

82% match