Skip to main content
SimilarExport ZIP
100%

Fork of Pie Chart with Interactive Color Legend

✓ Published0🌍 Public
EEri Kim
Last edited Apr 10, 2023
Created on Apr 10, 2023

This pie chart visualizes the distribution of artwork classifications in the MoMA dataset, with each slice sized by the count of works in a department. Hovering over a slice reveals a tooltip showing the department name and count, while hovering over the interactive color legend dims all non-matching slices to highlight the selected category. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeTableau10 for coloring, built with Vue and rendered as animated SVG. Data is loaded from a CSV and aggregated using d3.flatGroup.

AI-generated description

I made a pie chart using the classification column in MoMA dataset. When you hover over an area, it displays a tooltip with the label and count. The color legend is also interactive. When you mouseover a legend, the corresponding pie area is highlighted.

ISC Licensed

Similar vizzes

Loading thumbnail…

Pie Chart with Interactive Color Legend

This pie chart visualizes the distribution of artwork classifications in the MoMA collection, using data loaded from a CSV file. Hovering over a pie slice displays a tooltip showing the classification label and count, while an interactive legend on the right highlights the corresponding slice when moused over. The chart is built with D3.js v7, using `pie()` and `arc()` for slice generation, `scaleOrdinal` with `schemeTableau10` for colors, and transitions for opacity changes during legend interactions.

EEri Kim
94% match
Loading thumbnail…

MoMA Artworks - Department & classification

This visualization combines a tree diagram with two pie charts to explore the MoMA dataset’s Department and Classification fields. The tree uses a hierarchical layout to show the distribution of artworks across departments and their sub-classifications, with interactive highlighting of connected nodes on hover. The two pie charts display the counts of artworks by Classification and by Department, each with interactive tooltips and legend-based highlighting. The visualization is built with Vue, d3.v7, and SVG, using d3.tree, d3.pie, d3.arc, and d3.scaleOrdinal for rendering and animations.

EEri Kim
85% 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
79% match
Loading thumbnail…

Fork of

A pie chart displays marks for different subjects, with each slice colored and paired with a legend identifying the subject and its numeric value. The chart reads subject and mark data from a CSV file via `d3.csv`, and uses `d3.pie` and `d3.arc` to compute the slice geometry, while `d3.scaleOrdinal` assigns categorical colors. Legends are generated as SVG groups with rectangles and text, and the whole visualization is rendered as an SVG element.

Ppravalika.thogaru10@gmail.com
79% match
Loading thumbnail…

Fork of pie chart

This fork of a pie chart visualizes categorical data as a donut-style ring with an accompanying legend. The code uses D3 v7 and renders the chart by mapping input data to arc paths via `d3.pie` and `d3.arc`, with each slice colored distinctly and a legend showing stroke outlines. The chart provides a static, non-interactive view of proportional shares, with text labels absent and only the legend indicating categories.

Ssaiabhishekmunnangi@gmail.com
79% match
Loading thumbnail…

Fork of Pie Chart Artistes

A donut chart displays the distribution of music genres by percentage, with each slice labeled and colored distinctly. The visualization uses D3.js to load CSV data and render an SVG, employing `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` with a custom color range, and d3-scale-chromatic for color handling. Hovering over a slice reveals a tooltip showing the precise percentage, calculated with `d3.sum`, while mouse events and CSS transitions manage tooltip visibility.

AAnissa Belkelfa
78% match
Loading thumbnail…

Fork of Pie chart Test

This visualization displays a basic pie chart of browser usage shares, with segments colored by a sequential ordinal scale and labeled with their names. The chart is rendered as an SVG using D3 v6, with data hardcoded in the script rather than loaded from the included CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal()` for color mapping, while labels are positioned using an inner arc's centroid. The SVG is centered via CSS, and the visualization is based on a tutorial by FrontendTips.

SSonuSriN
78% match
Loading thumbnail…

Fork of Pie Chart React & d3

This interactive pie chart visualizes a categorical color palette dataset loaded from a CSV file via `d3.csv`. The React component manages the data with `useState` and `useEffect`, rendering an SVG where each slice corresponds to a row, filled with its `RGB hex value`. The chart uses `d3.pie` and `d3.arc` to compute and draw the pie geometry, with a large outer radius creating a striking radial composition. Data loads asynchronously, displaying a "Loading..." message until ready.

Aalexcholmsky
78% match