Skip to main content
SimilarExport ZIP
100%

Most Obese Countries as of 2014

✓ Published0🌍 Public
Aasujata-1234
Last edited Jan 27, 2020
Created on Jan 27, 2020

A horizontal bar chart ranks the 80 most obese countries by obesity rate in 2014, using country names on the x-axis and numeric values on the y-axis. The data, loaded via `d3.csv`, is sorted in descending order with `d3.descending` before slicing to ensure an accurate top list. The visualization is built with the vega-lite-api library, configured with `vl.markBar()`, and rendered as an SVG through `vega` and `vega-lite` with a custom dark theme.

AI-generated description

A visualization of countries with top Global Obesity Rates 2014 using the vega-lite-api.

This variant adds sorting the data before slicing, which makes the top list accurate.

MIT Licensed

Similar vizzes

Loading thumbnail…

Most Obese Countries as of 2014

A horizontal bar chart ranks the 80 countries with the highest obesity rates as of 2014, with each bar's length proportional to the national obesity percentage. The data is sorted in descending order before slicing, ensuring the top countries appear accurately at the top of the chart. Built with the vega-lite-api and rendered as SVG, the visualization uses d3.csv to load the dataset and d3.descending for sorting, while the tooltip and axis configurations come from the vega-tooltip handler and custom config.js settings.

Mmkt-ds
96% 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
95% match
Loading thumbnail…

Most Obese Countries as of 2014

This bar chart shows the 80 countries with the highest obesity rates in 2014, sorted in descending order. The visualization uses the Vega-Lite API with d3.csv to load the data, then d3.descending to sort it before slicing the top 80 records. The chart encodes country names on the x-axis and obesity rate on the y-axis, with tooltips for each bar. Custom configuration improves readability by adjusting axis tick colors, label font size, and title styling via the vega-tooltip handler.

Aasujata-1234
95% match
Loading thumbnail…

Obesity values vs Countries

A bar chart shows obesity rates for sixty countries, highlighting that the Cook Islands has the highest value and Burundi the lowest. The chart encodes country on the x-axis, sorted by descending rate, and the obesity value on the y-axis. It is built with the vega-lite-api, using `vl.markBar` and `vl.encode` with `fieldQ` and `fieldN`, and loads data from a CSV via d3’s `csv` function. The visualization is rendered as an SVG with a custom config and tooltip handler.

Yyyaaa1
84% 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
83% match
Loading thumbnail…

Largest Countries Bar Chart

A ranked bar chart displays the world’s most populous countries in 2015, using population data loaded via `d3.csv` from a Gist. The visualization is built with the vega-lite-api, which registers Vega-Lite and Vega, and renders to SVG. Bars are sorted by population, and tooltips show each country’s exact count. The chart uses custom axis and label styling from a configuration object to improve readability.

JjohnmurphyLC
77% match
Loading thumbnail…

Largest 5 Countries

This visualization shows the five most populous countries each year, using a bar chart that sorts countries by population descending and displays the population values for each. The data is loaded from a CSV file containing population by country and year, which is fetched using the `d3.csv` function. The visualization is built using the `vega-lite-api` library, with the chart specification defined in `viz.js` using the `vl.markBar()` and `vl.encode()` methods. The rendering is handled by `vega` and `vega-lite`, with interactive tooltips enabled through `vega-tooltip`.

YYee Han
75% match
Loading thumbnail…

Largest 5 Countries

A bar chart displays the populations of the five most populous countries, sorted in descending order, with a tooltip revealing each country’s exact population value. The visualization is built using the Vega-Lite API, which programs a bar mark with a numeric y-axis and categorical x-axis, all rendered as an SVG via the `vl.render()` method. Data is fetched as CSV from a remote GitHub gist using D3’s `csv` function, with styling customized through a configuration object.

JJohn Jeevasaeyan
74% match