Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 19, 2021

Created on Feb 18, 2021

This example visualizes New York state unemployment rates from 1976 to 2020 using a line chart, with the data sourced from a CSV file linked in the code. It builds the visualization with the Vega-Lite API, registering Vega, Vega-Lite, and the tooltip handler in `index.js`. The `viz.js` file defines the line mark, encoding year on the x-axis and New York unemployment on the y-axis, while `config.js` customizes axis and label styling. Data is loaded via `d3.csv` in `getData.js`, and the chart is rendered as an SVG fitted to the window size.

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 Stylized Bar Chart

This example shows New York unemployment rates by year as a vertical bar chart, with navy styling for axis title and labels. It uses Vega-Lite’s `markBar` encoding with a quantitative y-axis and nominal x-axis, configured via the vega-lite-api. Data loads from a CSV via `d3.csv` in `getData.js`, and the chart renders in React with a fit autosize, a black tick color, and a tooltip exposing the rate value.

AAvonlea Fisher

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

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes U.S. state population trends from 2010 to 2019 using a multi-series line chart. The Vega-Lite API constructs marks encoded with x-axis time data, y-axis population values, and color grouping by geographic area, with tooltips for individual states. Population data is loaded asynchronously via d3.csv from a GitHub gist. The visualization renders in SVG and includes a dark-themed config that removes axis domains and customizes label styling for readability.

Nnonbots

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes COVID-19 vaccination data, plotting total vaccinations against people vaccinated as a scatter plot with tooltips showing location names. Built with the Vega-Lite API and D3.js, it registers Vega and Vega-Lite, loads CSV data via `d3.csv`, and renders an interactive SVG chart that fills the viewport. The visualization applies a custom configuration for axis styling and tooltip formatting, using a dark color scheme for labels and titles.

GGerasimos Katsagannis

76% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example displays a scatter plot of COVID-19 vaccination data, mapping daily vaccinations on the x-axis and total vaccinations on the y-axis. It uses the Vega-Lite API to construct the visualization declaratively, with d3.csv fetching the dataset from a GitHub-hosted CSV file. The code customizes the chart’s appearance through a Vega-Lite config object, adjusting axis styles and label fonts for readability. The visualization renders as an SVG via vega-tooltip for interactive hover details.

GGerasimos Katsagannis

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

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot Walmart store data, showing the relationship between unemployment rate and weekly sales, with points colored by holiday flag. The scatter plot encodes quantitative fields for both axes and uses a tooltip to display the weekly sales value for each point. The code registers Vega-Lite with a custom configuration for axis styling, loads the dataset via d3’s `csv` function, and renders an SVG that automatically fits the window size.

JJi Won Yeom

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

AAbanoubMagdy1

76% match