31:T4fe,mapEmbed = html`

Montana Supreme Court districts as proposed by House Bill 325

${await judicialDistrictMap()}

${await legend()}

Data: HB 325 text. Map: Eric Dietrich / MTFP

`32:T45c,judicialDistrictMap = () => map({ // title: (width > 500) ? `Known active COVID-19 cases in Montana, ${d3.timeFormat('%B %d, %Y')(new Date())}` : `Known active COVID-19 cases`, width: mtfpLayoutWidth(), height: mtfpLayoutWidth() * 0.6, margin: {top: 10, left: 10, right: 10, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), layers: [ new FeatureLayer({ geodata: counties, featureStyle: { fill: d => color(d.judicialDistrict) } }), // new FeatureLayer({ // geodata: lakes, // featureStyle: { // fill: d => '#444', // opacity: d => 0.5, // stroke: d => 'none', // } // }), new FeatureLayer({ geodata: highways, featureStyle: { fill: d => 'none', opacity: d => 0.3, stroke: d => '#444', } }), new PointLayer({ geodata: cities, labelStyle: { // text: d => (width > 500) ? d.NAME : '', text: d => d.NAME, dx: d => d.offset ? d.offset[0] : '0.5em', dy: d => d.offset ? d.offset[1] : '0.5em', }, }), ], })33:Tc26,/* From: https://leg.mt.gov/bills/2021/billpdf/HB0325.pdf (a) First district: Blaine, Cascade, Chouteau, Fergus, Hill, Judith Basin, Liberty, Pondera, Teton, and 2 Toole Counties; 3 (b) Second district: Big Horn, Carbon, Carter, Custer, Daniels, Dawson, Fallon, Garfield, Golden 4 Valley, McCone, Meagher, Musselshell, Park, Petroleum, Phillips, Powder River, Prairie, Richland, Roosevelt, 5 Rosebud, Sheridan, Stillwater, Sweet Grass, Treasure, Valley, Wheatland, and Wibaux Counties; 6 (c) Third district: Yellowstone County; 7 (d) Fourth district: Beaverhead, Broadwater, Deer Lodge, Granite, Jefferson, Lewis and Clark, Powell, 8 and Ravalli Counties; 9 (e) Fifth district: Flathead, Glacier, Lincoln, and Sanders Counties; 10 (f) Sixth district: Gallatin, Madison, and Silver Bow Counties; and 11 (g) Seventh district: Mineral, Missoula, and Lake Counties. */ districts = [ {county: "LINCOLN", district: "5" }, {county: "SHERIDAN", district: "2" }, {county: "FLATHEAD", district: "5" }, {county: "GLACIER", district: "5" }, {county: "DANIELS", district: "2" }, {county: "VALLEY", district: "2" }, {county: "TOOLE", district: "1" }, {county: "PHILLIPS", district: "2" }, {county: "LIBERTY", district: "1" }, {county: "BLAINE", district: "1" }, {county: "HILL", district: "1" }, {county: "ROOSEVELT", district: "2" }, {county: "PONDERA", district: "1" }, {county: "SANDERS", district: "5" }, {county: "CHOUTEAU", district: "1" }, {county: "RICHLAND", district: "2" }, {county: "TETON", district: "1" }, {county: "MCCONE", district: "2" }, {county: "LAKE", district: "7" }, {county: "GARFIELD", district: "2" }, {county: "LEWIS AND CLARK", district: "4" }, {county: "DAWSON", district: "2" }, {county: "FERGUS", district: "1" }, {county: "CASCADE", district: "1" }, {county: "MISSOULA", district: "7" }, {county: "POWELL", district: "4" }, {county: "MINERAL", district: "7" }, {county: "PETROLEUM", district: "2" }, {county: "WIBAUX", district: "2" }, {county: "JUDITH BASIN", district: "1" }, {county: "PRAIRIE", district: "2" }, {county: "MEAGHER", district: "2" }, {county: "CUSTER", district: "2" }, {county: "GRANITE", district: "4" }, {county: "ROSEBUD", district: "2" }, {county: "BROADWATER", district: "4" }, {county: "FALLON", district: "2" }, {county: "MUSSELSHELL", district: "2" }, {county: "RAVALLI", district: "4" }, {county: "WHEATLAND", district: "2" }, {county: "GOLDEN VALLEY", district: "2" }, {county: "JEFFERSON", district: "4" }, {county: "YELLOWSTONE", district: "3" }, {county: "TREASURE", district: "2" }, {county: "DEER LODGE", district: "4" }, {county: "CARTER", district: "2" }, {county: "SILVER BOW", district: "6" }, {county: "SWEET GRASS", district: "2" }, {county: "PARK", district: "2" }, {county: "STILLWATER", district: "2" }, {county: "BIG HORN", district: "2" }, {county: "BEAVERHEAD", district: "4" }, {county: "MADISON", district: "6" }, {county: "POWDER RIVER", district: "2" }, {county: "CARBON", district: "2" }, {county: "GALLATIN", district: "6" }, ]34:T461,judges = [ { name: 'Chief Justice Mike McGrath', description: 'McGrath was elected in 2008. Current term ends in 2024.', newDistrictNumber: '7', }, { name: 'Justice James Rice', description: 'Rice was appointed by Gov. Judy Martz (R) in 2001. Current term ends in 2022.', newDistrictNumber: '1', }, { name: 'Justice Ingrid Gustafson', description: 'Gustafson was appointed in 2017 by Gov. Steve Bullock (D). Current term ends 2026.', newDistrictNumber: '2', }, { name: 'Justice Dirk Sandefur', description: 'Sandefur was elected in 2016. Current term ends in 2024.', newDistrictNumber: '3', }, { name: 'Justice Beth Baker', description: 'Baker was elected in 2010. Current term ends in 2026.', newDistrictNumber: '4', }, { name: 'Justice Laurie McKinnon', description: 'McKinnon was elected in 2012. Current term ends in 2028.', newDistrictNumber: '5', }, { name: 'Justice Jim Shea', description: 'Shea was appointed in 2014 by Gov. Steve Bullock (D). Current term ends in 2022.', newDistrictNumber: '6', }, ]35:Ta2f,cities = ({ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.00941481367617, 46.86845609815254 ] }, "properties": { "GEOID": "3050200", "NAME": "Missoula", offset: [-15,12], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -105.83850296885869, 46.40588180031621 ] }, "properties": { "GEOID": "3049525", "NAME": "Miles City" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.32618037830662, 48.21553771988646 ] }, "properties": { "GEOID": "3040075", "NAME": "Kalispell", offset: [-50,5] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -109.68049816861198, 48.54275568290601 ] }, "properties": { "GEOID": "3035050", "NAME": "Havre" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.54225090137798, 45.99630474669668 ] }, "properties": { "GEOID": "3011397", "NAME": "Butte" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.05476616601253, 45.682775182946244 ] }, "properties": { "GEOID": "3008950", "NAME": "Bozeman" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.0196972521252, 46.59642057169749 ] }, "properties": { "GEOID": "3035600", "NAME": "Helena", offset: [-15,-5], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -108.55027669152761, 45.788885426373696 ] }, "properties": { "GEOID": "3006550", "NAME": "Billings", offset: [-20,15], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.29948415503986, 47.50216159847621 ] }, "properties": { "GEOID": "3032800", "NAME": "Great Falls" } } ] })36:T566,map = (opts) => { const layers = opts.layers if (layers.length === 0) return 'No layers to map' const title = opts.title const height = opts.height || 600 const width = opts.width || 800 // width comes predefined const topMargin = title ? 40 : 10 const margin = opts.margin || {top: topMargin, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style('background-color', '#fff') // .style("width", "100%") .style("height", "auto") // .style('border', '1px solid #ddd') .attr('font-family','sans-serif') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) .attr('font-size',10) .attr('text-anchor','middle') // fit map based on first layer (i.e. base layer) projection.fitSize([plotWidth, plotHeight], layers[0].geodata) layers.forEach(layer => layer.plot(plot, projection)) if (title) { svg.append('text') .attr('y', margin.top - 14) .attr('x', margin.left + plotWidth / 2) .text(title) .attr('text-anchor','middle') .attr('font-size', 14) .attr('font-weight', 'bold') } return svg.node(); }37:T54c,class FeatureLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features // optional opts this.featureStyle = opts.featureStyle || {} this.handleFeatureClick = opts.handleFeatureClick || ((e) => null) this.featureOrder = opts.featureOrder || ((a,b) => true) // calculated this.style = { opacity: d => 1, fill: d => '#ddd', fillOpacity: d => 1, stroke: d => '#fff', strokeWidth: d => 1, strokeOpacity: d => 1, ...this.featureStyle } } plot(parent, projection){ const path = d3.geoPath().projection(projection); const style = this.style const shapes = parent.append('g').attr('class','feature-layer') shapes.selectAll('.feature') .data(this.features.sort(this.featureOrder)).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', (f => style.opacity(f.properties))) .attr('fill', (f => style.fill(f.properties))) .attr('fill-opacity', (f => style.fillOpacity(f.properties))) .attr('stroke', (f => style.stroke(f.properties))) .attr('stroke-width', (f => style.strokeWidth(f.properties))) .attr('stroke-opacity', (f => style.strokeOpacity(f.properties))) .on('click', this.handleFeatureClick) } }38:T94e,class PointLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features // optional opts this.featureStyle = opts.featureStyle || {} this.labelStyle = opts.labelStyle this.customMarker = opts.customMarker || null // calculated this.style = { radius: d => 2, opacity: d => 1, fill: d => '#222', fillOpacity: d => 1, stroke: d => null, strokeWidth: d => 1, strokeOpacity: d => 1, ...this.featureStyle } this.label = { text: d => null, fill: d => '#000', fontSize: d=> '12px', dx: d => '0.5em', dy: d => '0.5em', textAnchor: d => 'start', ...this.labelStyle } } plot(parent, projection){ const path = d3.geoPath().projection(projection); const style = this.style const label = this.label // const shapes = parent.append('g').attr('class','feature-layer') const customMarker = this.customMarker const markerGroups = parent.append('g').attr('class','feature-layer') .selectAll('.feature') .data(this.features).enter() .append('g') .attr('transform', d => { const point = path.centroid(d) return `translate(${point[0]},${point[1]})` }) if (customMarker) { markerGroups.each(customMarker, label) } else { markerGroups.append('circle') .attr('r', (f => style.radius(f.properties))) .attr('cx', 0) .attr('cy', 0) .attr('class', 'feature') .attr('opacity', (f => style.opacity(f.properties))) .attr('fill', (f => style.fill(f.properties))) .attr('fill-opacity', (f => style.fillOpacity(f.properties))) .attr('stroke', (f => style.stroke(f.properties))) .attr('stroke-width', (f => style.strokeWidth(f.properties))) .attr('stroke-opacity', (f => style.strokeOpacity(f.properties))) } if (label) { markerGroups.append('text') .attr('x',0) .attr('y',0) .attr('font-size', f => label.fontSize(f.properties)) .attr('text-anchor', f => label.textAnchor(f.properties)) .attr('dy', f => label.dy(f.properties)) .attr('dx', f => label.dx(f.properties)) .attr('fill', f => label.fill(f.properties)) .text(f => label.text(f.properties)) } } }39:T493,class AnnotationLayer { constructor(opts) { // required opts this.annotations = opts.annotations // optional opts this.annotationStyle = opts.annotationStyle this.style = { fill: d => '#000', dx: d => '0.5em', dy: d => '0.5em', textAnchor: 'start', ...this.annotationStyle } } plot(parent, projection){ // const path = d3.geoPath().projection(projection); const style = this.style // const shapes = parent.append('g').attr('class','feature-layer') const annotationGroups = parent.append('g').attr('class','feature-layer') .selectAll('.feature') .data(this.annotations).enter() .append('g') .attr('transform', d => { return `translate(${d.x},${d.y})` }) annotationGroups.append('text') .attr('x',0) .attr('y',0) .attr('text-anchor', style.textAnchor) .attr('font-size', style.textSize) .attr('font-style', style.textStyle) // .attr('dy', f => style.dy(f.properties)) // .attr('dx', f => style.dx(f.properties)) // .attr('fill', f => style.fill(f.properties)) .text(f => f.text) } }3a:Tc15,class GroupedPointLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features this.joinData = opts.joinData this.markerStyle = { // defaults radius: d => 5, opacity: d => 1, fill: d => '#444', fillOpacity: d => 1, stroke: d => '#222', strokeWidth: d => 1, strokeOpacity: d => 1, ...opts.markerStyle } // optional opts this.groupDx = opts.groupDx || 0 this.groupDy = opts.groupDy || 0 } plot(parent, projection){ this.path = d3.geoPath().projection(projection); const sortedFeatures = this.features.sort((a,b) => this.path.centroid(a)[0] - this.path.centroid(b)[0] ) // Awkward internal function b/c .each() screws with this. calls const markerStyle = this.markerStyle const sizer = markerStyle.radius const countyNameKey = item => item.county.toUpperCase() const joinData = this.joinData const groupDx = this.groupDx const groupDy = this.groupDy function buildMapGroup(d,i,nodes) { // console.log('group', joinData) const thisGroupData = joinData .filter(row => countyNameKey(row) === d.properties.NAME) if (thisGroupData.length === 0) return const labelRadiusThreshold = 20 const pack = (data, width, height) => d3.pack() .size([width - 2, height - 2]) .radius(d => sizer(d.data)) .padding(2) (d3.hierarchy({children: data}).sum(sizer)) const root = pack(thisGroupData, 1, 1) const leaf = d3.select(this) .append('g') .selectAll("g") .data(root.leaves()) .enter().append("g") // assumes pre-translated centroids // with jitter // .attr("transform", (d,i) => `translate(${d.x + 1 + Math.random()*2},${d.y + 1 + Math.random()*2})`) // without jitter .attr("transform", (d,i) => `translate(${d.x + 1 + groupDx},${d.y + 1 + groupDy})`) leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) .attr('opacity', f => markerStyle.opacity(f.data)) .attr('fill', f => markerStyle.fill(f.data)) .attr("fill-opacity", f => markerStyle.fillOpacity(f.data)) .attr('stroke', f => markerStyle.stroke(f.data)) .attr('stroke-width', f => markerStyle.strokeWidth(f.data)) .attr('stroke-opacity', f => markerStyle.strokeOpacity(f.data)) leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); // leaf.append("title") // .text(makeTitleText) } const groups = parent.append('g').attr('class','grouped-point-layer') .selectAll('.point-group') .data(this.features).enter() .append('g').attr('class','point-group') .attr('transform', d => `translate(${this.path.centroid(d)[0]},${this.path.centroid(d)[1]})`) .each(buildMapGroup) } }3b:[] 2f:{"title":"Montana proposed judicial districts under HB 321","cells":[{"id":481,"value":"md`# Montana proposed judicial districts under HB 321\n\nGraphic for March 26, 2021 Montana Free Press story \"[A court divided?](https://montanafreepress.org/2021/03/26/a-court-divided-house-bill-325-supreme-cout-election-by-district/)\".\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1650,"value":"color = {\n const categories = judges.map(d => d.newDistrictNumber)\n return d3.scaleOrdinal(categories, d3.schemeSet2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"mtfpLayoutWidth = () => {\n if (width <= 600) {\n return width - 20\n } else {\n return 600\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"secondaryMapWidth = () => {\n if (width <= 600) {\n return width - 20\n } else if (width >= 1400 ){\n return 1400 * 0.9 * 0.5\n } else {\n return width * 0.9 * 0.5 - 10\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"legend = () => {\n const judge = (d) => {\n return html`

\n \n District ${d.newDistrictNumber}\n

${d.name}

${d.description}

`\n }\n return html`

\n ${judges.map(d => judge(d))}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Geodata`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"counties = {\n const mtCounties = await d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')\n \n mtCounties.features.forEach(county => {\n const match = districts.find(district => district.county === county.properties.NAME)\n county.properties.judicialDistrict = match.district\n })\n \n return mtCounties\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"highways = {\n const highways = await d3.json('https://gist.githubusercontent.com/eidietrich/67cbe6196b6b87698fc42f50e96076ab/raw/4d51ceb627c76360497837e1ac5338698f7df752/ne_mt_highways_state_resolution.topojson.json')\n \n const topo = topojson.feature(highways, highways.objects.highways)\n topo.features = topo.features.filter(d => d.properties.type === 'Major Highway')\n return topo\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"lakes = {\n const topo = await d3.json('https://gist.githubusercontent.com/eidietrich/753ea92617c64c938ad36fddad3b0b7f/raw/63273fccb218ffdcf1d14b0c0d31cbe658588661/mt-major-lakes.json')\n \n const geo = topojson.feature(topo, topo.objects.lakes)\n return geo\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"embed = require('vega-embed@4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"squareMarker = (d, i, nodes) => {\n // console.log(d, i, nodes)\n const w = 3\n d3.select(nodes[i]).append('rect')\n .attr('x', -w/2)\n .attr('y', -w/2)\n .attr('width', w)\n .attr('height', w)\n .attr('class', 'feature')\n .attr('stroke', '#666')\n .attr('fill', 'none')\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}