Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 5, 2021

Created on Sep 5, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperature data from a CSV file loaded via d3.csv. The visualization encodes timestamps on the x-axis and temperature on the y-axis, with a customized dark theme and larger axis labels for readability. The chart automatically resizes to fit the browser window and includes interactive tooltips via vega-tooltip. The code registers Vega-Lite with the API wrapper and uses the markLine specification to draw the single series.

Nnkarinti

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

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

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

77% match

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

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example streams weekly San Francisco temperature data from a CSV file into a Vega-Lite line chart, rendered as an SVG via the vega-lite-api and vega-tooltip libraries. The visualization uses `vl.markLine` with a time-encoded x-axis and quantitative y-axis, while `vl.x().fieldT()` and `vl.y().fieldQ()` define the encodings. Configuration in `config.js` removes axis domains, sets custom label fonts, and applies a dark color scheme. The code loads data with `d3.csv` and fits the chart to the full window size.

JJoakim Warholm

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

76% match

Loading thumbnail…

Gist 6285771

This simple line chart tracks the daily closing price of AAPL stock from January 2012 to May 2012, with a data file storing date–price pairs. It uses D3’s SVG rendering, applying conventional margins, a time scale for the x-axis, a linear scale for the y-axis, and axis components. The line is drawn with d3.svg.line, while domains are computed with d3.extent. The chart demonstrates loading and parsing TSV data with d3.tsv and formatting dates with d3.time.format, offering a clean, compact example of D3’s core data-join and scales.

11wheel

76% match