Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 28, 2021

Created on Nov 28, 2021

This example displays a horizontal line mark for each track and artist pair, with tooltips revealing weekly chart values from the Billboard dataset. The visualization uses the Vega-Lite API to construct a markLine encoding, mapping the `track` field to the x-axis and `artist` to the y-axis. Data is loaded via d3.csv from a gist, while vega, vega-lite, and vega-tooltip handle rendering and interaction. Configuration customizes axis and label appearance for clarity.

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

82% match

Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

MMichael Bergerson

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

82% match

Loading thumbnail…

Fork 4 of Vega-Lite API Template

This example displays a line chart of temperature readings over time, rendered as a single thick line across the full viewport. The visualization is built using the Vega-Lite API, with the chart specification defined in `viz.js` via `vl.markLine` and encodings for a temporal x-axis and quantitative y-axis. Data is loaded from a remote CSV file using D3’s `csv` function in `getData.js`. The rendering pipeline registers Vega, Vega-Lite, and a tooltip handler in `index.js`, with axes and label styling customized in `config.js`.

Iiffath.namira@csedge.org

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a filled line chart without strokes, mapping engine displacement on the x-axis and horsepower on the y-axis from the classic auto-mpg dataset. It uses the Vega-Lite API to construct the chart via its mark and encoding methods, with tooltips bound to each point’s vehicle name. The code loads CSV data through d3.csv, applies a custom configuration for axes and label styling, and displays the result as a full-window SVG using Vega-Lite’s renderer and view options.

HHiImSebastian

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a circular mark plot where each point represents a dataset item, with the x-axis ordered by region and the y-axis mapping intensity values, while color encodes intensity and tooltips reveal titles. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries and uses a custom configuration for axis styling. The data is fetched asynchronously from a remote JSON file using D3’s `json` method, and the view is rendered as an SVG, filling the browser window with a fit autosize setting.

AAbhishek Bhavsar

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

80% match