Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 2, 2024

Created on Jul 2, 2024

This example demonstrates a time series of San Francisco daily temperatures using green, semi-transparent area marks. The visualization is built with the Vega-Lite API, which programmatically constructs a markArea encoding temperature over timestamp. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and rendered through Vega and Vega-Lite JavaScript libraries with a custom tooltip handler for interactivity.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays temperature data over time using an area chart, with a semi-transparent fill to emphasize trends. The chart is built with the Vega-Lite API, which compiles specifications to Vega and renders them as SVG. Data is loaded from a CSV file of San Francisco weekly temperatures using `d3.csv`. The visualization adapts to the full browser window and includes an interactive tooltip for exploring temperature values.

Ttnk-dev

90% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a temperature-over-time visualization using an area mark. It plots weekly temperature readings for San Francisco, with time on the x-axis and temperature on the y-axis. The code builds the chart declaratively using the Vega-Lite API, registering it with Vega and Vega-Lite, and loads the dataset via d3.csv. The chart renders as an SVG, includes tooltips via Vega Tooltip, and applies custom axis and label styling from a shared config.

CCurran Kelleher

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a multi-series line chart of daily temperature readings in San Francisco, with each line colored by its origin (such as weather station or measurement type). The visualization is built programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders with SVG, while integrating d3.csv for data loading and vega-tooltip for interactive hover details. Chart styling—including axis labels, title size, and dark text colors—is customized via a config object passed to the layout. The data comes from a gist-hosted CSV file containing timestamp and temperature fields.

Qqtrfx

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

88% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a week of temperature data from San Francisco using an area mark, with time on the x-axis and temperature on the y-axis. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `d3.csv` to load data from a remote gist. The chart auto-sizes to the full window and applies a custom configuration for axis and label styling, with a tooltip handler from Vega-Tooltip.

JJonas Carvalho

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a time-series line chart of weekly temperature data for San Francisco, using the Vega-Lite API to declare marks and encodings for time on the x-axis and temperature on the y-axis. The `getData.js` file loads CSV data from a remote URL via `d3.csv`, and the chart renders with a custom dark theme and tooltips. It leverages `vega`, `vega-lite`, `vega-lite-api`, and `vega-tooltip` to build the visualization in an SVG view.

Eeleshaky

88% match

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

SSimmer999

87% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays daily temperature variations in San Francisco over time, rendered as a smooth line chart using the Vega-Lite API. The line’s thickness and opacity are fixed, with tooltips revealing exact temperature values on hover. It loads CSV data from the UCI Auto MPG dataset via d3.csv, then constructs the chart with vl.markLine, encoding temperature as a quantitative field and timestamp as a temporal axis. The visualization uses vega-lite-api, vega-lite, vega, and vega-tooltip, with custom styling from a config object to adjust font sizes and colors.

IIlia Katkovnik

87% match