Vega-Lite Bar Chart

100%

Vega-Lite Bar Chart

✓ Published0🌍 Public

Last edited Jan 20, 2021

Created on Jan 20, 2021

This example embeds a Vega-Lite specification into a webpage using the vegaEmbed API, rendering an interactive bar chart of precipitation counts from Seattle weather data. The chart uses a binned x-axis for precipitation values and a y-axis showing aggregate counts, with the data pulled directly from a GitHub-hosted CSV file. The code loads Vega, Vega-Lite, and Vega-Embed libraries from a CDN, and the mark type is set to `bar`. A separate JSON file defines a point chart with nominal and quantitative encodings, but the index.html file demonstrates the primary bar chart visualization.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a simple bar chart of categorical values against quantitative data, rendered directly in the browser using the Vega-Lite JavaScript API. It demonstrates how to generate a chart specification programmatically with `vl.markBar()`, `.encode()`, and `.toJSON()`, then pass that spec to `vegaEmbed` for rendering. The code loads Vega, Vega-Lite, Vega-Embed, and the Vega-Lite API from CDNs, and the chart uses inline sample data with fields "a" and "b". The tooltip encoding includes both fields, making the interaction visible.

EEE2dev

84% match

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a linked brushing-and-clicking dashboard for Seattle weather data, combining a scatterplot of daily maximum temperature and precipitation with a bar chart of weather-type counts. It demonstrates the Vega-Lite JavaScript API and vegaEmbed in the browser, where the API builds a visualization specification and vegaEmbed renders it into the DOM. The code uses `vl.selectInterval` and `vl.selectMulti` for interactive selections, `vl.markPoint` and `vl.markBar` for marks, and `vl.vconcat` to stack the two views. The data is loaded from the vega-datasets CDN, with weather categories colored via a custom scale and precipitation mapped to point size.

EEE2dev

84% match

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example demonstrates linked brushing and selection between a scatterplot of daily maximum temperature and precipitation and a bar chart of weather-type counts, using Seattle weather data. It shows how brushing the time axis filters the bar chart, while clicking weather categories filters the scatterplot. The visualization is built with the vega-lite-api JavaScript wrapper to generate the Vega-Lite specification programmatically, then rendered via vegaEmbed. The code defines interval and multi-selection encodings, custom color scales, and filters to synchronize both views interactively.

EEE2dev

82% match

Loading thumbnail…

Vega-Lite Bl.ocks example

This example demonstrates a simple bar chart of categorical values with quantitative measurements, using embedded data for nine lettered categories. The visualization is rendered through Vega-Lite, a high-level grammar for declarative visualization, which is configured via a JSON specification that defines the bar marks and encodings for the x-axis (ordinal) and y-axis (quantitative) fields. The code loads Vega, Vega-Lite, and Vega-Embed from a CDN, then invokes `vegaEmbed` to render the chart into the page, with tooltips enabled for the quantitative values. The chart is specified both as an external JSON file reference and an inline object, showing flexibility in how Vega-Lite specifications can be supplied.

AAlainRo

81% match

Loading thumbnail…

Vega(Lite)

This example shows a horizontal bar chart of six test data points (element 1 through 6 with values 4, 8, 15, 16, 23, and 42), with the bars extending rightward from the y-axis. The visualization is built using Vega-Lite’s JSON declarative grammar, embedded inline in the page. The chart renders as an SVG via `vegaEmbed`, and the code loads Vega, Vega-Lite, and Vega-Embed from CDNs, then enhances the chart with tooltips using `vegaTooltip.vegaLite` on mouseover.

EEleonore9

79% match

Loading thumbnail…

Vega Lite Bar Chart

This example shows a simple bar chart of nine categorical values labeled A through I plotted against their corresponding quantitative values. The visualization is built with Vega-Lite, using its declarative JSON specification to encode the x-axis as an ordinal field and the y-axis as a quantitative field, with a bar mark. The chart is embedded in an HTML page using the vega-embed library, which loads the Vega-Lite specification and renders it as an SVG via the Vega runtime. The data is provided inline within the specification, and the code references the Vega-Lite schema version 2.

AAlainRo

79% match

Loading thumbnail…

Vega-lite Bar Chart with Tooltip

This example demonstrates a simple bar chart showing categorical values (A through I) against their corresponding numeric quantities, encoded as bar heights. The visualization is built with Vega-Lite, using an embedded dataset of nine pairs, and rendered as SVG via vega-embed. Tooltip interactivity is added through the vega-tooltip library, which binds to the vega view and displays the exact field values on hover. The code defines the chart declaratively in a JSON specification, setting the x-axis to ordinal categories and the y-axis to a quantitative scale, with the vegaEmbed function handling the rendering.

AAlainRo

78% match

Loading thumbnail…

Vega-Lite API Template

This example renders an interactive bar chart of population by country for 2015, using data from a Gist CSV file. It visualizes the rank-ordered values with a dark theme and custom axis styling. The visualization is built with the Vega-Lite API, which composes specifications programmatically in JavaScript, integrated with Vega and Vega-Lite libraries. It also uses D3’s `csv` loader for data ingestion, and Vega Tooltip for hover interactions, with the chart fitted to the full viewport.

TTengHoo3

78% match