Airlines Safety VegaLite

100%

Airlines Safety VegaLite

✓ Published0🌍 Public

Last edited May 23, 2021

Created on May 22, 2021

The visualization plots airline safety incidents from 1985–1999 against incidents from 2000–2014, with each point’s color and tooltip encoding available seat-kilometers per week. It uses the Vega-Lite API (vl) to define a circle mark, with D3 v6 for CSV loading via d3.csv, and renders through Vega’s SVG view. The chart config customizes axis and label styles, while the tooltip handler is provided by vega-tooltip. Data comes from FiveThirtyEight’s airline-safety dataset.

AI-generated description

A demonstration of how to start using D3 version 6.

Data from https://github.com/fivethirtyeight/data/tree/master/airline-safety

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot visualizes terrorist reports from April 2003, encoded by date and threat level, with points colored by agency (CIA) and tooltips revealing detailed notes. The visualization is built using the Vega-Lite API, with `vl.markCircle` for marks and `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` encodings. Data is loaded from a CSV file via `d3.csv`, and interactive tooltips are provided through vega-tooltip. The chart resizes to the window and uses a custom dark theme defined in `config.js`.

BBrian Olczak

77% match

Loading thumbnail…

Vega-Lite FLights by Country

This visualization shows the number of flights per country as a bar chart, with each bar colored by country and sized proportionally to the flight count. It uses the Vega-Lite API to encode the data, with country on the x-axis and an aggregated count of flights on the y-axis, displayed as bars with a fixed size and full opacity. The data is loaded asynchronously via d3.csv from a raw GitHub dataset, and the chart is rendered to SVG using the Vega-Lite runtime with a custom config for axis styling and tooltip support.

Mm1k3yp

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

74% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

73% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Ssinghjy

72% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of California crash data uses Vega-Lite's API to map vehicle makes and models against crash characteristics, with points colored by gender and sized by an unlabeled field. The visualization renders via SVG, with tooltips exposing first and last names of involved individuals. Data is fetched as CSV using d3.csv, while the Vega-Lite API specification, registered with vega and vega-lite, controls encoding channels, scales, and styling. The dark theme, configured in config.js, customizes axis tick colors and label fonts.

DDeborah Ong

72% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of Milan metro suicide data, mapping years on the x-axis and metro lines on the y-axis with points colored by category. It uses the Vega-Lite API (vl) to declaratively define the visualization, with D3’s `csv` loading data from a Gist URL. The code registers Vega, Vega-Lite, and the vega-tooltip handler, then renders the chart as an SVG, sizing it to fit the window with custom axis and label styling from a shared config.

Ttatpiras

72% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes meteorite landing data, plotting mass against year for incidents after 1920 with mass under 40,000 grams. Circles are colored by fall type and include tooltips revealing the meteorite name. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries and wraps D3’s CSV loader to fetch data from a GitHub-hosted CSV file. A custom configuration improves readability, and the chart auto-fits its container’s dimensions, rendering as SVG with a Vega tooltip handler.

Jjulia-richards

72% match