Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 21, 2021

Created on Nov 21, 2021

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.

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…

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

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

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

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

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

A line chart displays temperature readings over time, with a tooltip that reveals the exact temperature on hover. The visualization is built using the Vega-Lite API, which translates a concise specification into a rendered Vega graphic. Data is loaded from a CSV file of San Francisco weekly temperatures via the `d3.csv` method. The chart's appearance, including axis styling and label fonts, is customized through a configuration object, and the visualization resizes to fit the browser window.

Nnkarinti

93% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template - Temperatures

This example visualizes weekly San Francisco temperature data as a line chart built with the Vega-Lite API in a D3.js environment. It shows temperature fluctuations over time, with tooltips displaying specific values. The code imports and configures vega, vega-lite, vega-lite-api, and vega-tooltip, using d3.csv to load the data from a GitHub Gist. The chart is rendered as a full-window SVG, with axes and labels customized through hand-defined configuration objects to improve readability.

Kkatebacon32

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

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

93% match