Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 13, 2022

Created on Aug 28, 2021

This example visualizes weekly U.S. gasoline prices as a line chart, with time on the x-axis and price per gallon on the y-axis, emphasizing trends through a simplified, clean design. It uses the Vega-Lite API to construct the chart declaratively, registering it with Vega and Vega-Lite, while D3’s `csv` module is referenced for potential data loading. The data, a static array of timestamped prices, is passed directly to the chart, which renders as a full-window SVG. Custom axis styling and large label fonts are configured to improve readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a line chart of weekly temperature data for San Francisco, using the Vega-Lite API to construct the visualization declaratively. The chart renders temperature values over time with a tooltip on hover, styled with custom axis configuration. It loads CSV data via d3.csv, registers Vega and Vega-Lite with the vega-lite-api library, and renders the final output as an SVG using vega-tooltip for interactivity. The visualization fills the entire browser window and adapts to its size.

CChristian Potdevin

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a line chart of weekly temperature readings from San Francisco, using Vega-Lite’s declarative API. The chart encodes time on the x-axis and temperature on the y-axis, with a tooltip revealing the precise temperature value per point. The visualization is built with the `vega-lite-api` library, which registers Vega and Vega-Lite, and loads data via `d3.csv`. It renders interactively to an SVG, sized to the window, with custom axis and label styling from a configuration object.

Jj-PGi

81% match

Loading thumbnail…

Vega-Lite API

This example demonstrates how the Vega-Lite API can be used to create an interactive line chart showing the price of electricity over time. The visualization plots a single series of Price values against a Date axis, with a tooltip that displays the exact price on hover. The code imports data from a CSV file hosted on GitHub, likely derived from the UCI Auto MPG dataset, and renders the chart using Vega-Lite’s `markLine` encoding. The implementation leverages the `vega-lite-api` library, registered with Vega and Vega-Lite, along with D3’s `csv` loader and the Vega Tooltip handler for interactive feedback.

EEdward Chung

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using a Vega-Lite line chart, with the data sourced from the Auto MPG Data Set via a GitHub Gist. The visualization is built programmatically through the Vega-Lite API, which registers Vega and Vega-Lite libraries, and employs d3.csv to fetch the dataset. The chart encodes timestamps on the x-axis and temperature values on the y-axis, with a semitransparent line style. Custom configuration adjusts axis styling, font sizes, and colors for improved readability, while the view auto-sizes to fit the browser window.

DDhvanil Vaghasiya

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

80% match

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

80% match