Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template for week temperature

✓ Published1🌍 Public
RRuanzhenglin
Last edited Apr 15, 2021
Created on Apr 15, 2021

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.

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…

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
92% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes a week of temperature data from San Francisco as a line chart. The viz.js file defines the chart using the Vega-Lite API, encoding a temporal x-axis and quantitative y-axis with a tooltip, while config.js customizes the axes and typography for readability. The getData.js file loads the CSV data using d3.csv, and index.js registers Vega-Lite with vega-tooltip, renders the visualization to SVG, and fits it to the window dimensions.

CCurran Kelleher
92% match
Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

SSimmer999
91% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a temperature-over-time visualization using an area mark. It plots weekly temperature readings for San Francisco, with time on the x-axis and temperature on the y-axis. The code builds the chart declaratively using the Vega-Lite API, registering it with Vega and Vega-Lite, and loads the dataset via d3.csv. The chart renders as an SVG, includes tooltips via Vega Tooltip, and applies custom axis and label styling from a shared config.

CCurran Kelleher
91% match
Loading thumbnail…

Vega-Lite Timeseries Data

This example visualizes weekly temperature data for San Francisco as a smooth, semi-transparent area chart, with time on the x-axis and temperature on the y-axis. Hovering reveals the exact temperature via a tooltip. The visualization is built declaratively using the Vega-Lite API, with `vl.markArea` and encodings for timeline and quantitative scales. D3’s `csv` loader fetches the data from a remote GitHub URL, while Vega, Vega-Lite, and Vega-Tooltip handle rendering and interactions. Custom styling is applied through a configuration object that adjusts axis fonts and colors.

Iikerson
90% match
Loading thumbnail…

Vega-Lite API Temperature Area Chart

This example visualizes weekly temperature data for San Francisco as a smooth area chart, with the y-axis mapping temperature values and the x-axis representing timestamps. It demonstrates the Vega-Lite API by programmatically constructing a chart specification using its method chaining, including `vl.markArea`, `vl.x().fieldT`, and `vl.y().fieldQ`. The visualization is rendered via Vega and Vega-Lite, with data loaded using d3.csv, and uses custom axis styling from a shared config plus a tooltip handler from Vega Tooltip.

NNelson M
90% match
Loading thumbnail…

Vega-Lite Line/Area Chart

This example visualizes temperature data from the San Francisco week_temperature_sf CSV dataset using a Vega-Lite area chart. The chart plots temperature values over time, with a tooltip displaying the exact temperature for each data point. The visualization is built using the vega-lite-api library, which wraps Vega-Lite and Vega, and is configured with custom styling for axis labels and titles. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that fits the full browser window.

KKevin McMorrow
90% match
Loading thumbnail…

Vega-Lite API Template Area Chart

This example renders a Vega-Lite area chart of weekly temperature data for San Francisco. The visualization uses the vega-lite-api JavaScript library to define a markArea encoding with timestamp on the x-axis and temperature on the y-axis, both with zero-based scaling disabled. The chart is customized with config settings for axis labels and titles, and rendered as an SVG using vega, vega-lite, and vega-tooltip, with data loaded asynchronously via d3.csv. The view is sized to fill the browser window with a fit autosize type.

MMilena Belianovich Holtman
90% match