Skip to main content
SimilarExport ZIP
100%

Line Chart With Vega-lite API

✓ Published1🌍 Public
Vvmonney
Last edited Sep 30, 2022
Created on Sep 27, 2022

This example displays a line chart of weekly temperature data for San Francisco, loaded from a CSV file via the `d3.csv` function. The visualization is built entirely with the `vega-lite-api` library, which abstracts Vega-Lite specifications into a chainable JavaScript API. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a tooltip showing the temperature value. Custom axis and label styling are applied through a shared config object, and the rendered SVG is fit to the browser window's dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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…

Line Chart with Vega Lite Tutorial

This line chart visualizes weekly temperature data for San Francisco, plotting temperature over time as a smooth, bold line. It uses the Vega-Lite API to define the mark and encode the x-axis with timestamps and the y-axis with temperature values, while the Vega-Lite library renders the chart as an SVG. The visualization also incorporates a custom configuration for axis styling and tooltips, with data loaded via D3’s `csv` function from a remote URL.

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

Fork of Vega-Lite API Template

This example displays a line chart of weekly temperature data for San Francisco, using the Vega-Lite API to construct the visualization declaratively. The chart renders temperature values over time with a tooltip on hover, styled with custom axis configuration. It loads CSV data via d3.csv, registers Vega and Vega-Lite with the vega-lite-api library, and renders the final output as an SVG using vega-tooltip for interactivity. The visualization fills the entire browser window and adapts to its size.

CChristian Potdevin
91% 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
91% match
Loading thumbnail…

Sample Line Graph of Vega-Lite API Template

This example draws a line graph of weekly temperature readings for San Francisco. It uses the Vega-Lite API to define a single line mark with a time-encoded x-axis and a quantitative y-axis, with tooltips showing temperature values. The visualization renders as SVG via Vega and Vega-Lite, while D3’s `csv` function loads the data from a GitHub gist. The code customizes label styling for readability and fits the chart to the full browser window.

Ccaineosborne
91% match