Sample Line Graph of Vega-Lite API Template

100%

Sample Line Graph of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 11, 2022

Created on Jan 11, 2022

Forked from Fork 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.

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

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

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

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a line chart of weekly temperature readings from San Francisco, using Vega-Lite’s declarative API. The chart encodes time on the x-axis and temperature on the y-axis, with a tooltip revealing the precise temperature value per point. The visualization is built with the `vega-lite-api` library, which registers Vega and Vega-Lite, and loads data via `d3.csv`. It renders interactively to an SVG, sized to the window, with custom axis and label styling from a configuration object.

Jj-PGi

91% match

Loading thumbnail…

Line Chart With Vega-lite API

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.

Vvmonney

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

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

91% match

Loading thumbnail…

Vega-Lite API Template

This example shows a line chart of temperature readings over time, rendered as a single thick stroke. The visualization uses the Vega-Lite API to specify the mark type and encodings, including the x-axis as a temporal field and the y-axis as a quantitative field with a non-zero scale. Data is fetched from a CSV file containing weekly San Francisco temperature measurements using d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip to enable interactive tooltips, and applies custom axis styling from a configuration object.

AAnkit5ingh

91% match