Vega-Lite API Template_Temperature

100%

Vega-Lite API Template_Temperature

✓ Published1🌍 Public

Last edited Nov 26, 2022

Created on Nov 26, 2022

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.

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…

Line Vega-Lite API Template

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.

Jjyotigpt790

93% match

Loading thumbnail…

Vega-Lite API Temperature

This example visualizes a week of San Francisco temperature readings as a smooth line chart, with a tooltip that reveals the exact temperature at each point. The visualization is constructed programmatically using the Vega-Lite API, with vega, vega-lite, and vega-tooltip handling rendering and interaction. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart fills the browser window, and its axes and labels are customized through a configuration object to improve readability against a dark color scheme.

MMarta

93% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Ssinghjy

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

90% match

Loading thumbnail…

Vega-Lite API Template for week temperature

This visualization shows a week of temperature readings in San Francisco as a stacked area chart, with temperature mapped to the vertical axis and timestamps along the horizontal axis. The chart is rendered using the Vega-Lite API, which registers Vega and Vega-Lite with `vl.register` and renders to SVG via the `vega` view. Data is loaded asynchronously from a CSV file using `d3.csv`, while tooltips are enabled through the `vega-tooltip` Handler. The appearance is customized through a config object that adjusts axis and label styling.

RRuanzhenglin

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

90% match

Loading thumbnail…

Vega-Lite API Line Chart Template

This example demonstrates a line chart of temperature over time, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders as an SVG. The chart encodes time on the x-axis and temperature on the y-axis, with tooltips enabled for data inspection. D3 is used to load the CSV data, and the configuration customizes axis styling and label fonts for readability.

JJohn Kobbeman

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

90% match