TINTIN Vega-Lite API Template

100%

TINTIN Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 22, 2021

Created on Apr 17, 2021

This example visualizes financial data for SPACs, plotting each stock’s current price against its annualized return since IPO as a scatterplot. Each circle’s color encodes an acceleration value, and hovering reveals the stock’s name via a tooltip. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite, with D3’s `csv` function loading the dataset from a remote GitHub gist. Appearance customization, including axis styling and dark text, is defined in a separate config object, and the resulting SVG renders to fill the browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

TINTIN Vega-Lite API Template

This example visualizes SPAC (Special Purpose Acquisition Company) data, using a bar chart to show IPO Count over Year, with color encoding for Gross Proceeds. The visualization is built with the Vega-Lite API, combining vega, vega-lite, and vega-lite-api libraries, and renders as an SVG. Data is loaded asynchronously from a CSV URL via d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis styles and label fonts.

Ppnlinyz

91% match

Loading thumbnail…

TINTIN SPAC trend

This visualization shows the trend of SPAC and IPO activity in the US over time, using stacked bars to compare counts by type. The chart encodes the year on the x-axis and the summed IPO count on the y-axis, with color distinguishing SPAC from IPO types. It is built using the vega-lite-api, which registers vega and vega-lite, and loads CSV data via d3.csv. The bar marks are rendered with SVG, and appearance is customized through a configuration object for axis styling and tooltip settings.

Ppnlinyz

80% match

Loading thumbnail…

Vega-Lite API Fork

This example presents a scatter plot of IBM intraday trading volume, with each circle sized and colored to emphasize fluctuations over time. The visualization is built using the Vega-Lite API, which registers with Vega, Vega-Lite, and D3 v5 to render SVG output and tooltips. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset, though the code actually fetches IBM intraday data from a Gist. The chart auto-fits to the window size and applies custom axis and font styling from a configuration object.

GGarrett Siegel

79% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

78% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

Jjacoyat08

77% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

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

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes trading-day data as a scatterplot, mapping the trading day on the x-axis, trading time on the y-axis, and encoding color by count and circle size by percentage of buy orders, with tooltips showing buy counts. It uses the Vega-Lite API (`vl.markCircle`, `vl.encode`) with D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. The visualization is rendered as SVG via Vega, with custom config for improved readability and a Vega Tooltip handler for interactivity.

MMuhammadAaqib137

77% match