Vega Lite Bar Chart

100%

Vega Lite Bar Chart

✓ Published0🌍 Public

Last edited Mar 7, 2018

Created on Mar 7, 2018

This example shows a simple bar chart of nine categorical values (A through I) plotted against quantitative values, using embedded data directly in the Vega-Lite specification. It renders as a static, SVG-based visualization with ordinal x-axis and quantitative y-axis encodings. The code uses the Vega-Lite 2.0.0-rc5 library and the Vega 3.0.6 runtime, parsing the `vlSpec` object and creating a `vega.View` with SVG rendering. The chart is initialized in the `#vis` div, with hover event processing enabled, though no interactive behavior is demonstrated beyond that.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/2b76eafc5add50ceb707179fb2040c27'>Vega-Lite</a>

mit Licensed

Similar vizzes

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

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

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

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

84% match

Loading thumbnail…

Vega block example

This example shows a simple bar chart of categorical values labeled A through H, with the bar height encoding the amount for each category. It uses a tooltip to display the amount value when hovering over a bar, and the text labels fade out for the hovered bar to avoid overlap. The visualization is built with Vega, a declarative visualization grammar, and rendered using the Vega-Embed API. The code defines scales for the x and y axes, uses rectangular marks for the bars, and includes a text mark for labels. The data is embedded directly in the specification.

AAlainRo

83% match

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

81% match

Loading thumbnail…

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1

80% match

Loading thumbnail…

Vega-Lite API Template I

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. Using the Vega-Lite API, it constructs a specification via `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings, then renders it through `vl.register` with Vega 5 and Vega-Lite 4. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV. Appearance is customized through a shared configuration object that adjusts axis and label styling.

FFloorNummer

78% match