Skip to main content
SimilarExport ZIP
100%

Diabetes Dataset in Vega-lite

✓ Published0🌍 Public
Llakalia@wpi.edu
Last edited Sep 24, 2020
Created on Sep 24, 2020

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.

AI-generated description

Diabetes Dataset: A visualization constructed using the vega-lite-api.

Diabetes Dataset summary is a summary by AgeGroup and Gender_Diabetes (diabetes status) of Early stage diabetes risk prediction dataset from UCI

I had realized in my original viz that I needed to create a Gender_Diabetes column to group by gender and diabetes status for the color channel. Haven't been able to figure out how to get javascript to work in getData.js so I had to re-generate the data set. Next step will be to upload additional datasets filtered on the risk factors and add a drop-down that will determine the url for getData.js based on the user's choice. (Not sure if I should add luminance as another channel for the presence or abscence of the chosen risk factor or if I should just double the number of categories for the color channel and maybe control the colors).

MIT Licensed

Similar vizzes

Loading thumbnail…

Diabetes Dataset (without risks) in Vega-lite

The visualization shows the distribution of diabetes patients by age group and gender, using semi-transparent bars to reveal overlapping counts across categories. It displays the number of patients per age group with color encoding for gender and tooltips presenting the diabetic category. The code uses Vega-Lite's API to construct the bar chart, D3’s `csv` loader to fetch data from a GitHub gist, and applies custom axis and label styling from `config.js`. Data originates from the UCI Early stage diabetes risk prediction dataset.

Llakalia@wpi.edu
96% 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
78% match
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
75% match
Loading thumbnail…

Pima Indians Diabetes Dataset (Bar Chart technique)

This example visualizes the average plasma glucose concentration for two patient outcome groups—high-risk (diabetic) and low-risk (non-diabetic)—using a bar chart. The code loads the Pima Indians Diabetes dataset from a CSV file, filters out records with zero values for glucose or BMI, and aggregates the data by calculating the mean glucose per outcome. It uses D3 v7 functions such as `csvParse`, `scaleBand`, `scaleLinear`, and `mean`, with bars colored via a categorical scale to distinguish risk levels.

Sskasliwal@wpi.edu
75% match
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
74% 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
74% match
Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved)

This visualization combines a scatter plot and bar chart to explore the Pima Indians Diabetes dataset. The scatter plot maps BMI and glucose concentration, using color to encode age and shape (circle vs. cross) to distinguish diabetic outcomes, while the bar chart shows average glucose by outcome. The code uses d3.csvParse to load data, d3.scaleLinear for positioning, d3.scaleSequential with interpolateInferno for the color scale, and d3.symbol for shape encoding. The bar chart employs d3.scaleBand and d3.max for aggregation.

Sskasliwal@wpi.edu
74% match
Loading thumbnail…

Diabetes Data

This example loads a CSV dataset on diabetes in adult females from a GitHub gist and compares the number of text bytes, rows, and columns in the file. It reads the data using the `d3.csv` request method, then formats it with `d3.csvFormat` to measure its size in kilobytes, and displays these figures in a large `<pre>` element on the page. The visualization is a simple textual summary, not a chart, highlighting the dataset’s dimensions for comparative analysis of medical predictor variables. The data originates from the Pima Indians Diabetes Database on Kaggle.

AAnurag Desai
74% match