Vega-Lite API Temperature

100%

Vega-Lite API Temperature

✓ Published1🌍 Public

Last edited Feb 5, 2023

Created on Feb 5, 2023

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

Vega-Lite API Practice 2

This example visualizes weekly temperature data for San Francisco as a single smoothed line, with each point’s exact value accessible via tooltip. It uses the Vega-Lite API to declaratively encode the timestamp and temperature fields, while the `d3.csv` loader fetches the data from a GitHub gist. The chart is styled with a custom configuration that removes axis domains and increases font sizes, and it renders as a full-window, responsive SVG via `vega-lite-api` with `vega-tooltip` for interactivity.

JJames Rhodes

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

93% match

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 temperature

This visualization presents a line chart of weekly temperature readings in San Francisco, using the Vega-Lite API with D3.js for data loading. The chart maps timestamps to the x-axis and temperature values to the y-axis, with a zero-suppressed scale to highlight variation. It renders as an SVG via Vega-Lite’s view, configurable through a custom config.js that adjusts axis and label styling for readability. The data is fetched as CSV from a remote gist URL using `d3.csv`.

LLewis Ward

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

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