Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 16, 2022

Created on May 16, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of auto MPG data from the UCI Machine Learning Repository, plotting `account_number` against `amount` with points colored by `origin` and tooltips revealing car `name`. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is then rendered to SVG by Vega. Custom styling in `config.js` adjusts axis labels and colors for readability, while `getData.js` fetches CSV data using D3’s `csv` function, and the final chart is displayed full-window with interactive tooltips via the `vega-tooltip` handler.

WWinnie Wei

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Fitbit activity data as a scatterplot, with each circle representing an activity record. The x-axis plots the date and the y-axis plots activity type, while color distinguishes the data’s origin and tooltips reveal the activity name. Built with the Vega-Lite API, it loads CSV data via d3.csv from a GitHub repository and configures axis styling and tooltip handlers through vega-tooltip, rendering as SVG with automatic sizing to fit the viewport.

IIshana

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between square footage and price, with each point representing a property and tooltips revealing the property type. Built using the Vega-Lite API, it loads CSV data from a GitHub gist and renders an interactive scatterplot. The code registers Vega and Vega-Lite, then configures the visualization with custom axis styling, a point mark with size and opacity settings, and a tooltip handler for interactivity.

JJaswitha09

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

NNaimisha-M

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Bitcoin trading activity using a line chart that plots both trading volume and opening price over time. The visualization is built with the Vega-Lite API, which constructs a specification rendered through Vega and Vega-Lite libraries, with the final output displayed as an SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart dynamically sizes to fit the browser window. Custom axis styling and tooltips, powered by vega-tooltip, enhance readability of the time-series data.

SSven

81% match