Skip to main content
SimilarExport ZIP
100%

Pie Chart_Archana Goli

✓ Published0🌍 Public
Aarchanagoli@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024

This pie chart shows the distribution of kernel types (Kama, Rosa, and Canadian) in a dataset, with each slice’s percentage displayed in a custom legend below the canvas. The chart is rendered using the Chart.js library on a fixed-size canvas element, which reads data from a remote text file via the Fetch API. It counts occurrences of each kernel type from the CSV rows, then draws the pie with semi-transparent colors and a disabled default legend in favor of a dynamically generated HTML legend.

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_ICE7_ArchanaGoli

This pie chart visualizes the distribution of kernel types (Kama, Rosa, Canadian) from a dataset loaded via a remote URL. It shows the proportional counts of each category as colored slices, with a dynamically generated legend displaying percentages. The chart uses the Chart.js library on an HTML canvas, fetching data from a gist file and parsing comma-separated rows. The code sets fixed canvas dimensions, disables responsiveness, and computes category frequencies by iterating through the data.

Aarchanagoli@my.unt.edu
92% match
Loading thumbnail…

Pie chart

This pie chart visualizes the distribution of wine varieties, highlighting the share of five selected types—Cabernet Sauvignon, Pinot Noir, Chardonnay, Sauvignon Blanc, and Malbec—based on their counts in a CSV dataset. The chart uses D3.js v7’s pie generator and arc generator to compute and render the slices, with each slice’s angle proportional to its count. A legend, built with HTML divs, maps colors to variety names. The data is fetched and parsed from a remote CSV file using `d3.csvParse`, and the visualization is rendered as SVG elements.

NNandini Maddula
75% match
Loading thumbnail…

pie chart

This example shows a pie chart displaying crime counts by type, with the data fetched from a CSV file hosted in a GitHub Gist. The chart is drawn on a Canvas element using the Chart.js library, which handles the pie chart rendering. The JavaScript code parses the CSV data, extracting the crime type and count from specific columns, then passes these as labels and data values to the Chart.js constructor. The visualization uses a fixed set of semi-transparent colors for the pie slices with a border width of one pixel.

TTarun Kumar Bosupally
74% match
Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

NNikithakatta30
74% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11
74% match
Loading thumbnail…

Pie chart

This visualization is a pie chart that displays the distribution of CSS color names, with each slice colored according to its corresponding RGB hex value from the source data. The chart is rendered as an SVG within a React application, using D3.js v5 for data loading and pie chart geometry. The code fetches color data from a GitHub-hosted CSV file via `d3.csv`, computes the pie slices with `d3.pie`, and draws them using `d3.arc` with an outer radius of half the chart height. Each slice is a `<path>` element filled with the exact hex color it represents.

NNikithakatta30
74% match
Loading thumbnail…

pie chart

This example shows a pie chart of unemployment rates by country, with each slice labeled by country name and percentage in the legend on the right. It fetches CSV data from a GitHub gist and renders the chart on a canvas element using the Chart.js library. The code parses the CSV rows manually, assigns each country a random color, and customizes legend and tooltip callbacks to display the percentage alongside names.

Ssaisathyapriya097@gmail.com
73% match
Loading thumbnail…

Pie Chart with Labels using d3.js

A pie chart displays the distribution of Iris species counts, with each slice labeled by species name and its corresponding count, accompanied by a color-coded legend. Built with d3.js v5, the visualization uses the `d3.pie` layout, `d3.arc` generator, and `d3.scaleOrdinal` color scheme to create SVG paths and text elements. Data is loaded from an external CSV file using `d3.csv`, and the chart is rendered as a static SVG with an explicit width and height of 400 pixels.

GGogineni44
73% match