Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 5, 2022

Created on Jan 5, 2022

This example visualizes budget data by service category over time using an area chart. The interactive tooltip, appearing on hover, reveals the total budget for each service in a given year. The visualization is built with the Vega-Lite API, which programmatically constructs the chart specification. The code loads CSV data from a GitHub URL, binds the renderer to an SVG view, and configures the dark theme and axis styling. It also leverages the vega-tooltip library's `Handler` for interactive feedback.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes yearly costs by bar height, with tooltips displaying the associated account code. The visualization is built with the Vega-Lite API, using `vl.markBar()`, `vl.x()`, and `vl.y()` to encode the data fields. It loads CSV data from a remote URL via `d3.csv`, then renders the chart to a canvas using Vega and Vega-Lite’s rendering engine. The `config.js` file customizes axis and label styling for improved readability, while the `vega-tooltip` handler enables interactive hover details.

Nnkmwambs

82% match

Loading thumbnail…

Vega-lite - template

This example uses Vega-Lite to render an area chart with yearly time on the x-axis and a non-zero-based quantitative total on the y-axis, with tooltips showing temperature values. The visualization is built programmatically using the `vega-lite-api` library, which registers Vega and Vega-Lite to produce an SVG. Data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart fills the window and applies custom axis and label styling from a config object, with tooltips provided by the `vega-tooltip` Handler.

HHgeginat

81% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template2

This example displays a line chart of temperature readings over time, using a simple categorical tooltip to show each value. The visualization is built with the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries, and rendered as an SVG. Data is fetched asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styling for improved readability.

AArookie-2020

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a time-series area chart of temperature data from a CSV file. The visualization uses the `vega-lite-api` to define a markArea encoding with `timestamp` on the x-axis and `temperature` on the y-axis, including a tooltip. The code loads data via `d3.csv` and renders the chart using Vega-Lite and Vega, with custom styling from a `config.js` file and tooltip functionality from `vega-tooltip`. It fills the browser window by setting the width and height to the viewport size.

Aacampbellblack

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

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of temperature readings over time, with a thin bar for each timestamp and a tooltip revealing the exact temperature value. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders the chart as an SVG with an interactive tooltip from vega-tooltip. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis labels and title colors. The canvas size adapts to the browser window using autosize.

KKazSoftwareEngineer

80% match

Loading thumbnail…

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

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes personal financial transactions as a scatter plot, with transaction dates on the x-axis and amounts on a logarithmic y-axis. The point size encodes the transaction amount, while tooltips reveal description, amount, and category details. Built with the Vega-Lite API, it registers Vega and Vega-Lite with a custom configuration that darkens labels and titles for improved readability. Data is loaded asynchronously from a remote CSV using d3.csv, and the visualization is rendered as an SVG that fits the full browser window.

CChris Fritz

79% match