Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

✓ Published0🌍 Public
Zzjulijie0618
Last edited Jan 23, 2022
Created on Jan 23, 2022

This visualization displays a bar chart of population by country, sourced from the UCI Auto MPG dataset via a Gist. It is built using the Vega-Lite API alongside d3.v5, with Vega-Lite 4 and Vega 5. The chart sorts bars descending by population and includes tooltips. The code programs the visualization declaratively via `vl.markBar()` and encodes fields with `vl.x()` and `vl.y()`, applying custom axis and label styling from a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This example displays a bar chart of population by country, sorted in descending order to highlight the most populous nations. The visualization is built programmatically using the Vega-Lite API, which constructs a specification that is then rendered by the Vega engine. The code registers Vega-Lite and Vega with the vega-lite-api library, uses D3’s CSV parser to load data from a Gist-hosted file, and applies custom configuration for axis styling and tooltips. Data originates from the UCI Auto MPG dataset, though the visualization itself plots country populations.

Zzjulijie0618
96% match
Loading thumbnail…

Fork of Vega-Lite API Template3

This visualization shows a bar chart of population by country, sorted in descending order, with tooltips displaying the raw population values on hover. It uses the Vega-Lite API to define the chart specification, while D3.js loads the CSV data from a Gist. The rendering pipeline combines Vega, Vega-Lite, and Vega-Lite API libraries, with Vega-Tooltip for interactive hover details. The chart is configured to fit the full browser window and uses custom axis styling for improved readability. Data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

AArookie-2020
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a stacked bar chart of population by country, colored by religion, using a dataset loaded from the UCI Auto MPG repository (via a Gist URL). The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is rendered by the Vega engine. The code uses `vl.markBar()`, `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color()`, and it relies on d3's `csv` loader to fetch the data. The chart is interactive, including a tooltip via the Vega-Tooltip handler.

BBubfield
87% match
Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart displays population by country for 2015, using a horizontal layout with country names on the y-axis and population on the x-axis, with tooltips showing exact population values on hover. The visualization uses the Vega-Lite API (`vl.markBar()`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`) to declaratively build the specification, which is then rendered via Vega-Lite and Vega. Data is loaded from a CSV file using `d3.csv()` from a GitHub gist, and the chart resizes to fit the browser window using width and height bindings.

NNikhil Sharma
86% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with tooltips displaying the population values. The visualization is built using the Vega-Lite API, which programmatically defines a markBar encoding with a categorical x-axis sorted by value and a quantitative y-axis. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered as SVG through the Vega runtime. The code customizes axis and label styling via a config object and fits the chart to the browser window dimensions.

DDavid Beales
86% match
Loading thumbnail…

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Stacked Bar

This stacked bar chart visualizes the distribution of religions across countries, using population to encode the share of each religious group. The visualization is built with the Vega-Lite API, registered with Vega and Vega-Lite, and relies on d3.csv for data loading from a Gist containing the religionByCountryTop5 dataset. The bars are sorted by country in descending order, with color mapping population values and tooltips displaying the exact population figures. The chart fits the full browser window via an autosize setting and applies a custom configuration for axis styling and label font sizes.

Zzjulijie0618
86% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with bars sorted in ascending order and tooltips displaying population values on hover. It is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the visualization programmatically. The code loads CSV data via d3.csv and renders the chart as an SVG, applying a custom configuration for axis styling and label fonts. The visualization is designed to fit the full browser window using an autosize fit option.

AAnibal Gatica
86% match
Loading thumbnail…

Fork of Vega-Lite API

This example uses the Vega-Lite API to render a bar chart of population by country, with data loaded from a CSV file. The visualization encodes country names on the x-axis and population values on the y-axis, sorting bars by population size. The page imports Vega, Vega-Lite, and Vega-Lite API libraries, registers them together with Vega Tooltip for interactive hover details. Custom axis styling and font sizes from a config object improve readability, while the chart resizes to fit the window using the view’s width and height properties.

LLaura Jackson
86% match