dataCodes
familyCodes = "B09002_002E,B09002_009E,B09002_015E"
totalPopCode = "B09002_001E"
familyPopUrl = "https://api.census.gov/data/" +
year +
"/acs/acs1?get=NAME," +
familyCodes +
"," +
totalPopCode +
"&for=state:*"
rawFamilyData = await d3.json(familyPopUrl)
stateLUT["Alabama"]
stackedChart = {
//svg variables
const height = 800;
const margin = 20;
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//looping through all items in dataset
for (let i =0; i<comparisonFamilyData.length; i++) {
const rowHeight = (height - margin *2) / comparisonFamilyData.length;
//draw rect for each item
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[i].marriedCouple / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#002051");
// ["#4269d0","#efb118","#ff725c","#6cc5b0","#3ca951","#ff8ab7","#a463f2","#97bbf5","#9c6b4e","#9498a0"]
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[i].femaleHouseholder / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#6cc5b0");
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[i].maleHouseholder / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#efb118");
//draw labels
svg
.append("text")
.attr("x", 0)
//extra rowHeight is required since text is set w/ its bottom-left coordinate, but rectangles are set w/ their top left
.attr("y", i * rowHeight + margin + rowHeight)
.attr("font-size", 10)
.attr("font-family", "Helvetica")
.text(stateLUT[comparisonFamilyData[i].state]);
}
/*Puerto Rico
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[comparisonFamilyData.length-1].femaleHouseholder / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#6cc5b0");
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[comparisonFamilyData.length-1].marriedCouple / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#002051");
svg
.append("rect")
.attr("x",100)
.attr("y", i * rowHeight + margin)
.attr("width", (width * comparisonFamilyData[comparisonFamilyData.length-1].maleHouseholder / 8000000))
.attr("height", height / comparisonFamilyData.length)
.attr("fill", "#efb118");
//draw labels
svg
.append("text")
.attr("x", 0)
//extra rowHeight is required since text is set w/ its bottom-left coordinate, but rectangles are set w/ their top left
.attr("y", i * rowHeight + margin + rowHeight)
.attr("font-size", 10)
.attr("font-family", "Helvetica")
.text(stateLUT[comparisonFamilyData[comparisonFamilyData.length-1].state]);
*/
return svg.node();
}
comparisonFamilyData.length
censusDataTest = await d3.json(
"https://api.census.gov/data/2023/acs/acs1?get=NAME,B01001_001E&for=state:*"
)
censusDataTest
states = {
const statesData = [];
//starting at 1 to skip the first row
for (let i = 1; i < censusDataTest.length; i++) {
const state = censusDataTest[i];
statesData.push( {
name: state[0],
population: parseInt(state[1]),
fipsCode: parseInt(state[2])
});
}
return statesData;
}
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.
