Vega-Lite Grouped Bar Chart

100%

Vega-Lite Grouped Bar Chart

✓ Published1🌍 Public

Last edited Sep 25, 2020

Created on Sep 25, 2020

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.

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

CCurran Kelleher

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

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

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

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

74% match

Loading thumbnail…

Medical Cost Personal (charges vs bmi)

This visualization displays the relationship between BMI and medical charges for individual patients, with each circle colored by smoking status and sized according to patient age. The plot uses positioned circles from the vega-lite-api library, rendering as an SVG through the vega and vega-lite specifications. Data comes from the Medical Cost Personal Dataset, loaded via d3.csv. The chart applies custom axis and label styling from a configuration object, while incorporating interactive tooltips through vega-tooltip to reveal each patient's region on hover.

Mmeperezcuello

74% match

Loading thumbnail…

Medical Cost Personal (charges vs bmi)

This visualization uses an interactive scatterplot to explore the relationship between patient BMI and medical charges, with each circle representing a patient. The color distinguishes smokers from non-smokers, while the circle size encodes patient age. The chart is built with the vega-lite-api library on top of Vega-Lite and d3, loading data from a CSV file hosted as a GitHub gist. The code customizes the axes and label styling through a config object.

Mmeperezcuello

74% match

Loading thumbnail…

Insurance

The scatter plot shows medical insurance charges across patient ages, with points colored by smoking status to reveal that smokers incur consistently higher costs than non-smokers. The visualization uses the Vega-Lite API within a D3 v5 framework, binding CSV data loaded via `d3.csv` and rendering points with `vl.markPoint`. The chart encodes age and charges on quantitative axes via `vl.x().fieldQ()` and `vl.y().fieldQ()`, while the categorical smoker variable drives `vl.color().fieldN()`. Custom styling is applied through a Vega-Lite config object that adjusts axis labels and title fonts.

Llynz09

73% match