Fork of Project Data Science

100%

Fork of Project Data Science

✓ Published1🌍 Public

Last edited May 17, 2022

Created on May 17, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

77% match

Loading thumbnail…

Fork of test

This gallery example presents an interactive stacked bar chart that visualizes financial data over time from 2021 to 2044, with bars divided into six categories such as spent income, spent return, and retained capital. The chart uses negative and positive value ranges to show spending versus retained amounts, with mouseover highlighting to emphasize individual bars. Built with D3 v4, the visualization employs `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and SVG rendering with CSS-based highlighting triggered by mouse events. The data originates from a custom `FinancialPlan` class containing hardcoded arrays.

HHarsh Patel

74% match

Loading thumbnail…

Fork of company list

This example is a fork of a company list visualization, built with React, D3 v5, and Vega-Lite API. It shows a scatter plot of transactions by category and amount, paired with a time-based bar chart of the same data, both rendered as SVG. Users can brush on the time chart to filter the scatter plot, and click categories in the scatter to filter the time chart, with credit/debit status encoded by color. The data is loaded from a CSV file via `d3.csv`, and the charts use Vega-Lite’s `vl.markCircle`, `vl.selectInterval`, and `vl.selectPoint` APIs for interaction.

SSaiSree0122

74% match

Loading thumbnail…

Fork of index(11823810).html

This example presents an interactive data visualization dashboard for exploring CSV datasets. It loads user-selected data, summarizes key statistics on-page, and renders the values as interactive SVG bar charts with tooltips and clickable elements. Built with D3 v7, the visualization uses standard D3 selection and scaling APIs to map data to graphical marks. The interface also provides controls for data loading and styling, with all chart elements rendered as animated SVG within a responsive layout.

Eeeshani.boyapati@gmail.com

74% match

Loading thumbnail…

Fork of Project Data Science

This visualization, built with D3.js and the Vega-Lite API, combines a scatter plot and a bar chart to explore Hanoi real estate data. The scatter plot displays price per square meter against distance to a hospital, with point size encoding the number of bedrooms. A brushing interval selector on the x-axis filters the bar chart, while clicking a bar highlights a specific house type in both panels. The bar chart shows the count of each property type, with colors representing the categorical house types. The data is loaded from a remote CSV file, and the visual styling, including axis colors and guide fonts, is defined in a separate configuration module.

SStíofán ♔ Ó Conchubhair

73% match