Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 1, 2023

Created on Jun 1, 2023

This visualization plots daily closing prices from a CSV of South African index data using a scatterplot of semi-transparent points. The chart is built with the Vega-Lite API and rendered in D3, with window dimensions providing a full-screen view and tooltips showing the asset name. The `vl.x().fieldT('date')` and `vl.y().fieldQ('close')` encodings map date and price, while the configuration adjusts axis and label styling for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of [Vega-Lite] 3.2 Line Chart

This line chart shows the daily closing price of the S&P 500 index over time, using a single temporal x-axis and quantitative y-axis. The visualization is built with Vega-Lite 5 and rendered via Vega-Embed, loading a CSV dataset from a GitHub gist. The chart is specified declaratively in a JSON file, with a fixed width of 360 pixels and a simple line mark. The code relies on Vega-Lite’s encoding system to map the date and price fields.

AAhmad Nadeem

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

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

77% match

Loading thumbnail…

Fork of [Vega-Lite] 3.2 Line Chart

This example shows the daily closing price of the S&P 500 index as a simple line chart, with time on the horizontal axis and price on the vertical axis. It uses the Vega-Lite specification language, loaded via the Vega-Embed API, to parse a JSON configuration and render the chart. The data is fetched from a CSV file hosted externally, and the chart is drawn into an HTML div element using the Vega runtime library.

Aamycaroline11

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example plots the daily adjusted closing price of Apple stock (AAPL) as a line chart, with time on the x-axis and price on the y-axis, using a minimal dark-themed design. It loads CSV data from a GitHub gist via `d3.csv` and renders the visualization with the Vega-Lite API, specifically using `markLine` and encodings for temporal and quantitative fields. The code registers Vega, Vega-Lite, and Vega-Tooltip, customizes axis and label styles via a configuration object, and auto-fits the chart to the browser window.

Ppranav-vis

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

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

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays daily gas prices across multiple stations, plotted over time as a scatterplot of firebrick-colored points. Tooltips reveal station names on hover. The chart is built using the Vega-Lite API (vl) with Vega and Vega-Lite libraries, rendering to SVG via d3.v5, and pulls data asynchronously from a CSV hosted on GitHub Gist, sourced from the UCI Auto MPG dataset.

Ttmcgirr

74% match