Obesity Among Adults

100%

Obesity Among Adults

✓ Published0🌍 Public

Last edited Sep 24, 2020

Created on Sep 11, 2020

This example demonstrates how to load and inspect a dataset on adult obesity rates by country, displaying basic statistics about the data file. The visualization presents three key metrics: the file size in kilobytes, the number of rows, and the number of columns. Using D3.js version 5.11, the code loads a TSV file from a remote URL via `d3.tsv`, formats the data with `d3.tsvFormat`, and calculates the byte length of the formatted string. The resulting information appears in a large `<pre>` element. The dataset originates from Kaggle, covering obesity rates from 1975 to 2016.

AI-generated description

The dataset contains the information of obesity rate among adults by country.

The original dataset: obesity by country

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by displaying key statistics about the Global Obesity Rates 2014 dataset. It uses d3.csv to fetch the remote CSV file, then reports the file size in kilobytes, the number of data rows, and the number of columns in a large pre-formatted text element. The code also includes commented alternatives using fetch with async/await and d3.csvParse, as well as a nested promise chain, highlighting different approaches to asynchronous data handling in D3 v5.

Yyyaaa1

77% match

Loading thumbnail…

World Adult Obesity

A heat map of global adult obesity rates uses color-coded countries on a world map to show prevalence by year. Users can scrub through available years for smooth transitions or input a specific year, with pop-ups on hover providing country details and a legend describing the color scale. It is rendered as SVG via D3 v5, using d3.min.js for selection and shape drawing, with data loaded from a static CSV.

Aacb30

73% match

Loading thumbnail…

Diabetes Data

This example loads a CSV dataset on diabetes in adult females from a GitHub gist and compares the number of text bytes, rows, and columns in the file. It reads the data using the `d3.csv` request method, then formats it with `d3.csvFormat` to measure its size in kilobytes, and displays these figures in a large `<pre>` element on the page. The visualization is a simple textual summary, not a chart, highlighting the dataset’s dimensions for comparative analysis of medical predictor variables. The data originates from the Pima Indians Diabetes Database on Kaggle.

AAnurag Desai

70% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the obesity rates of the most affected countries using 2016 data from a Wikipedia list. It renders horizontal bars for each country, with the length of each bar proportional to the obesity rate percentage. The visualization uses D3 v7 with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. The SVG elements are styled with `fill: steelblue`, and the data is loaded from a local `data.csv` file.

JJadeITNT

69% match

Loading thumbnail…

Loading and Parsing diabetes risk CSV Data

This example loads a diabetes risk prediction dataset from UCI’s machine learning repository, sourced from Sylhet Hospital in Bangladesh, and displays its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the CSV file, then d3.csvFormat to calculate the file size, with the summary rendered in a large-text <pre> element. It also includes commented-out alternatives using fetch, async/await, and d3.csvParse, demonstrating different ways to handle asynchronous data loading.

Llakalia@wpi.edu

68% match

Loading thumbnail…

D3 DataBinding

The example maps U.S. adult obesity rates from CDC 2008 data by projecting state boundaries and scaling each state’s area according to its value. It uses D3 v5 with `d3.geo.path()` to render TopoJSON features, applying a centroid-based transform that proportionally enlarges states with higher obesity ratios while adjusting stroke width inversely. The visualization appears twice on the page, with the second instance likely reusing the same logic. Data is embedded as an array of per-state values, and the map relies on TopoJSON’s `topojson.feature` to extract geometries.

663anp3ca

68% match

Loading thumbnail…

Upload food nutrition data

This example displays the size and structure of a filtered USDA foundation food nutrition dataset from 2020, showing the file size in kilobytes, the number of data rows, and the number of columns. It fetches a remote CSV file using `d3.csv` and then formats the result with `d3.csvFormat` to calculate the data’s byte length. The output is rendered as large text in a `<pre>` element using the `document.getElementById` and `textContent` API.

MMing Liu

68% match

Loading thumbnail…

Most Obese Countries as of 2014

This visualization displays the 80 countries with the highest obesity rates in 2014, ranked from highest to lowest using horizontal bars. The data is loaded from a CSV file via the `d3.csv` method, then sorted with `d3.descending` before being sliced to the top 80 entries. The chart is built using the Vega-Lite API (via `vega-lite-api`), with `markBar`, `vl.y().fieldQ('value')`, and `vl.x().fieldN('Country').sort('-y')` for encoding. Custom axis and label styling is applied through the `config` object.

CCurran Kelleher

68% match