Fork of Kvanto - pie v3 -label

100%

Fork of Kvanto - pie v3 -label

✓ Published0🌍 Public

Last edited Mar 9, 2022

Created on Apr 9, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Kvanto - pie v2

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.

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

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

86% 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 kvanto - transaction v1

This visualization displays transactions from the Kvanto API, plotting daily transaction amounts in Danish kroner on the left axis and transaction counts on the right axis over time. It uses d3.scaleTime and d3.scaleLinear for the x and y scales, with d3.line generating the red and blue paths for each metric, while circles represent individual data points. The data is fetched via XMLHttpRequest, filtered by status, and aggregated using d3.rollup with d3.sum.

Llarsboergo

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

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

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