What's Happening to Our Forests? (Learning Vega-Lite)

100%

What's Happening to Our Forests? (Learning Vega-Lite)

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

This visualization uses a scatterplot to show the percentage of forest land across countries over time, with each circle representing a country-year pair and color encoding the year. Built with Vega-Lite via the vega-lite-api, it loads CSV data from a World Bank subset using d3.csv, then renders an SVG chart sized to the window. The configuration adjusts axis labels and styling, while the tooltip handler from vega-tooltip provides interactivity on hover.

AI-generated description

A visualization constructed using the vega-lite-api.

Data from World Bank.

MIT Licensed

Similar vizzes

Loading thumbnail…

What's Happening to Our Forests? (Learning D3)

This scatter plot visualizes the percentage of land area covered by forests across different countries and years. Each red, semi-transparent circle represents a single data point, with the x-axis mapping the year and the y-axis mapping the percentage of land area. The chart uses D3 v5 to load CSV data from a GitHub gist, then applies scales, axes, and circles via the `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering to an SVG canvas.

Aangichau

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart displays forest area in square kilometers per country for 2012, ranked in descending order with each bar colored by country. It uses the vega-lite-api library to construct the visualization, registering Vega and Vega-Lite for rendering. The chart pulls data from a CSV file via d3.csv and applies custom axis and label styling from a configuration object. Tooltips show exact values on hover, and the chart automatically fits the full browser window.

Wwobling1

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between land-use change and transport emissions for various food products, using color and tooltips to identify items. The visualization is built with the Vega-Lite API, which programmatically defines the chart specification, while the underlying data is loaded as a CSV file from Our World in Data. Rendering is handled by Vega, with d3.csv fetching the data and the Vega Tooltip handler providing interactive hover details. The chart fills the browser window and is configured for readability with custom fonts and axis styling.

Ootis

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render an interactive scatter plot of population density data, plotting population in 2021 against density per square mile for various countries. The data is loaded from a CSV file via D3’s `csv` function, and the plot encodes country as color with tooltips showing country names. The code registers Vega, Vega-Lite, and the Vega-Lite API, applies a custom dark theme through a config object, and sizes the SVG renderer to fit the window using `autosize`. The mark-point specification sets point size and opacity, though tooltip fields are limited to the country name.

Ppfoulley

74% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of population by country using a scatter plot, with points colored by percentage and positioned along a categorical country axis and quantitative population axis. It loads data from the UCI Auto MPG dataset via a Gist, though the code references CSS named colors and population fields. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, configures an SVG renderer with tooltips, and applies a custom dark theme for improved readability. The chart uses a point mark with reduced opacity and a zero-less scale to highlight population differences.

Gguitmonk-1290

73% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the World Happiness Report 2020 data, plotting each country’s happiness score against its logged GDP per capita, with points colored by regional indicator and tooltips showing country details. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the scatter plot, while `d3.csv` loads the remote dataset. The visualization is rendered as an SVG via Vega and Vega-Lite, with a custom configuration for axis and label styling, and it fills the browser window using an autosize fit setting.

AAnurag Desai

73% match

Loading thumbnail…

Gapminder Population Growth in Vega-lite

This example visualizes Gapminder population growth data by plotting each country as a circle on a scatterplot, with the year on the x-axis, total population on the y-axis, and circle size and color encoding population magnitude and country identity. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and loads the CSV data via d3.csv. It applies a custom configuration for axis styling and uses a tooltip handler to display country names on interaction.

Llakalia@wpi.edu

73% match

Loading thumbnail…

Vega-Lite API Countries

This visualization displays population by country as a horizontal bar chart, with countries sorted by population. Built with Vega-Lite’s API and rendered via D3, it loads data from a CSV of 2015 population figures. The chart uses a dark theme, custom axis styling, and tooltips showing exact values. The code registers Vega-Lite with a tooltip handler and fits the chart to the window size using an autosize configuration. The design improves readability with larger fonts and muted colors, while the interactive tooltip provides detailed population numbers on hover.

MMarta

73% match