Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 30, 2021

Created on Aug 30, 2021

This example visualizes temperature data as a scatter plot, with each point representing a measurement over time. The visualization uses the Vega-Lite API to define the chart declaratively, with `vl.markCircle` and `vl.x().fieldT('timestamp')` mapping time to the x-axis and temperature to the y-axis. Tooltips display the name of each data point via `vl.tooltip().fieldN('name')`. The data comes from a CSV file loaded with `d3.csv` from a GitHub Gist, and the chart is rendered using Vega, Vega-Lite, and the Vega-Lite API, with custom styling applied through a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature data with a Vega-Lite area chart, encoding timestamps on the x-axis and temperature values on the y-axis. The visualization is built using the `vega-lite-api` JavaScript library, which registers with `vega` and `vega-lite` to render SVG output. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the chart is configured to fit the full window size. A custom `config` object adjusts axis and label styling for readability, and tooltips are enabled through `vega-tooltip`. The underlying dataset is used from the UCI Machine Learning Repository.

KKeyan

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature data over time as a filled area chart, with the y-axis encoding temperature and the x-axis encoding timestamps from the CSV dataset. Built with the Vega-Lite API, it uses `vl.x().fieldT()` and `vl.y().fieldQ()` for temporal and quantitative encodings, and includes a tooltip via `vega-tooltip`. The code fetches data using `d3.csv`, applies custom axis and label styling through a config object, and renders the chart to fill the browser window.

DDaniel Deverell

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature over time as a scatter plot, with each point representing a timestamped temperature reading. The code uses the Vega-Lite API to define the mark and encodings, while D3’s CSV loader fetches data from a GitHub-hosted CSV file. The chart is rendered as an SVG and customized with a dark theme via a Vega-Lite config object. Mouse interactions are supported through the Vega Tooltip handler, which displays the temperature value on hover.

Sshubhanshu2000

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

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

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes weekly temperature readings for multiple locations, plotting each measurement as a point in a scatterplot with time on the x-axis and temperature on the y-axis. Hovering over a point reveals the location name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to produce an SVG rendering. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is configured to fit the full browser window with custom axis styling.

FFonda Irena Santoso

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a time series of temperature readings as a single line across the full screen, with tooltips displaying the temperature values on hover. It is built with the Vega-Lite API, which registers Vega and Vega-Lite to generate the chart, and uses D3’s `csv` loader to fetch data from a remote CSV file. The visualization is rendered as SVG, and its appearance—including axis fonts and colors—is customized via a `config` object.

MMartin Straußberger

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature trends over time as a line chart, with points sized and colored by temperature values. The example is built using the Vega-Lite API, which generates a Vega-Lite specification that is rendered as an SVG via the Vega rendering engine. The data is loaded as CSV from a Gist using D3’s `csv` function, and interactive tooltips are enabled through the Vega-Tooltip handler. Appearance is customized through a configuration object that adjusts axis styles and typography.

Ddimanya

89% match