Fork of Butter Macronutrients

100%

Fork of Butter Macronutrients

✓ Published0🌍 Public

Last edited Aug 10, 2025

Created on Aug 10, 2025

This interactive pie chart visualizes voting results from 602 total members, showing 275 cast votes with 270 agreeing, 5 disagreeing, and 327 not voting. Clicking an arc highlights that segment by increasing its opacity and stroke width. Built with D3 v7, the chart uses `d3.pie` and `d3.arc` generators to compute arc paths and label positions, rendered into an SVG with a unidirectional data flow architecture managing state updates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Butter Macronutrients

This example shows a reusable pie chart that displays two different macronutrient datasets, toggled by a button. The chart renders SVG arcs with white text labels at each slice’s centroid, using `d3.pie()` and `d3.arc()`. It demonstrates a function-based reusable chart pattern with getter/setter methods for width, height, value, label, and color scales. The `d3.schemeCategory10` ordinal scale assigns colors to slices, and the button switches between the two sample datasets.

224cs077@kpriet.ac.in

79% match

Loading thumbnail…

Butter Macronutrients

A pie chart visualizes butter's macronutrient composition per 100 grams, showing fat as the dominant slice at 81.11g alongside smaller protein and carbohydrate segments. Clicking any slice highlights it with a darker stroke and full opacity while dimming others. Built with D3 v7, the chart uses pie and arc generators with a custom start angle for rotation, and labels position via arc centroid calculations. A unidirectional data flow pattern manages selection state, with the SVG rendered through d3.select and join operations.

CCurran Kelleher

78% match

Loading thumbnail…

pie

A donut chart displays the distribution of votes among four options, with each arc segment sized proportionally to its vote count. The visualization uses d3.js v4 to compute arc paths via `d3.pie` and render them as SVG paths with a white stroke, while text labels positioned along the outer radius identify each option. Data is hardcoded as a JavaScript array, and colors are assigned randomly using `d3.scaleOrdinal` with the `schemeCategory20` palette.

RRonolibert

72% match

Loading thumbnail…

Fork of Fork of Butter Macronutrients

A reusable D3.js v7 bar chart demonstrates how a chart function can render and update between two datasets. The visualization displays categorical labels on the x-axis and numeric values on the y-axis, with color-coded bars for each category. A button click triggers a toggle between the two sample datasets, clearing the existing SVG and re-rendering with the new data. The code uses D3 scales (`scaleBand` and `scaleLinear`), axis generators (`axisLeft`, `axisBottom`), and selection methods to build the SVG chart programmatically.

Mmkavipriya234@gmail.com

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

71% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart11

This donut chart displays the relative proportions of three income sources—Sales, Dividends, and Interest—loaded from a CSV file. Each slice is labeled with its category name and colored using a custom ordinal scale. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice geometry and `scaleOrdinal` for coloring. Hovering over a slice triggers an interactive tooltip that calculates and displays the percentage of the total amount represented by that slice, using `d3.sum` for aggregation and event listeners for mouse interactions.

66mandati6

70% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

RRochelle

69% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage breakdown of nutritional components, such as carbohydrates, proteins, and fats, using interactive slices with hover effects that display exact values via tooltips. A legend on the right side highlights corresponding slices when hovered, dimming non-related arcs. Built with D3 v7, the chart uses the `pie` and `arc` functions to generate the layout and `scaleOrdinal` with `schemeTableau10` for colors. Transitions and opacity changes create a smooth, interactive experience for exploring the data.

Ttejasviteegala@my.unt.edu

69% match