years = d3.range(2015, 2020)
//wait for everything to finish
rawCensusData = Promise.all(
//going each year one-by-one
years.map(
//go through each year in order
async (year) =>
//call census API
await d3.json(
"https://api.census.gov/data/" +
year +
"/acs/acs1?get=NAME,B28002_004E,B28002_001E&for=state:*"
)
)
)
cleanedData = rawCensusData.map((censusYear, i) =>
//remove the header row, and then iterate over all states
censusYear.slice(1).map((state) => ({
name: state[0],
internetHouseholds: parseInt(state[1]),
totalHouseholds: parseInt(state[2]),
internetPercentage: parseInt(state[1]) / parseInt(state[2]),
year: new Date(years[i], 0)
}))
)
states = cleanedData[0].map((state) => state.name)
//work through all the states
transposedData = states.map((state) =>
//work through each year, and find the correct state inside of it
cleanedData.map((year) => year.find((yearState) => yearState.name === state))
)
yearObjects = years.map((year) => new Date(year, 0))
xScale = d3
.scaleTime()
.domain(d3.extent(yearObjects))
.range([margin.left, width - margin.right])
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
yScale = d3
.scaleLinear()
.domain(d3.extent(transposedData.flat(Infinity), (d) => d.internetPercentage))
.nice()
.range([height - margin.bottom, margin.top])
yAxis = (g) =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yScale))
height = 600
margin = ({ top: 20, right: 20, bottom: 30, left: 80 })
lineGen = d3
.line()
.x((d) => xScale(d.year))
.y((d) => yScale(d.internetPercentage))
chart = {
// Create an empty SVG with specified width and height.
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Draw the x and y axes.
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Draw the line.
transposedData.map((state) => {
svg
.append("path")
.datum(state)
.attr("d", lineGen)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 0.5);
});
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.