Fork of Fork of Fork of Reusable D3 Scatter Plot

100%

Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published3🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

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

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

This example presents a pie chart of aggregated sales data by product category, loaded from a CSV file hosted on GitHub and rendered as an SVG. It uses D3 v6 APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart displays each category’s total sales in thousands and its percentage share, with labeled arcs and a legend.

KKritin Kesav

82% 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

81% match

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This fork of a reusable scatter plot activity presents a pie chart visualization, using D3.js version 6.7.0. It loads a CSV dataset from a GitHub gist, converts the score column to numeric values, and renders a pie chart where each slice is labeled with the data's name category. The chart is created with a reusable pie chart function that uses D3's pie, arc, and scaleOrdinal APIs to compute slice geometries and assign colors from the Category10 scheme. The visualization displays category labels directly on each slice, with a white stroke for separation.

CChiranjeeviUppala@my.unt.edu

81% match

Loading thumbnail…

Fork of Reusable pie chart

This example is a reusable pie chart that visualizes categorical data from a CSV file containing wine characteristics. It shows how each category's proportion is represented as a slice of the pie, with labels positioned at each slice's centroid and a color scale applied via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart is rendered as an SVG using D3 v7, with pie geometry computed through the `d3.pie` and `d3.arc` APIs. Hovering over a slice triggers a brief animation that expands the arc outward using D3 transitions, providing interactive feedback. The data is loaded asynchronously via `d3.csv`, and numeric values are converted before the slices are appended.

Vvaishnavgck@gmail.com

81% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com

81% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This pie chart shows the frequency distribution of the top 10 most common math scores from a student dataset, with each slice representing a score and its count. The visualization uses D3.js v7 to load CSV data, calculate score frequencies, and sort them to select the highest counts. D3’s `pie` and `arc` generators create the SVG paths, while a custom color palette (filtered from `d3.schemeCategory10`) fills each slice. A separate SVG legend, built with `d3.select` and data joins, maps colors to score values and counts, with the chart and legend displayed side by side in a flex container.

Hharichandanamone21@gmail.com

81% match

Loading thumbnail…

Fork of pie chart ICE-7

This fork of a pie chart visualizes the distribution of campus snacks by category, aggregating counts from a CSV file and displaying each category’s share with percentage labels outside the slices. It renders an SVG using d3.pie, d3.arc, and d3.rollup to aggregate data, while d3.scaleOrdinal with schemeTableau10 assigns colors. A separate HTML legend lists categories with their counts, and the tooltip shows exact values. The chart loads data asynchronously via d3.csv and uses d3.format for percentage display.

118121a1545

81% match

Loading thumbnail…

Fork of two

This pie chart shows the proportion of total sales by product category, with labels on each slice and a legend to the side. It uses D3 v7’s `d3.rollups` to aggregate sales per category and `d3.pie` to generate arcs, while `d3.scaleOrdinal` assigns colors. Each slice’s centroid is computed with `d3.arc.centroid` for label placement, and the SVG is rendered from CSV data.

Mmsahithipatel@gmail.com

80% match