Skip to main content
SimilarExport ZIP
100%

Drinks Data Table Summary

✓ Published2🌍 Public
YYF
Last edited Sep 6, 2018
Created on Sep 6, 2018

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.

AI-generated description

This data is about alcohol consumption by country.

This data comes from a story by FiveThirtyEight Dear Mona Followup: Where Do People Drink The Most Beer, Wine And Spirits.

MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a beer dataset loaded from a CSV file, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses D3 v5 methods `select` and `csv` to fetch and parse the data, then appends `pre` elements to the body. The text is styled with a black background and green monospace font via CSS. The dataset originates from Jean-Nicholas Hould’s craft-cans collection on Kaggle.

Jjons288
79% match
Loading thumbnail…

Alcohol Vega Lite

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.

Ddvinubius
78% match
Loading thumbnail…

Data Table Summary

This visualization displays a summary of a dataset loaded from a CSV file, showing the row and column counts alongside the file size in kilobytes. It then prints the first 10 rows of data as a formatted JSON object. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure the data size, and `d3.select` to append `<pre>` elements displaying the textual output.

SShane Carey
74% match
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a tabular dataset, showing the total row count, column count, and file size in kilobytes. It then prints the first ten rows as formatted JSON. The visualization uses D3 v5 APIs such as `d3.csv` to load the data, `d3.csvFormat` to measure its size, and `d3.select` to append `<pre>` elements to the page. The data consists of daily high and low stock prices for five companies sourced from Yahoo Finance.

Vveagy
74% match
Loading thumbnail…

Data Table Summary

This example shows a plain-text summary of a tabular dataset. It prints the number of rows, columns, and file size in kilobytes, followed by the first ten rows displayed as formatted JSON. The code uses `d3.csv` to load the data, `csvFormat` to compute its size, and `JSON.stringify` to display the preview. Styled with black background and green monospace text, it renders the output into `pre` elements appended to the page body, drawing from the 2013 stock price dataset.

Vveagy
73% match
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table about population estimates for the most populous countries in 2018. It shows the number of rows, columns, and file size in kilobytes, followed by the first 10 rows of the data formatted as JSON. The visualization uses d3.csv to load the data and d3.csvFormat to calculate the size, then writes results into <pre> elements via d3.select. The styling adopts a green-on-black terminal aesthetic from the provided CSS.

Ffloresh
73% match
Loading thumbnail…

Data Table Summary

This example displays a textual summary of a dataset of the world’s most populous countries from 2018, sourced from the United Nations. It shows the total row count, column count, file size in kilobytes, and the first ten rows as pretty-printed JSON. The code uses d3.csv, d3.csvFormat, and d3.select to load and format data, then appends text to the page via pre elements. A black background with green monospace text mimics a terminal output.

MMukund Khandelwal
73% match