Vega-Lite temperature

100%

Vega-Lite temperature

✓ Published1🌍 Public

Last edited Jun 25, 2021

Created on Jun 25, 2021

Forked from Fork of Vega-Lite API Template

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`.

AI-generated description

A visualization constructed using the vega-lite-api.

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

91% match

Loading thumbnail…

Vega-Lite API Temperature Chart

This interactive chart displays San Francisco temperature trends over time, rendered as a thin line with tooltips that reveal exact temperature values on hover. Built using the Vega-Lite API, it leverages `vl.markLine`, `vl.x().fieldT`, and `vl.y().fieldQ` to encode the temporal and quantitative data, while `vega-tooltip`’s `Handler` provides the interactive popups. The visualization pulls CSV data from a GitHub gist via D3’s `csv` function, with styling customized through the `config` object. The chart resizes to fill the browser window using `autosize` and renders as SVG.

Ddrc6587

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

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

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

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

90% match