kvanto - transaction

100%

kvanto - transaction

✓ Published2🌍 Public

Last edited Apr 19, 2021

Created on Feb 14, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

74% match

Loading thumbnail…

Tabel Kvanto

This example displays a summary table of transaction statistics, comparing accepted, declined, and refunded amounts and counts for today, yesterday, and the last month. The code fetches transaction data from a remote API, deduplicates entries by order ID, and aggregates the values into a tabular layout. Users can click on column headers to sort rows, with D3’s `select` and `csv` functions rendering the table and toggling ascending or descending sort order via CSS classes. The visualization uses D3 v6 and relies on a custom HTTP request to retrieve the JSON data.

Llarsboergo

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

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

70% match

Loading thumbnail…

Transaction Analysis with Time (Hopefully)

This visualization pairs a scatter plot of transaction amounts by category with a time-series view of the same data, enabling linked filtering through interval and point selections. The top chart plots logged amounts against categories, while the bottom chart displays amounts over time from a CSV file of personal financial transactions. Built with Vega-Lite and D3, the charts use cross-filtering to highlight correlated selections, with tooltips showing amount, description, date, credit/debit status, and category.

CChris Fritz

68% match