Public
Edited
Apr 4, 2023
Insert cell
Insert cell
Insert cell
Insert cell
color = d3.scaleOrdinal(d3.schemeTableau10);
Insert cell
data = [
{
industry: 'Health care and social assistance',
Women: 78.2,
White: 71.5,
Black: 17.7,
Asian: 7.4,
Hispanic: 14.5,
Men: 21.8
},
{
industry: 'Nursing care facilities (skilled nursing facilities)',
Women: 83.1,
White: 63.6,
Black: 29.5,
Asian: 4.1,
Hispanic: 11.7,
Men: 16.9
},
{
industry: 'Home health care services',
Women: 84.6 ,
White: 60.0,
Black: 27.3,
Asian: 8.4,
Hispanic: 19.3,
Men: 15.4
},
{
industry: 'All Industries',
Women: 46.8 ,
White: 77.0,
Black: 12.6,
Asian: 6.7,
Hispanic: 18.5,
Men: 53.2
},
]
Insert cell
keys = ["White", "Black", "Asian", "Hispanic"];
Insert cell
genderKeys = ["Women", "Men"];
Insert cell
// Create the stacked bars using D3's stack layout
stackedData = d3.stack().keys(keys)(data);
Insert cell
genderStackedData = d3.stack().keys(genderKeys)(data);
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more