3c:null 3d:["$","title",null,{"children":"Districts with Spatial Diagrams | Stu Jordan | Observable"}] 43:T8b2,click_and_zoom = { //set up container const svgHeight = 0.3 * width; const top = htl.html`

`; //initialize projection and path functions const projection = d3.geoAlbersUsa(); const path = d3.geoPath().projection(projection); //set scale and center projection.scale(1).translate([0, 0]); const b = path.bounds(districts); const s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / svgHeight); const t = [ (width - s * (b[1][0] + b[0][0])) / 2, (svgHeight - s * (b[1][1] + b[0][1])) / 2 ]; projection.scale(s).translate(t); let svgMap = d3 .select(top) .select("svg.map") .on("click", function () { d3.select(top) .select("div.info-label") .text("Click or touch a district for info"); svgMap.selectAll("path").attr("class", "district"); d3.select(top) .select("div.info-diagram") .html(""); }); let map = svgMap.append("g"); //draw the districts map .selectAll("path") .data(districts.features) .enter() .append("path") .attr("d", path) .attr("id", (d) => d.properties.district) .attr("class", "district") .on("click", function (evt, d) { d3.selectAll("path").attr("class", "district"); d3.select(this).attr("class", "selected"); d3.select(top).select("div.info-label").text(d.properties.district); d3.select(top).select('div.info-diagram').html(''); d3.select(top).select("div.info-diagram").append(() => spatialDetails(can_by_district.get(d.properties.district))); evt.stopPropagation(); }); //initialize the info box d3.select(top).select("div.info-label").text("Click or touch a district for info"); //zoom svgMap.call( d3 .zoom() .extent([ [0, 0], [width, svgHeight] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) ); function zoomed({ transform }) { map.attr("transform", transform); } return top; }44:T94a,function spatialDetails(candidates){ const margin = {top: 5, right: 10, bottom: 5, left: 10}; //const maxCandidates = d3.max(Array.from(can_by_district.keys()).map(k => can_by_district.get(k).length)) const height = margin.top + 55 + 3 + 10 + 15*candidates.length + 5 + margin.bottom const pScale = d3.scaleLinear() .domain([-7,7]) .range([margin.right,width - margin.left]); const yPos = margin.top+55; return htl.html` ` }45:[{"id":"1375ff460e10a35e149e81669730635ee5fe6dbc7e0d4ed403f0134ae00a8e41f531062c428eb207a1ffd03d25440982b7048d4b9f138dbde3c51aed32d606f1","href":"https://static.observableusercontent.com/files/1375ff460e10a35e149e81669730635ee5fe6dbc7e0d4ed403f0134ae00a8e41f531062c428eb207a1ffd03d25440982b7048d4b9f138dbde3c51aed32d606f1","name":"nv_districts.geojson","type":"application/geo+json","lastModified":1663530500967.569,"size":663228},{"id":"f8b8ebf449eaea5ef3376b396a50d784adf416f431113c3506e34c85822580b525f6bdac162602435f1d39da6793d47e9c31512f1923e95d5dedb7d8a0a67d3e","href":"https://static.observableusercontent.com/files/f8b8ebf449eaea5ef3376b396a50d784adf416f431113c3506e34c85822580b525f6bdac162602435f1d39da6793d47e9c31512f1923e95d5dedb7d8a0a67d3e","name":"candidates_2014.json","type":"application/json","lastModified":1663530520714.014,"size":368219}] 41:{"id":"42b88f9fb2c97b3f","slug":null,"title":"Districts with Spatial Diagrams","thumbnail":"708a613fddada9c8914901d5063376162bfebc810a63621d8f49b7b45604ed71","access_level":"unlisted","create_time":"$D2022-09-18T19:47:17.139Z","update_time":"$D2022-10-17T17:51:01.175Z","view_time":null,"first_public_time":"$D2022-10-17T15:52:26.837Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b15ac6b917c6846","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":"starter_2024","bio":""},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e082f7db26946044","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":null,"bio":""}],"members":[{"type":"individual","id":"e082f7db26946044","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Districts with Spatial Diagrams","cells":[{"id":0,"value":"# Districts with Spatial Diagrams","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"candidates = FileAttachment(\"candidates_2014.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3.extent(candidates, c => c['recipient.cfscore'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"can_by_district = d3.group(candidates, d => d.district)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"districts = FileAttachment(\"nv_districts.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style = htl.html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"Array.from(can_by_district.keys()).filter(d => d.substring(0,2) === \"TX\").map(d => can_by_district.get(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 42:"$41:body"