Skip to main content
100%

Gist 515d01d65d622b5733123dd0e2960cda

✓ Published0🌍 Public
Aamazingandyyy
Last edited Aug 14, 2023
Created on Aug 14, 2023

This visualization shows a personal credit-card transaction log from July 2023, mapping individual purchases by category and amount over time. It uses D3.js with `d3.forceSimulation` to position nodes representing transactions, while `d3.geoPath` renders a geographic background of the San Francisco Bay Area based on the merchants' locations. The data comes from the CSV file `tx.csv`, parsed into a bubble chart where node size corresponds to transaction value and color encodes category. The code also applies `transition.attrTween` for smooth node movements and tooltips to display transaction details on hover.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist f619992950dc14ce8674

This visualization renders a network of Bitcoin blockchain addresses and their transaction relationships. It uses the D3.js library's force-directed graph layout (d3.forceSimulation) to position nodes and links, with node size and color encoding transaction frequency and recency. The data originates from the public Bitcoin ledger, fetched via the Blockchain.info API. The code applies animated transitions through d3's built-in tweening and uses SVG paths for the link lines, revealing the structure of the cryptocurrency's transaction web.

Aannavital
75% 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
74% 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
73% match
Loading thumbnail…

Gist 488e4a1fda31f16613e690fb4b9b8aff

This visualization maps the evolution of cryptocurrency from Bitcoin to Ethereum and VeChainThor, comparing transaction costs and payment protocols. It uses d3.forceSimulation to position nodes representing milestones like the 2004 iPhone touchscreen and 2018 VeChain partnerships with BMW and LV. The rendering includes SVG paths and text labels showing token values in USD and ether, while a fixed-cost question references who takes transaction fees. Data comes from the gist’s plain-text file, with node styling and layout driven by D3’s force-directed API.

Aamazingandyyy
72% 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
72% match
Loading thumbnail…

Gist d48ac99dac6ce8f3ff73c4c181b58668

This visualization shows the spatial distribution of Bitcoin public keys as a network graph, mapping the cryptographic identifiers from the `genesis_public_key` dataset. It uses `d3.forceSimulation` with collision and link forces to arrange nodes, while `d3.geoPath` renders geographic background shapes from a topojson world map. Each node is drawn as a circle on a Canvas element, with color and size encoding key length and transaction frequency. The simulation runs continuously, with node positions updated each tick via `requestAnimationFrame`. The rendering approach combines Canvas 2D for the overlay and SVG for the map base, using `d3.scaleOrdinal` for categorical color mapping.

Aarchae0pteryx
71% match
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
71% match
Loading thumbnail…

DataClips + D3.js Force-Directed

This example visualizes monthly book purchase amounts as a force-directed node graph, where each node’s size corresponds to spending and color encodes tiers (green, yellow, orange, red) based on dollar ranges. It consumes a JSON dataset from a Heroku DataClip, preprocessed by parsing dates and amounts. Using D3.js v3’s `d3.layout.force`, nodes are positioned with gravity and charge scaled by amount, while SVG circles and text labels render the data. The color scale uses `d3.scale.category10()` for categorical differentiation, and dragging is enabled via `force.drag`.

663anp3ca
70% match