Fork of Fork of Fork of Fork to pie chart

100%

Fork of Fork of Fork of Fork to pie chart

✓ Published0🌍 Public

Last edited Apr 11, 2024

Created on Apr 11, 2024

Forked from 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.

AI-generated description

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

Similar vizzes

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

78% match

Loading thumbnail…

Fork of React Starter

This example demonstrates a doughnut chart built with Chart.js, displaying categorical color-coded data slices against a React-based “Hello React!” message. The visualization fetches soccer statistics from a remote CSV file, parsing values like matchweek, expected points, and actual points. While the fetched data is stored in application state and rendered as JSON text, the visible chart remains hardcoded with sample values, leaving the CSV data separate from the graphical output. The canvas element renders the chart via the Chart.js API, alongside React’s rendering of the text message.

VVineela Reddy

78% match

Loading thumbnail…

Fork of Fork of Fork of Loading and Parsing CSV Data

This example visualizes the placement status of students from a CSV dataset using D3.js. The data is loaded and parsed with `d3.csv`, then summarized with file size, row count, and column count displayed as text. A pie chart rendered in SVG compares the percentage of placed versus unplaced students, using `d3.pie` and `d3.arc` with distinct colors and percentage labels. The visualization demonstrates loading, parsing, and aggregating CSV data, followed by a simple categorical comparison via a donut-style pie chart.

Mmanthenasirisha06@gmail.com

77% match

Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example presents a pie chart of total sales by item category, loaded from a Walmart CSV file. It shows the distribution of sales across categories, with each slice sized by the total sales value. The visualization is built using the Chart.js library, which renders the pie chart onto an HTML canvas element. Data is fetched asynchronously from a GitHub gist, parsed from CSV format, and then mapped to chart labels and values. The chart uses a fixed canvas size and disables responsive resizing to maintain a consistent aspect ratio.

Rreddysushma994@gmail.com

76% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Loading and Parsing CSV Data

This visualization displays the job placement status of students from a CSV dataset, comparing the percentages of placed and unplaced individuals through a pie chart. The page also presents a text summary of the dataset's size, row count, and column count. Built with React and D3 v7, it loads data via `d3.csv` and uses `d3.pie` to compute arc segments, with `d3.scaleOrdinal` for color mapping. The chart is rendered as SVG, with labels showing each category's name and percentage.

Cchamarthisreenivasvarma@gmail.com

76% match

Loading thumbnail…

Fork of Pie Chart _Niharika

This pie chart displays the percentage marks achieved by a student in each class subject. The D3.js v5 code loads a CSV dataset from a GitHub gist, computes the pie layout, and renders colored SVG arc segments with percentage labels. A legend on the right maps each color swatch to its corresponding subject and value, while the chart uses `d3.pie()` and `d3.arc()` for geometry and `d3.scaleOrdinal` for color assignment.

NNiharika Reddy Amanaganti

75% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999

75% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com

75% match