Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Jan 6, 2022
1 fork
Importers
34 stars
variables = new Map([["<10", ["003", "004", "027", "028"]], ["10-19", ["005", "006", "007", "029", "030", "031"]], ["20-29", ["008", "009", "010", "011", "032", "033", "034", "035"]], ["30-39", ["012", "013", "036", "037"]], ["40-49", ["014", "015", "038", "039"]], ["50-59", ["016", "017", "040", "041"]], ["60-69", ["018", "019", "020", "021", "042", "043", "044", "045"]], ["70-79", ["022", "023", "046", "047"]], ["≥80", ["024", "025", "048", "049"]]].map(([key, V]) => [key, V.map(v => `B01001_${v}E`)]))
variables.get("20-29")
states = new Map([["01", "AL"], ["02", "AK"], ["04", "AZ"], ["05", "AR"], ["06", "CA"], ["08", "CO"], ["09", "CT"], ["10", "DE"], ["11", "DC"], ["12", "FL"], ["13", "GA"], ["15", "HI"], ["16", "ID"], ["17", "IL"], ["18", "IN"], ["19", "IA"], ["20", "KS"], ["21", "KY"], ["22", "LA"], ["23", "ME"], ["24", "MD"], ["25", "MA"], ["26", "MI"], ["27", "MN"], ["28", "MS"], ["29", "MO"], ["30", "MT"], ["31", "NE"], ["32", "NV"], ["33", "NH"], ["34", "NJ"], ["35", "NM"], ["36", "NY"], ["37", "NC"], ["38", "ND"], ["39", "OH"], ["40", "OK"], ["41", "OR"], ["42", "PA"], ["44", "RI"], ["45", "SC"], ["46", "SD"], ["47", "TN"], ["48", "TX"], ["49", "UT"], ["50", "VT"], ["51", "VA"], ["53", "WA"], ["54", "WV"], ["55", "WI"], ["56", "WY"], ["72", "PR"]])
url = `https://api.census.gov/data/2016/acs/acs5?get=${Array.from(variables.values())}&for=state:*`
data = d3.json(url)
index = {
const index = new Map(data[0].map((d, i) => [d, i]));
if (index.get("state") !== data[0].length - 1) throw new Error;
return index;
}
sums = data.slice(1).map(d => Array.from(variables.values(), V => d3.sum(V, v => d[index.get(v)])))
sums[0][0]
codes = data.slice(1).map(d => d[d.length - 1])
names = data.slice(1).map(d => states.get(d[d.length - 1]))
totals = data.slice(1).map(d => d3.sum(d.slice(0, -1)))
order = d3.range(data.length - 1).sort((i, j) => totals[j] - totals[i])
ordered = d3.permute(sums, order)
stacked = d3.stack().keys(d3.range(variables.size))(ordered)
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.
