Money chart

100%

✓ Published0🌍 Public

Last edited Mar 7, 2017

Created on Mar 5, 2017

A donut chart displays the percentage breakdown of travel expenses, such as food, transport, and sleeping, with each slice’s arc labeled outside the chart. The tooltip reveals each category's percent, local currency amount, and equivalent in euros, based on a fixed exchange rate. Built with D3 v3, it uses `d3.svg.arc`, `d3.layout.pie`, and a color ordinal scale, rendering as SVG. Mouseover and mousemove events drive a custom HTML tooltip showing detailed cost data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

76% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income distribution across Sales, Dividends, and Interest using a D3 pie layout and arc generator. Hovering over a slice reveals a tooltip showing the percentage of the total amount, calculated with d3.sum. The chart uses a color scale with ordinal colors, labels positioned via arc centroids, and SVG rendering. Data is loaded from a CSV file, and the tooltip fades in and out based on mouseover and mouseout events.

BbeauMarko

75% match

Loading thumbnail…

Pie Chart - Expenses

This pie chart visualizes the proportional distribution of expenses across four categories: Food (40), Travel (20), Shopping (25), and Others (15). Built with D3.js v7, the SVG rendering uses the `d3.pie()` and `d3.arc()` generators to create the slices, with `d3.scaleOrdinal()` assigning distinct colors. The chart displays category labels positioned at each arc’s centroid using the `arc.centroid` method, and includes an HTML legend generated through D3's selection API. The hardcoded dataset drives the visualization, which is rendered entirely client-side in the browser.

Ggayathrisaxena23@gmail.com

75% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income sources—Sales, Dividends, and Interest—with each slice labeled and colored via a d3.scaleOrdinal. It uses d3.pie and d3.arc to generate the SVG paths, while mouseover events calculate percentages from the CSV data and reposition a tooltip with d3.select. The chart responds to hovers by increasing slice opacity and shows precise share values, with styling in CSS.

BbeauMarko

74% match

Loading thumbnail…

Pie Chart - Expenses

This example renders a simple pie chart that visualizes expense categories (Food, Travel, Shopping, Others) with their corresponding quantitative values. The chart uses d3.pie() and d3.arc() to generate the slices, with a d3.scaleOrdinal() providing the categorical color scheme. Each slice is labeled using arc.centroid() to position the category names, and a separate HTML legend is appended below the SVG to reinforce the color-coded categories. The visualization is built with d3.v7 and rendered as inline SVG.

YYash Raj Mathur

74% match

Loading thumbnail…

Donult Chart D3 V4

This donut chart visualizes the distribution of a "beautiful ratio" metric across five cities, with each arc segment sized proportionally and colored by city. The chart is built with D3 v4, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths with rounded corners and an inner radius. Hovering over a segment triggers a temporary opacity change and displays a tooltip showing the exact percentage, computed from the arc’s start and end angles. The visualization also includes a window-resize handler that redraws the chart after a 500ms delay.

CChandrakantThakkarDigiCorp

73% match

Loading thumbnail…

Donut chart

A donut chart displays a single numeric value of 47 as a proportion of 100, rendered with 20 equal arc segments around a central hole. Blue segments represent the value, while grey segments show the remainder, with a partial blue arc for the fractional part. Built with React and D3 v5, the code uses the `d3.arc` API to generate SVG paths, setting inner and outer radii from the SVG height, and computes angles via `Math.PI` divisions. The SVG element is selected with `d3.select`, and strokes create separation between segments.

BBhavyatulasi

73% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

73% match