Kvanto - pie v3

100%

Kvanto - pie v3

✓ Published1🌍 Public

Last edited Apr 9, 2021

Created on Mar 30, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

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

89% match

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

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

75% match

Loading thumbnail…

kvanto - transaction

This visualization displays approved transactions from the kvanto.com data source as a line chart with circular markers. The chart plots transaction amounts (in DKK) over time on a Cartesian coordinate system, using red semi-transparent circles to highlight individual data points connected by a red line. The implementation uses D3 version 6 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `curveBasis`, rendering to SVG. Data is fetched via `XMLHttpRequest`, filtered for successful authorizations, and mapped to date and amount values for visual encoding.

Llarsboergo

74% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

74% match

Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

DDDDDDanica

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

73% match