Line Vega-Lite API Template

100%

Line Vega-Lite API Template

✓ Published1🌍 Public

Last edited Dec 10, 2020

Created on Oct 25, 2020

This visualization displays daily temperature variations across a week in San Francisco, using an area chart to emphasize the range and trend over time. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and incorporates D3’s `csv` loader to fetch data from a GitHub Gist sourced from the Auto MPG dataset. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a fixed width and height fit to the viewport and a custom config that enlarges axis labels and titles.

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. //ep18

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template_Temperature

This example visualizes a week of San Francisco temperature readings as a single thick line chart, using data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via a GitHub Gist. The visualization is built entirely with the Vega-Lite API, which programmatically registers Vega and Vega-Lite, and uses d3.csv to fetch the data. The line encodes temperature over time, with tooltips enabled through Vega Tooltip, and the chart is styled by a custom config to remove axis domains and adjust font sizes. The visualization auto-fits to the full browser window dimensions.

OOleg Zhernovoy

93% match

Loading thumbnail…

Vega-Lite API Line Chart

This example renders a line chart of San Francisco weekly temperatures using the Vega-Lite API within a D3.js framework. The visualization displays temperature trends over time, with tooltips showing exact temperature values on hover. The code uses `vl.markArea` with encoded x- and y-fields, pulling data from a CSV via D3's `csv` loader. It integrates Vega, Vega-Lite, and the Vega-Lite API for declarative visualization, while customizing axis and label styling through a separate config file.

CCaroline Ghisolfi

92% match

Loading thumbnail…

Vega-Lite API Temperature Line Chart

This example shows a line chart of San Francisco weekly temperatures over time, using a clean dark-on-light design with tooltips displaying exact values. The visualization is built entirely with the Vega-Lite API, which programmatically constructs a specification for a single line mark with encoded x and y fields from CSV data loaded via `d3.csv`. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders the chart as SVG fitted to the viewport, with custom axis and label styling from a shared config object.

NNelson M

91% match

Loading thumbnail…

Vega-Lite API Template

This example renders a line chart of San Francisco’s weekly temperatures using the Vega-Lite API. The visualization maps timestamps to the x-axis and temperature to the y-axis, with a tooltip displaying the temperature value on hover. The code registers Vega and Vega-Lite, pulls data from a CSV via D3’s `csv` function, and customizes axis and label styles through a config object. The chart adapts to the browser window with autosize settings and outputs an SVG.

RReinaFeng

91% match

Loading thumbnail…

Vega-Lite API Template - Line/Area chart

This example shows a line-area chart of weekly temperature data for San Francisco, with the area fill emphasizing the variation in temperature over time. The visualization is built using the Vega-Lite API, with `vl.markArea()` defining the mark type and `.encode()` mapping the `timestamp` field to the x-axis and `temperature` to the y-axis. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the chart is rendered with an SVG view, configured with custom axis styles and tooltips through the `vega-tooltip` handler.

Nnkohdatavis

91% match

Loading thumbnail…

Line Chart with Vega Lite Tutorial

This line chart visualizes weekly temperature data for San Francisco, plotting temperature over time as a smooth, bold line. It uses the Vega-Lite API to define the mark and encode the x-axis with timestamps and the y-axis with temperature values, while the Vega-Lite library renders the chart as an SVG. The visualization also incorporates a custom configuration for axis styling and tooltips, with data loaded via D3’s `csv` function from a remote URL.

AAriana

91% match

Loading thumbnail…

Line Chart With Vega-lite API

This example displays a line chart of weekly temperature data for San Francisco, loaded from a CSV file via the `d3.csv` function. The visualization is built entirely with the `vega-lite-api` library, which abstracts Vega-Lite specifications into a chainable JavaScript API. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a tooltip showing the temperature value. Custom axis and label styling are applied through a shared config object, and the rendered SVG is fit to the browser window's dimensions.

Vvmonney

91% match

Loading thumbnail…

Line Chart of Temperature w/ Vega Lite API

This line chart visualizes San Francisco’s weekly temperature data using the Vega-Lite API, with timestamps on the x-axis and temperature on the y-axis. The code builds the chart by composing vega-lite-api methods, registering them with vega and vega-lite, and rendering with D3’s CSV loader for data ingestion. It configures axis styling, disables zooming on scales, and renders an interactive SVG with tooltips via vega-tooltip. A commented-out scatter plot variant is also included.

Hhunsingeruk@gmail.com

90% match