Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 25, 2021

Created on Jul 25, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a line chart of gold export price indices over time using the vega-lite-api, with data loaded from a UCI-hosted CSV via d3.csv. The visualization automatically fits to the window size and applies custom axis and label styling. It uses vega, vega-lite, and the vega-tooltip handler for interactive tooltips, all wrapped in a D3 v5 bundle.

AAbanoubMagdy1

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays trade data as a bar chart, showing trade values by reporting country and mode of transport, with tooltips revealing partner countries. The visualization is built using Vega-Lite API, which compiles to Vega and renders as SVG, with D3.js handling data loading from a CSV file sourced from the UCI Machine Learning Repository. The chart is configured with custom axis styling and dark label colors for readability, and it resizes to fit the browser window.

HHalcyonWjr

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

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

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

81% match

Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

MMichael Bergerson

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using the Vega-Lite API, rendering a line chart from CSV data. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It uses the `vega-lite-api` library alongside `d3.csv` for data loading, with a custom dark theme applied through a configuration file. The chart fills the browser window and updates dynamically, leveraging Vega’s rendering capabilities with SVG output.

MMark Mburu

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a D3.js framework. It displays a line chart of automobile data from a CSV file, plotting horsepower over time with a viridis color scale and tooltips showing vehicle names. The visualization leverages the vega-lite-api library to construct the chart declaratively, while D3’s csv function loads the data. Custom configuration adjusts axis styling and font sizes, and the final SVG output is rendered across the full viewport with auto-sizing.

Zzykel

80% match