Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 19, 2021

Created on Dec 19, 2021

This interactive bar chart visualizes population density across divisions of Bangladesh, with bars sized by area in square kilometers and colored by district. The visualization uses the Vega-Lite API’s `markBar` encoding with x and y quantitative fields, while tooltips show district names. Data is loaded asynchronously via `d3.csv` from a Gist hosting the UCI Auto MPG dataset. Custom axis styling and tooltip styling are applied through a config object, and the chart renders with an SVG renderer via `vl.register`, adapting to the full window viewport.

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 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

81% 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

80% 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

80% 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

80% 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

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

A Vega-Lite API visualization displays country populations from a 2015 CSV dataset as black bars, sorted alphabetically by country name. The chart uses Vega-Lite’s `markBar` encoding for x-position and population on the y-axis, with tooltips showing exact population values. Built with the `vega-lite-api` library, D3’s `csv` loader fetches the data, while `vega-tooltip` provides interactive hover details. The visualization renders as an SVG, fitted to the full browser window with custom styling from the `config.js` file.

Sstevensmithj

79% match

Loading thumbnail…

Fork of Vega-Lite API Template4

This visualization displays a bar chart of population by country, with bars colored by religion and tooltips showing population values on hover. The data comes from the UCI Auto MPG dataset via a Gist, though the shown attributes reference country and religion. Built with Vega-Lite API, it registers Vega and Vega-Lite libraries, loads CSV data using d3.csv, and renders the chart as SVG with custom axis and label styling from a config object. The visualization auto-fits to the window size and includes a Vega Tooltip handler for interactive detail viewing.

AArookie-2020

79% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a stacked bar chart that visualizes population by country, colored by religion, using data from the UCI Auto MPG dataset via a Gist URL. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG output. The code uses `vl.markBar()`, `vl.y()`, `vl.x()`, and `vl.color()` to define the chart’s encoding, while D3’s `csv` function fetches the data. An interactive tooltip is enabled through the Vega Tooltip handler, and the chart’s appearance is customized with configuration options for axis styling and font sizes.

Aashokganpathi

79% match