Skip to main content
SimilarExport ZIP
100%

Fork of Kvanto - pie v2

✓ Published1🌍 Public
Llarsboergo
Last edited Mar 30, 2021
Created on Feb 28, 2021
Forked from Kvanto - pie

This example shows an interactive pie chart visualizing transaction data grouped by card method (VISA, MASTERCARD, VISAELECTRON) and status, with data loaded from a remote API. The chart renders as SVG paths using `d3.pie` and `d3.arc`, with a donut layout and labels connected via polylines. The code uses `d3.rollup` and `d3.group` to aggregate transaction counts, and transitions animate arc updates and label repositioning via `transition.attr`. A spectral color scale maps categories, and clickable labels are appended for potential interactivity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Kvanto - pie v3 -label

A small multiples pie chart displays transaction payment methods and their statuses, with labels and leader lines connecting slices to text. The visualization updates smoothly via `d3.transition` when a payment method label is clicked. Built with D3 v6, it uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.rollup` to group and aggregate data loaded from a remote API. A spectral color scale encodes categories, and SVG renders the animated chart.

Llarsboergo
92% match
Loading thumbnail…

Kvanto - pie v3

This animated donut chart visualizes payment transaction counts by card method and status, sourced from a live API endpoint at kvanto.com. The chart groups data by order ID, filters to approved and declined statuses, and aggregates counts via `d3.rollup`. Using `d3.pie` and `d3.arc`, it renders colored slices with labels and polylines, applying `d3.scaleOrdinal` with an interpolated spectral palette. Transitions animate updates smoothly through `transition.attrTween` and opacity changes, while `d3.group` structures the hierarchical data before rendering in SVG.

Llarsboergo
89% match
Loading thumbnail…

Kvanto - pie

A donut chart displays transaction amounts grouped by payment method from the Kvanto API, filtering only approved transactions. The visualization uses d3.pie and d3.arc to generate and render SVG paths, with d3.scaleOrdinal and an interpolateSpectral color scale. Labels are positioned using arc.centroid, and transitions animate updates when data changes.

Llarsboergo
83% match
Loading thumbnail…

Fork of Fork of kvanto - transaction v2

This interactive D3.js (v6) visualization displays transaction data from Kvanto as two overlaid time-series line charts: red lines and circles represent transaction amounts in DKK, while blue lines and circles show transaction counts, each with its own y-axis. Users can switch between time periods (1 month, 3 months, 1 year) via clickable text buttons that trigger data refreshes and animated transitions, where old chart elements fade out before new ones appear. The SVG-based rendering uses d3-scaleTime, d3-scaleLinear, d3-axisLeft/Right, and d3-line to build the charts, pulling data from a remote URL via XMLHttpRequest.

Llarsboergo
80% match
Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This donut chart displays income categories (Sales, Dividends, Interest) with each slice’s percentage revealed via an interactive tooltip on mouseover. Built with D3 v5, it loads data from data.csv, scales colors with `scaleOrdinal`, and computes slice geometry using `pie` and `arc` functions. Hovering highlights each slice’s opacity change and shows a tooltip positioned at the cursor, while labeled text sits inside each arc segment. The SVG rendering includes a padded, rounded arc style with corner radius.

NNarayana Reddy
77% match
Loading thumbnail…

Fork of [TEST] Pie Chart

This donut chart visualizes credit rating distributions, with categories like "AAA Local" and "BBB- Internacional" shown as proportional arc segments. The D3 v5 code uses `pie()` to compute arc data, `arc()` for path geometry, and `scaleOrdinal()` for the color palette. A legend maps labels and percentage values, rendered via SVG rects and text elements, while data is loaded asynchronously from a JSON file using `json()`.

Ggopiganta
76% match
Loading thumbnail…

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

NNarayana Reddy
76% match
Loading thumbnail…

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

NNarayana Reddy
76% match