bills = await FileAttachment("Anti Trans Laws 8-26-21.csv").csv({ typed: true })
Table(bills)
groupedBills = d3.groups(bills, d => d[groupingAttribute]).sort()
x = d3.scalePoint()
.domain(stages)
.range([0, width - infoWidth])
xGrid = (g) => g
.style("stroke", "#e5e5e5")
.selectAll('line')
.data(stages)
.join('line')
.attr('x1', d => x(d) - 1)
.attr('x2', d => x(d) - 1)
.attr('y1', margin.top)
.attr('y2', barSize - margin.bottom)
margin = ({
top: 2,
bottom: 2,
left: 2,
right: 2
})
infoWidth = 175
barSize = 20
listOfBillsByState = d3.group(bills, d => d["State"])
countOfBillsByState = {
let counts = d3.rollup(bills, v => v.length, d => d["State"]);
for (let i = 0; i < allUSStates.length; i++) {
if (!counts.get(allUSStates[i])) {
counts.set(allUSStates[i], 0);
}
}
counts.title = "Anti-trans bills by state"
return counts;
}
colorScale = d3.scaleQuantize(
[0, 10],
[
"#f5f5f5",
"#fee9cb",
"#fdd8a9",
"#fdc28c",
"#fca16d",
"#f67b52",
"#e65339",
"#ce2619",
"#ab0604",
"#7f0000"
]
)
format = d => (d == 1 ? d + " bill" : d + " bills")
import { chart } with {
countOfBillsByState as data,
colorScale as color,
format
} from "@d3/state-choropleth"
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.
