Transaction Analysis with Time (Hopefully)

100%

Transaction Analysis with Time (Hopefully)

✓ Published3🌍 Public

Last edited Jun 20, 2022

Created on May 17, 2022

Forked from Fork of Project Data Science

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Transaction Analysis with Time

A financial dashboard combines a temporal scatter plot and a time-series bar chart to analyze personal transactions, with linked selections across both views. The upper chart displays credit/debit amounts over time, while the lower plot correlates category, amount, and date. Built using D3.js v7 and Vega-Lite API within React, it renders via the `vl.vconcat` layout, reads CSV data from a GitHub gist, and includes interactive interval and point selection parameters for coordinated filtering.

CChris Fritz

91% match

Loading thumbnail…

Fork of Transaction Analysis with Time (Hopefully)

This visualization analyzes a personal transaction dataset, showing spending patterns across categories and time. It uses a scatter plot to display individual transactions by category and amount on a logarithmic scale, alongside a time-based chart for chronological trends. Users can brush the time chart to filter the scatter plot, and click on categories to filter the time view. The code uses the Vega-Lite API with D3.js to load data from a CSV file and render linked selections between the two views.

Ggyan9427

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes personal financial transactions as a scatter plot, with transaction dates on the x-axis and amounts on a logarithmic y-axis. The point size encodes the transaction amount, while tooltips reveal description, amount, and category details. Built with the Vega-Lite API, it registers Vega and Vega-Lite with a custom configuration that darkens labels and titles for improved readability. Data is loaded asynchronously from a remote CSV using d3.csv, and the visualization is rendered as an SVG that fits the full browser window.

CChris Fritz

79% match

Loading thumbnail…

Fork of Project Data Science

This visualization displays a linked view of personal financial transactions, with a scatterplot showing the amount and date of each transaction and a bar chart aggregating the total per transaction type. The displays are linked through interactive selections, where a brush or click on either chart filters the other. The chart uses the vega-lite API to build specifications from data fetched from a CSV file with d3.csv, and employs selectInterval and selectPoint parameters to create the interactive data queries.

CChris Fritz

78% match

Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot visualizes customer transactions by type (Deposit, Receive, Spend, Withdrawal) on a log-scaled date axis against a linear transaction amount axis. Each circle is overlaid with a D3 Voronoi grid, which captures mouseover events to trigger the tooltip without needing to hit the small circles directly. The legend supports hover highlighting and click filtering by transaction category, with smooth transitions via D3’s `.style` and `.attr` APIs. Built with D3.v3, SVG rendering, and jQuery for layout.

AAndresAnayaIsaza

73% match

Loading thumbnail…

Transaction History

This example shows a line chart of transaction history, plotting cost over time for a dataset loaded from a remote CSV file. The visualization uses D3 v5 (`d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`) to render an SVG line path, with labeled axes and a title. The code parses the CSV values, converts the date column to JavaScript `Date` objects, and applies margins to position the chart within a fixed 960×500 SVG canvas. Grid lines are drawn via tick sizes, and the line stroke is styled in blue.

WWiebke

71% match

Loading thumbnail…

Scatterplot with Voronoi

This scatterplot visualizes customer transactions by type, plotting transaction amount against date. Each circle is colored by transaction type (deposit, receive, spend, withdrawal) and the chart includes a legend for filtering. An invisible Voronoi grid, created with `d3.geom.voronoi`, overlays the plot to capture mouse events, triggering a tooltip on the nearest circle for an improved interactive experience.

MMattDionis

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

68% match