Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
LLeandro Da Souza
Last edited Mar 24, 2021
Created on Mar 24, 2021

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`.

AI-generated description

A visualization constructed using the vega-lite-api.

LINE CHART BEBE

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 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 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 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
94% 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 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 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
92% 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
91% match