Published
Edited
Jun 11, 2021
1 fork
md`# Texas Congressional Districts`
{
let height = width / 1.5;
const features = topojson.feature(usCongress, usCongress.objects.districts).features.filter(d => d.id.toString().slice(0,2) === '48')
const projection = d3.geoConicConformal()
.parallels([30 + 7 / 60, 31 + 53 / 60])
.rotate([100 + 20 / 60, 0])
.fitSize([width, height], { type: "FeatureCollection", features })
let path = d3.geoPath()
.projection(projection);
let svg = d3.select(DOM.element('svg'))
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.attr("id", "land")
.data(topojson.feature(us, us.objects.states).features.filter(d => d.id === 48))
.attr("d", path);
svg.append("clipPath")
.attr("id", "clip-land")
.append("use")
.attr("xlink:href", "#land");
svg.append("g")
.attr("class", "districts")
.attr("clip-path", "url(#clip-land)")
.selectAll("path")
.data(topojson.feature(congress116th2019, congress116th2019.objects["116thcongress"]).features)
.enter().append("path")
.attr("d", path)
.attr('fill', d => 'inherit')
.attr('stroke', d => 'inherit')
.style('stroke-width', d => {
return d.candidate ? 1 : 1;
});
svg.append("path")
.attr("class", "district-boundaries")
.datum(topojson.mesh(congress116th2019, congress116th2019.objects['116thcongress'],
function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
.attr("d", path);
svg.append("path")
.attr("class", "state-boundaries")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("d", path);
return svg.node();
}
md`## Appendix`
usCongress = (await fetch(`https://cdn.rawgit.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us-congress-113.json`)).json()
/* via https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_116th_Congressional_Districts/FeatureServer/0/query?where=1=1&outFields=*&returnGeometry=true&f=pgeojson */
congress116th2019 = FileAttachment("116thcongress.topo@1.json").json()
us = (await fetch('https://cdn.rawgit.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json')).json()
d3 = require('d3')
topojson = require('topojson')
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.
