Vega-Lite Grouped Bar Chart

100%

Vega-Lite Grouped Bar Chart

✓ Published2🌍 Public

Last edited Sep 10, 2019

Created on Sep 10, 2019

This interactive visualization uses a grouped bar chart to compare average BMI between smokers and non-smokers across different regions, making adjacent bar comparisons straightforward. Built with Vega-Lite and rendered via the `vega-lite-api`, the visualization encodes region as columns, smoker status as x-axis and color, and average BMI as the y-axis. The data is loaded from a remote CSV using `d3.csv`, while custom axis styling removes domain lines and increases font sizes for readability. Tooltips display the average BMI on hover.

AI-generated description

A fork of the same data visualized as a stacked bar chart.

When visualizing using a grouped bar chart like this, visual comparisons between the adjacent bars are much easier to make. This makes it easier to answer the question "Do smokers have higher or lower average BMI than non-smokers, and how does that vary by region?", as compared to the stacked bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite Grouped Bar Chart

This grouped bar chart compares average BMI between smokers and non-smokers across different regions, using adjacent bars for each smoker status to make direct visual comparisons easier. The visualization loads medical cost data from a CSV file via d3.csv and renders with Vega-Lite, using the vega-lite-api to encode columns by region, x-axis by smoker status, and y-axis by average BMI. The color channel also maps to smoker status, and a tooltip displays the average BMI on hover. Display settings are customized through a config object that adjusts font sizes and axis styling.

MMartin Blatz

96% match

Loading thumbnail…

BMI in different US Region and Comparison Between Smoker/Nonsmoker

This example visualizes average BMI across US regions, split by smoker status, using a faceted bar chart. The chart shows that the southeast region has the highest BMI, while smokers do not necessarily have higher BMIs than nonsmokers. The visualization is built with Vega-Lite API and D3, reading data from a CSV file. It uses aggregated bar marks, with region as columns, smoker status on the x-axis, and average BMI on the y-axis, with tooltips for detailed values.

Wwenleicao

77% match

Loading thumbnail…

Vega-Lite Bar Chart

This bar chart visualizes population by country for 2015, using the Vega-Lite grammar to map countries to the x-axis and population to the y-axis. Built with the `vega-lite-api` and rendered via the `vega` and `vega-lite` libraries, it loads data from a CSV file using `d3.csv` and displays interactive tooltips via `vega-tooltip`'s Handler. The chart is styled with a custom config for improved readability.

Bbakstorage00001

76% match

Loading thumbnail…

Vega-Lite API Template

This example shows a grouped bar chart comparing religious populations across five countries, with each bar segmented by religion and sorted by total population. It uses the Vega-Lite API to declare the visualization, registering vega, vega-lite, and vega-tooltip handlers, then renders it as SVG. The data is loaded from a local CSV via d3.csv, and a custom config adjusts axis and font styles for readability.

Pprincit

76% match

Loading thumbnail…

Diabetes Dataset in Vega-lite

A grouped bar chart visualizes an early-stage diabetes risk prediction dataset from UCI, showing the number of patients across age groups, separated by gender and diabetes status. The data is loaded from a Gist-hosted CSV via d3.csv in getData.js, then rendered using the vega-lite-api with a bar mark, encoding age on the x-axis, patient count on the y-axis, and a combined Gender_Diabetes field for color. The visualization uses Vega-Lite’s opacity channel and custom axis styling from config.js, with tooltips displaying patient counts.

Llakalia@wpi.edu

75% match

Loading thumbnail…

Clustered Bar Chart - Average Insurance Charges by Region

This clustered bar chart displays average insurance charges across four US regions, comparing smokers (red bars) versus non-smokers (black bars) using data from an Insurance Expenses Dataset. The visualization uses D3 v6 scales—`scaleBand` for the region groups and subgroup categories, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. Data is loaded via `d3.csv` and grouped with a custom `groupBy` function that calculates averages by smoking status. The SVG rendering includes axis generators (`axisBottom`, `axisLeft`) and a custom legend, with bars shaded at 0.95 opacity.

RRaul Gamez

75% match

Loading thumbnail…

Vega-Lite API Template

A single bar chart displays the estimated incidence of cancer cases per year, using orange bars along quantitative and temporal axes. The visualization is built with the Vega-Lite API, which programmatically composes a bar mark and encodings in `viz.js`, while `index.js` registers Vega, Vega-Lite, and Vega-Tooltip, renders the chart to SVG, and sizes it to fit the viewport. Data is loaded asynchronously from a CSV file containing cancer statistics using d3.csv, and a custom configuration in `config.js` adjusts axis and label styling.

Yyastika

74% match

Loading thumbnail…

Vega-Lite Bar Chart

This bar chart displays the population of various countries, sorted from largest to smallest for easy comparison. It is built using the Vega-Lite API, with the visualization specification defined declaratively in `viz.js` and rendered through the `vega` and `vega-lite` JavaScript libraries. The chart includes interactive tooltips provided by the `vega-tooltip` handler and is configured for full-window display, drawing data loaded from a CSV file using d3’s `csv` function, which fetches population data for 2015.

KKevin McMorrow

74% match