Fork of Vega-Lite API Template

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

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

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

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

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

Fork of Vega-Lite API Template

This example visualizes the relationship between the added and published dates of UCI Machine Learning Repository Auto MPG data records, using a Vega-Lite area mark to show temporal distribution. The code constructs the chart via the `vega-lite-api` library, which registers with `vega`, `vega-lite`, and `vega-tooltip` for interactive tooltips. Data is loaded asynchronously with `d3.json`, and the visualization renders as an SVG, with custom styling applied through a configuration object that adjusts axis and label appearance for readability.

DDhiraj Gede

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using the Vega-Lite API, rendering a line chart from CSV data. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It uses the `vega-lite-api` library alongside `d3.csv` for data loading, with a custom dark theme applied through a configuration file. The chart fills the browser window and updates dynamically, leveraging Vega’s rendering capabilities with SVG output.

MMark Mburu

Fork of Vega-Lite API Template

This example presents four interactive Vega-Lite visualizations in a two-by-two grid, covering distinct datasets: auto MPG characteristics, San Francisco weekly temperatures, country populations, and global religious demographics. The visualizations, rendered as SVG, use scatter plots, area charts, bar charts, and bubble charts to explore relationships and distributions across the data. The code uses the Vega-Lite API (with vega and vega-lite) to programmatically construct specifications, D3 for data loading via CSV, and Vega Tooltip for hover details. Data originates from the UCI Machine Learning Repository and multiple Gists, with styling customized through a config object.

MManick Vennimalai