Skip to main content
SimilarExport ZIP
100%

Vega-Lite Line/Area Chart

✓ Published1🌍 Public
KKevin McMorrow
Last edited Sep 18, 2021
Created on Sep 18, 2021

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.

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

Vega Lite API

This example visualizes temperature fluctuations over time using a Vega-Lite area chart, with data sourced from a CSV of weekly San Francisco temperatures. The visualization loads data via D3’s `csv` method and constructs the chart programmatically using the `vega-lite-api` library, registering it with Vega and Vega-Lite. The chart encodes time on the x-axis and quantitative temperature values on the y-axis, with a tooltip displaying the temperature. Custom styling through a `config` object adjusts axis labels, titles, and colors, while the rendering is handled as an SVG via Vega’s view renderer.

Llefat92
92% match