Alcohol Vega Lite

100%

Alcohol Vega Lite

✓ Published0🌍 Public

Last edited May 22, 2021

Created on May 22, 2021

This example uses a scatterplot to compare beer servings and total liters of pure alcohol consumed per country, with tooltips revealing country names on hover. It fetches data from the FiveThirtyEight alcohol-consumption GitHub repository using D3’s `csv` loader, then renders the chart with Vega-Lite via the vega-lite-api wrapper, which registers Vega and Vega-Lite and uses vega-tooltip for interactions. The visualization adapts to the full window size and applies custom axis and label styling from a config object.

AI-generated description

A demonstration of how to start using D3 version 6.

data from

https://github.com/fivethirtyeight/data/tree/master/alcohol-consumption

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of food supply data, plotting Alcoholic Beverages against Recovered values for different countries, with tooltips revealing country names. Built with the Vega-Lite API, it uses `vl.markCircle` and `vl.encode` to define the chart. The code loads data from a CSV file via d3.csv, and renders the visualization using the Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries, with custom styling from a config object.

Bblueyjuice

84% match

Loading thumbnail…

Drinks Data Table Summary

This example displays a textual summary of a dataset on alcohol consumption by country, sourced from FiveThirtyEight. It shows the total number of rows and columns, the data size in kilobytes, and the first ten rows as formatted JSON. The visualization uses `d3.csv` to load the data and `csvFormat` to calculate its byte size, then appends the results to the page as `<pre>` elements with D3's `select` and `append` methods.

YYF

78% match

Loading thumbnail…

Global Alcohol Consumption Scatterplot

This scatterplot shows per capita alcohol consumption in liters for seven selected countries from 2010 to 2019, with each country assigned a distinct color. The visualization uses D3 v6’s `scaleTime` and `scaleLinear` to map years and consumption values to SVG circle positions, with axes rendered via `axisLeft` and `axisBottom`. Data comes from a WHO-derived CSV loaded with `d3.csv`, filtered to highlight trends in wine, beer, spirits, and total alcohol across the decade.

PPeter VanNostrand

77% match

Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg

76% match

Loading thumbnail…

Loading Alcohol Consumption CSV Data

This example demonstrates the basics of loading and parsing a CSV dataset with D3.js. It fetches global alcohol consumption data from the World Health Organization and displays a summary of the file’s size, row count, and column count in large text. The visualization uses `d3.csv` to asynchronously load the remote dataset from a GitHub Gist, then `d3.csvFormat` and `data.length`/`data.columns` to compute the displayed metrics. The page renders the result inside a `<pre>` element with no charting or graphical elements.

PPeter VanNostrand

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

Bblackbottt

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, colored by religion, with a tooltip showing temperature on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, and renders to SVG. Data is loaded asynchronously from a CSV file via D3’s `csv` function, sourced from the auto-mpg dataset. The chart is configured with custom axis and label styling, and fills the full viewport using automatic resizing.

AasafJortilles

75% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays per-capita liters of pure alcohol consumption by country, with values shown via colored bars and a formatted x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist, uses d3.scaleBand and d3.scaleLinear for positioning, and renders SVG marks. d3.format abbreviates large numbers.

SSamir Nandardhane

75% match