Fork of Fork of Fork to pie chart

100%

Fork of Fork of Fork to pie chart

✓ Published1🌍 Public

Last edited Apr 11, 2024

Created on Apr 11, 2024

This example displays a doughnut chart that visualizes the count of "Related (Yes)" versus "Related (No)" values from a remote CSV file. The code fetches the data from a GitHub gist, splits it into rows, and increments counters based on the fourth column's value. It uses the Chart.js library's `Chart` constructor with a `doughnut` type, drawing onto a Canvas element via `getContext('2d')`. The chart is configured with a bottom legend and is not responsive, with a title indicating the percentage distribution.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example visualizes the distribution of discussion topics in a school-related CSV file as a doughnut chart. It shows the percentage of occurrences for categories like quiz, homework, exam, and lecture recording, highlighting which topics are most frequently mentioned. The code fetches CSV data via the Fetch API, parses it with JavaScript string methods, and counts keyword matches before converting counts to percentages. It renders the chart using Chart.js from a CDN, drawing the doughnut visualization on an HTML canvas element with distinct color schemes.

Ssatishnarne99@gmail.com

86% match

Loading thumbnail…

Fork of Fork of Fork to pie chart

This example displays total sales by category as a pie chart, with categories drawn from a CSV file and sales values pulled from a specific column. The chart is rendered on an HTML canvas using the Chart.js library, initiated with `new Chart(ctx, { type: 'pie', ... })`. Data is fetched asynchronously via `fetch()` from a GitHub Gist, then parsed by splitting rows and columns. Random hex colors are generated for each slice using `Math.floor(Math.random() * 16777215).toString(16)`, and percentage labels are computed within the `datalabels` plugin formatter.

Rramsrinivaskatragadda@my.unt.edu

80% match

Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example shows a pie chart of total sales by category, with slices labeled by item category and sized by numeric sales values. It loads CSV data from a GitHub repository, parses rows by splitting on commas, and extracts columns 7 and 14 for labels and values. The chart is rendered on a canvas using Chart.js, with a hardcoded color palette and a non-responsive fixed size. The page fetches the dataset asynchronously and initializes the chart after the DOM loads.

SSushmaNamidi@my.unt.edu

80% match

Loading thumbnail…

Fork of Fork of Fork to pie chart

This example visualizes cereal ratings as a pie chart using the Chart.js library, rendering each cereal’s rating as a slice on an HTML canvas. It fetches a CSV dataset from a GitHub gist, parses the rows to extract cereal names and their rating values, then feeds those into the chart with a custom color palette. The chart is configured to be responsive while maintaining a fixed aspect ratio, and it displays a title above the visualization. The code explicitly uses the `Chart` constructor with the `type: 'pie'` option, along with canvas 2D context, to draw the final output.

TTarun Kumar Bosupally

79% match

Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category, with each slice representing a category and its corresponding sales value. The visualization is built using the Chart.js library, which renders the pie chart onto an HTML5 Canvas element. Data is loaded asynchronously from a remote CSV file (hosted on GitHub Gist) using the `fetch` API, then parsed by splitting rows and extracting the category and sales columns. The chart is configured with custom colors and a title, and it is set to be non-responsive with a fixed aspect ratio.

Llokeshchowdary465@gmail.com

78% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This pie chart visualizes the distribution of productivity levels from a remote CSV dataset, showing the count of each category as a slice. It fetches the data with `fetch`, parses the CSV text, and aggregates the third column into counts. The chart is rendered on a canvas using Chart.js, with a legend on the right and a title. An error message displays if no valid data exists.

VVignesh Nallamothu

78% match

Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy

77% match

Loading thumbnail…

Fork of Fork of 6 Buddha

This example shows a pie chart of total sales by item category, with each slice labeled by its percentage share. The code loads comma-separated data from a remote gist, parses the category and sales columns, and generates random colors for each slice. It uses Chart.js to render the chart on a Canvas element, displaying the percentage labels via the datalabels plugin. The chart is set to a fixed 400x400 size with a static title.

Rramsrinivaskatragadda@my.unt.edu

77% match