Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 4, 2022

Created on May 4, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a time series line chart of weekly temperature data for San Francisco. The visualization uses a line mark to connect data points over time, with tooltips displaying the temperature value on hover. The chart is built using the Vega-Lite API, which constructs the visualization specification programmatically and renders it via the Vega rendering engine. The code imports data from a CSV file hosted on GitHub, and customizes the chart’s appearance through a configuration object that adjusts axis styling and font colors. The visualization automatically fits its width and height to the browser window, using d3’s CSV parser to load the dataset.

DDon-eime

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a line chart of daily temperature readings from San Francisco over a week. The visualization is built by combining the Vega-Lite API and D3, with `vl.markLine` defining the encoding and `getData` fetching the CSV from a GitHub gist. The chart uses `vega`, `vega-lite`, and `vega-lite-api` to render an interactive SVG, includes a custom dark-themed config, and enables tooltips via `vega-tooltip`.

LLeandro Da Souza

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperatures, sourced from a CSV via d3.csv. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It leverages vega-lite-api to construct the chart specification, vega-lite to compile it, and vega-tooltip for interactive hover information, all styled with a custom config for readability.

JJadeITNT

93% match

Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperature data from a CSV file loaded via d3.csv. The visualization encodes timestamps on the x-axis and temperature on the y-axis, with a customized dark theme and larger axis labels for readability. The chart automatically resizes to fit the browser window and includes interactive tooltips via vega-tooltip. The code registers Vega-Lite with the API wrapper and uses the markLine specification to draw the single series.

Nnkarinti

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example streams weekly San Francisco temperature data from a CSV file into a Vega-Lite line chart, rendered as an SVG via the vega-lite-api and vega-tooltip libraries. The visualization uses `vl.markLine` with a time-encoded x-axis and quantitative y-axis, while `vl.x().fieldT()` and `vl.y().fieldQ()` define the encodings. Configuration in `config.js` removes axis domains, sets custom label fonts, and applies a dark color scheme. The code loads data with `d3.csv` and fits the chart to the full window size.

JJoakim Warholm

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

91% match