Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
AAbanoubMagdy1
Last edited Jul 1, 2022
Created on Jun 30, 2022

This example renders a line chart of gold export price indices over time using the vega-lite-api, with data loaded from a UCI-hosted CSV via d3.csv. The visualization automatically fits to the window size and applies custom axis and label styling. It uses vega, vega-lite, and the vega-tooltip handler for interactive tooltips, all wrapped in a D3 v5 bundle.

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

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
84% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Bitcoin trading activity using a line chart that plots both trading volume and opening price over time. The visualization is built with the Vega-Lite API, which constructs a specification rendered through Vega and Vega-Lite libraries, with the final output displayed as an SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart dynamically sizes to fit the browser window. Custom axis styling and tooltips, powered by vega-tooltip, enhance readability of the time-series data.

SSven
84% 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
83% 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
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a D3.js framework. It displays a line chart of automobile data from a CSV file, plotting horsepower over time with a viridis color scale and tooltips showing vehicle names. The visualization leverages the vega-lite-api library to construct the chart declaratively, while D3’s csv function loads the data. Custom configuration adjusts axis styling and font sizes, and the final SVG output is rendered across the full viewport with auto-sizing.

Zzykel
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature trends over time as a line chart, with points sized and colored by temperature values. The example is built using the Vega-Lite API, which generates a Vega-Lite specification that is rendered as an SVG via the Vega rendering engine. The data is loaded as CSV from a Gist using D3’s `csv` function, and interactive tooltips are enabled through the Vega-Tooltip handler. Appearance is customized through a configuration object that adjusts axis styles and typography.

Ddimanya
83% 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
82% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of automobile data from the UCI Auto MPG dataset, showing horsepower over time. The chart colors the lines by weight and uses the `fieldT` and `fieldQ` encoding methods to map temporal and quantitative data. The D3-based `vega-lite-api` library, along with the `vega` and `vega-lite` rendering engines, produces an interactive SVG visualization with a tooltip displaying car names. The configuration sets custom axis and label styling for improved readability.

Ccolbygogan
82% match