Published
Edited
Oct 19, 2021
d3 = require("d3@7")
// years = d3.range(2015,2020)
// state = 17
data2015 = await d3.json(
"https://api.census.gov/data/2015/acs/acs1?get=NAME,B28002_004E&for=state:17"
)
data2016 = await d3.json(
"https://api.census.gov/data/2016/acs/acs1?get=NAME,B28002_004E&for=state:17"
)
data2017 = await d3.json(
"https://api.census.gov/data/2017/acs/acs1?get=NAME,B28002_004E&for=state:17"
)
data2018 = await d3.json(
"https://api.census.gov/data/2018/acs/acs1?get=NAME,B28002_004E&for=state:17"
)
data2019 = await d3.json(
"https://api.census.gov/data/2019/acs/acs1?get=NAME,B28002_004E&for=state:17"
)
data = [2015, 2016, 2017, 2018, 2019]
{
const height = 600;
const xMargin = 120;
const yMargin = 40;
const svg = d3.create("svg").attr("width",width).attr("height", height);
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#FFF");
const xScale = d3
.scalePoint()
.domain(data.map((d) => d.year))
.range([xMargin, width - xMargin]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)]).nice()
.range([height - yMargin.bottom, yMargin.top])
const yAxis = d3
.axisLeft(yScale)
.tickPadding(10)
.tickSizeInner(-width + xMargin * 2)
.tickSizeOuter(-width + xMargin * 2);
const xAxis = (g) => g
.attr('transform', `translate(0,${height - xMargin.bottom})`)
.call(d3.axisBottom(xScale));
svg
.append("g")
.attr("transform", "translate("+ xMargin +" , 0)")
.call(yAxis);
svg
.selectAll(".tick text")
.attr("font-size", 11)
.attr("fill", "black")
.attr("font-family", "menlo");
svg
.selectAll("g line")
.attr("stroke", "black")
.attr("stroke-width", 2);
svg
.selectAll("g path")
.attr("stroke", "black")
.attr("stroke-width", 2);
return svg.node();
}
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.
