Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Pie chart

✓ Published1🌍 Public
VVineela Reddy
Last edited Apr 25, 2024
Created on Apr 24, 2024
Forked from Fork of Pie chart

This example shows the distribution of shipping amounts across different cities during the Covid era using a pie chart rendered in SVG. The chart fetches data from a CSV file hosted on GitHub and displays each city’s total as a labeled slice, with a color-coded legend on the right. The code uses d3.csv to load the dataset, d3.pie to compute the angles, and d3.arc along with scaleOrdinal for the colored segments and centroid-based text placement.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart

This pie chart visualizes shipping amounts across different cities during the Covid era, with each slice labeled by its value and a legend identifying city names. The code fetches CSV data from a GitHub gist using `d3.csv` and renders the chart with React and SVG. It employs `d3.pie` to compute arc segments, `d3.arc` to generate path geometries, and `d3.scaleOrdinal` for color mapping. Text labels are positioned via `arc.centroid`, and a custom legend displays colored rectangles and city names.

VVineela Reddy
93% match
Loading thumbnail…

Fork of Pie chart Distribution

This example shows the shipping amounts for different cities during the Covid era using a bar chart, despite its title mentioning a pie chart. The visualization uses D3 v5 with an SVG rendering approach, loading data from a remote CSV file. The code employs `scaleBand` and `scaleLinear` to map city names and numeric amounts to the chart’s axes, while bars are filled with random HSL colors. Axis labels are rotated for readability, and the chart is drawn within a group element using margin conventions.

VVineela Reddy
92% match
Loading thumbnail…

Pie chart Distribution

This example shows the shipping amounts for different cities during the Covid era. Using D3.js version 5, it loads CSV data from a GitHub repository, maps each city to its numeric amount, and renders a bar chart. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Bars are drawn as SVG rectangles, filled with random hues via HSL color strings, and labeled with a rotated city name axis.

Aabdul.khader2899@gmail.com
87% match
Loading thumbnail…

Fork of Pie Chart

A forked pie chart visualizes the distribution of new COVID-19 tests across geographic locations, using a D3 v5 pie layout with an SVG rendering. The chart shows the top 10 locations by test count, with each slice’s fill color and legend labels derived from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. Data is loaded from a CSV via `d3.csv`, sorted descending, and rendered with `d3.pie` and `d3.arc`; hover events log values to the console, and legends display each location’s name and test total. The React-based example is presented in an HTML page with custom CSS styling.

Ppemmasaniprudhvinadh
86% match
Loading thumbnail…

Fork of pie chart

A fork of a pie chart example visualizes COVID-19 case data from a CSV file, showing three categories (Infected, Recovered, Died) as colored slices with proportional labels and a legend. The D3 v5 code uses `d3.csv` to load the data, `d3.pie` to compute arc segments, and `d3.arc` with an inner radius of zero to generate the paths. Slice colors come from `d3.scaleOrdinal` with a manual range, and text labels are positioned using the arc’s centroid method. The SVG output is centered within a 980×550 canvas.

Ddandudivya98@gmail.com
85% match
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the latitude and longitude of country locations from a CSV dataset. The code uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeCategory10 to create the SVG segments, while loading data via d3.csv. It also generates a legend with color swatches and labels, and tooltips log values on mouseover. The chart is built in a React project using d3 v5, rendering to an SVG element.

Ssnehareddygurram
84% match
Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays city population data as a pie chart, with each slice colored distinctly and accompanied by a legend showing city names and population counts. Built with D3 v5 and rendered as SVG, it uses `d3.pie` and `d3.arc` to compute and draw the pie segments, while `d3.scaleOrdinal` assigns colors. Data is loaded from a CSV file via a gist URL using `d3.csv`, and the chart positions the pie with a fixed translation and labels with custom text elements.

Ttejaswikalluri05
84% match
Loading thumbnail…

Fork of Pie Chart

This example shows a pie chart displaying city names and their corresponding values, with each slice labeled by its city and numeric value. The chart uses D3 version 6 to load data from a CSV file and render the visualization in SVG. The code constructs the pie with `d3.pie()`, generates arc paths with `d3.arc()`, and applies a color scale using `d3.scaleOrdinal()` with a quantized interpolator. Labels are positioned using arc centroids, and the chart includes white stroke separators between slices.

SSam Hege
84% match