test_data

100%

✓ Published0🌍 Public

Last edited Jul 14, 2021

Created on Jul 14, 2021

This visualization uses a Vega-Lite API to render an interactive line chart of CO2 emissions over time, with three distinct types compared via colored lines. The chart encodes Year on the x-axis, emission amount on the y-axis, and type as color, with tooltips showing year values. Data from a CSV file is loaded via d3.csv, and the vega-lite-api library, combined with vega-tooltip for hover interactions, generates the SVG output. The visualization fills the entire browser window and uses custom axis styling.

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…

Vega Chart - Emissions by Year

This example shows annual emissions totals as a filled area chart, with color encoding representing solid emissions by year. The visualization uses the Vega Lite API, registered with Vega and React, to render SVG output. Data is loaded via `d3.csv` from a GitHub-hosted CSV file. The chart is configured with custom axis styles, a black color scheme, and tooltips provided through the `vega-tooltip` Handler, scaling responsively to the window size.

AAmeer Nuri

77% match

Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001

77% match

Loading thumbnail…

Vega-Lite API Template

This example shows a line chart of temperature readings over time, rendered as a single thick stroke. The visualization uses the Vega-Lite API to specify the mark type and encodings, including the x-axis as a temporal field and the y-axis as a quantitative field with a non-zero scale. Data is fetched from a CSV file containing weekly San Francisco temperature measurements using d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip to enable interactive tooltips, and applies custom axis styling from a configuration object.

AAnkit5ingh

75% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

75% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

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

75% match

Loading thumbnail…

Vega-Lite API Line Chart Template

This example demonstrates a line chart of temperature over time, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders as an SVG. The chart encodes time on the x-axis and temperature on the y-axis, with tooltips enabled for data inspection. D3 is used to load the CSV data, and the configuration customizes axis styling and label fonts for readability.

JJohn Kobbeman

75% match

Loading thumbnail…

tests

This visualization plots air quality index (AQI) values over time, with each point colored by the main pollutant type. It uses the vega-lite-api library to construct a scatterplot with tooltips showing AQI value and pollutant. A horizontal red rule line is also drawn at a fixed y-value of 20, though its significance is not labeled. The data is loaded from a CSV file hosted on GitHub using d3.csv, and the visualization is rendered with Vega-Lite in an SVG view.

CChase Hall

75% match