Vega-Lite

100%

✓ Published0🌍 Public

Last edited Jan 17, 2020

Created on Nov 14, 2019

This visualization, built with Vega-Lite, charts the rise of atmospheric carbon dioxide (CO₂) levels over time using a line chart. The data originates from the Scripps CO₂ program (Mauna Loa record), filtered to include only months with valid measurements. Each point represents a monthly average CO₂ concentration, plotted chronologically to reveal the overall upward trend and seasonal oscillations. The visualization is presented as a fork of an earlier block by domoritz, and the underlying dataset has been modified from its source to focus specifically on dates with complete records.

AI-generated description

Data from http://scrippsco2.ucsd.edu/data/atmospheric_co2/primary_mlo_co2_record but modified to only include date and CO2 for month with valid data.

forked from <a href='http://bl.ocks.org/domoritz/'>domoritz</a>'s block: <a href='http://bl.ocks.org/domoritz/4e3289f9266fb3ef7e9baa201060361b'>Vega-Lite Carbon Dioxide in the Atmosphere</a>

bsd-3-clause Licensed

Similar vizzes

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

76% match

Loading thumbnail…

Vega-Lite temperature

This visualization presents a line chart of weekly temperature readings in San Francisco, using the Vega-Lite API with D3.js for data loading. The chart maps timestamps to the x-axis and temperature values to the y-axis, with a zero-suppressed scale to highlight variation. It renders as an SVG via Vega-Lite’s view, configurable through a custom config.js that adjusts axis and label styling for readability. The data is fetched as CSV from a remote gist URL using `d3.csv`.

LLewis Ward

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a line chart of temperature readings over time, using the Auto MPG dataset. The chart is built using the Vega-Lite API, which is registered with Vega, Vega-Lite, and D3. Data is loaded via D3’s CSV parser from a remote gist. The visualization renders as an SVG, configured with a custom dark theme and tooltips, and displays temperature trends with a non-zero y-axis scale.

Nnkarinti

75% match

Loading thumbnail…

Vega-Lite API Template - linechart

This line chart visualizes daily temperature trends using the Vega-Lite API, which programmatically defines a line mark with encoded temporal x-values and quantitative y-values. Data is loaded asynchronously via D3’s `csv` parser from a San Francisco temperature dataset. The example demonstrates a minimal Vega-Lite specification, with tooltips enabled through vega-tooltip and custom axis styling in a separate config file. It integrates Vega, Vega-Lite, and the Vega-Lite API libraries, rendering to SVG and fitting the full browser window.

Llaplantalaplanta

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using a Vega-Lite line chart, with the data sourced from the Auto MPG Data Set via a GitHub Gist. The visualization is built programmatically through the Vega-Lite API, which registers Vega and Vega-Lite libraries, and employs d3.csv to fetch the dataset. The chart encodes timestamps on the x-axis and temperature values on the y-axis, with a semitransparent line style. Custom configuration adjusts axis styling, font sizes, and colors for improved readability, while the view auto-sizes to fit the browser window.

DDhvanil Vaghasiya

74% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

YYodae Lim

74% match

Loading thumbnail…

test_data

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.

Jjjacobatandover

73% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot displays daily temperature readings over time from a CSV dataset of San Francisco weather. The visualization is built using the Vega-Lite API, which constructs declarative specifications programmatically, then renders them through the Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously via D3's `csv` function, while the `vega-tooltip` handler provides interactive hover details for each circle mark.

CCurran Kelleher

73% match