27:null 28:["$","title",null,{"children":"\"Where are people splitting tickets?\" graphics | Test - Jacob | Observable"}] 2d:T8e2,legend = html` `;2e:T42b,montanaMapEmbed2012 = html `

Estimated rate of ticket splitting, 2012

${await montanaMapPctSplit2012}

${legend}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`2f:T42b,montanaMapEmbed2016 = html `

Estimated rate of ticket splitting, 2016

${await montanaMapPctSplit2016}

${legend}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`30:T42b,montanaMapEmbed2020 = html `

Estimated rate of ticket splitting, 2020

${await montanaMapPctSplit2020}

${legend}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`31:T42b,montanaMapEmbed2024 = html `

Estimated rate of ticket splitting, 2024

${await montanaMapPctSplit2024}

${legend}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`32:T11bb,montanaMapPctSplit2012 = { const isMobile = window.innerWidth < 768; const mapWidth = isMobile ? 500 : 800; const mapHeight = isMobile ? 300 : 500; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => { return pixelOffset * scale; }; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); // ✅ diverging color scale for % change const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ // ✅ COUNTIES COLORED BY change12_24 Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2012]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 4 }), Plot.geo(cities, { fill: "black" }), Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 13 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 33:T11bb,montanaMapPctSplit2016 = { const isMobile = window.innerWidth < 768; const mapWidth = isMobile ? 500 : 800; const mapHeight = isMobile ? 300 : 500; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => { return pixelOffset * scale; }; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); // ✅ diverging color scale for % change const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ // ✅ COUNTIES COLORED BY change12_24 Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2016]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 4 }), Plot.geo(cities, { fill: "black" }), Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 13 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 34:T11bb,montanaMapPctSplit2020 = { const isMobile = window.innerWidth < 768; const mapWidth = isMobile ? 500 : 800; const mapHeight = isMobile ? 300 : 500; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => { return pixelOffset * scale; }; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); // ✅ diverging color scale for % change const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ // ✅ COUNTIES COLORED BY change12_24 Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2020]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 4 }), Plot.geo(cities, { fill: "black" }), Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 13 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 35:T11bb,montanaMapPctSplit2024 = { const isMobile = window.innerWidth < 768; const mapWidth = isMobile ? 500 : 800; const mapHeight = isMobile ? 300 : 500; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => { return pixelOffset * scale; }; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); // ✅ diverging color scale for % change const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ // ✅ COUNTIES COLORED BY change12_24 Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2024]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 4 }), Plot.geo(cities, { fill: "black" }), Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 13 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 36:T584,montanaMapEmbed2012Mobile = html`

Estimated rate of ticket splitting, 2012

${await montanaMapPctSplit2012Mobile}

${legendMobile}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`;37:T584,montanaMapEmbed2016Mobile = html`

Estimated rate of ticket splitting, 2016

${await montanaMapPctSplit2016Mobile}

${legendMobile}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`;38:T584,montanaMapEmbed2020Mobile = html`

Estimated rate of ticket splitting, 2020

${await montanaMapPctSplit2020Mobile}

${legendMobile}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`;39:T630,legendMobile = html` `; 3a:T584,montanaMapEmbed2024Mobile = html`

Estimated rate of ticket splitting, 2024

${await montanaMapPctSplit2024Mobile}

${legendMobile}

Data source: Montana Secretary of State election data.
Graphic: Jacob Olness/MTFP

`;3b:T619,cities300px= ({ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.00941481367617, 46.86845609815254 ] }, "properties": { "GEOID": "3050200", "NAME": "Missoula", offset: [-102,8], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.32618037830662, 48.21553771988646 ] }, "properties": { "GEOID": "3040075", "NAME": "Kalispell", offset: [-11,-16] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.05476616601253, 45.682775182946244 ] }, "properties": { "GEOID": "3008950", "NAME": "Bozeman", offset: [98,6] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -108.55027669152761, 45.788885426373696 ] }, "properties": { "GEOID": "3006550", "NAME": "Billings", offset: [-19,-15], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.29948415503986, 47.50216159847621 ] }, "properties": { "GEOID": "3032800", "NAME": "Great Falls", offset: [-118,-9] } } ] })3c:T1121,montanaMapPctSplit2012Mobile = { const mapWidth = 500; const mapHeight = 300; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => pixelOffset * scale; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities300px.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2012]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 2 }), Plot.geo(cities300px, { fill: "black" }), // CITY LABELS Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 15 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${ offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 3d:T11f4,montanaMapPctSplit2016Mobile = { const mapWidth = 500; const mapHeight = 300; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => pixelOffset * scale; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities300px.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2016]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 2 }), Plot.geo(cities300px, { fill: "black" }), // CITY LABELS Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 15 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), // ---------------------------------------------------- // ARROWS + MULTI-LINE LABELS // No changes needed here, it still works. // ---------------------------------------------------- (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${ offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 3e:T1121,montanaMapPctSplit2020Mobile = { const mapWidth = 500; const mapHeight = 300; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => pixelOffset * scale; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities300px.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2020]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 2 }), Plot.geo(cities300px, { fill: "black" }), // CITY LABELS Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 15 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${ offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 3f:T1122,montanaMapPctSplit2024Mobile = { const mapWidth = 500; const mapHeight = 300; const pixelToGeoOffset = (pixelOffset, scale = 0.02) => pixelOffset * scale; const getPolygonCentroid = (coordinates) => { const coords = coordinates[0]; let x = 0, y = 0; for (let i = 0; i < coords.length; i++) { x += coords[i][0]; y += coords[i][1]; } return [x / coords.length, y / coords.length]; }; const transformedCities = cities300px.features.map(f => ({ ...f.properties, coordinates: f.geometry.coordinates })); const splitTicketColor = d3.scaleThreshold() .domain(splitTicketBreaks) .range(splitTicketColors); const plot = Plot.plot({ width: mapWidth, height: mapHeight, projection: { type: "albers", rotate: [110, 0, 0], domain: state }, inset: 20, style: { fontFamily: "Arial, sans-serif" }, marks: [ Plot.geo(countiesWithSplitTicketData, { fill: d => splitTicketColor(d.properties[2024]), stroke: "#fff", strokeWidth: 1, zIndex: 1 }), Plot.geo(state, { stroke: "#525151", fill: "none", strokeWidth: 2 }), Plot.geo(cities300px, { fill: "black" }), // CITY LABELS Plot.text(transformedCities, { x: d => d.coordinates[0] + pixelToGeoOffset(d.offset ? d.offset[0] : 7, -0.009), y: d => d.coordinates[1] - pixelToGeoOffset(d.offset ? d.offset[1] : 8, 0.013), text: d => d.NAME, fill: "black", fontSize: 15 }), Plot.geo(lakes, { fill: "white" }), Plot.geo(reservations, { fill: '#595959', fillOpacity: 0.1, stroke: '#595959', strokeOpacity: 1, strokeWidth: 2 }), (index, scales, values, dims, { projection }) => { const selectedCounties = countiesWithSplitTicketData.features.filter(d => countyOffsets[d.properties.county] ); return htl.svg` ${selectedCounties.map(d => { const coords = getPolygonCentroid(d.geometry.coordinates); let cx, cy; const stream = projection.stream({ point(x, y) { cx = x; cy = y; } }); stream.point(coords[0], coords[1]); const offsets = countyOffsets[d.properties.county]; if (!offsets) return ""; const sx = cx + offsets.arrowOffset.x; const sy = cy + offsets.arrowOffset.y; const ex = cx + offsets.arrowheadOffset.x; const ey = cy + offsets.arrowheadOffset.y; const curve = offsets.curve; const ctrlX = (sx + ex) / 2 + (ey - sy) * curve; const ctrlY = (sy + ey) / 2 - (ex - sx) * curve; return htl.svg` ${ offsets.customText ? offsets.customText.map((line, i) => htl.svg`${line.text}` ) : htl.svg` ${d.properties.county} ` } `; })} `; } ] }); return plot; }; 40:Tab0,cities = ({ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.00941481367617, 46.86845609815254 ] }, "properties": { "GEOID": "3050200", "NAME": "Missoula", offset: [-18,-10], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -105.83850296885869, 46.40588180031621 ] }, "properties": { "GEOID": "3049525", "NAME": "Miles City", offset: [-50,9] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.32618037830662, 48.21553771988646 ] }, "properties": { "GEOID": "3040075", "NAME": "Kalispell", offset: [-51,-4] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -109.68049816861198, 48.54275568290601 ] }, "properties": { "GEOID": "3035050", "NAME": "Havre", offset: [42,-5] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.54225090137798, 45.99630474669668 ] }, "properties": { "GEOID": "3011397", "NAME": "Butte", offset: [-42,0] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.05476616601253, 45.682775182946244 ] }, "properties": { "GEOID": "3008950", "NAME": "Bozeman", offset: [-57,0] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.0196972521252, 46.59642057169749 ] }, "properties": { "GEOID": "3035600", "NAME": "Helena", offset: [-15,-10], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -108.55027669152761, 45.788885426373696 ] }, "properties": { "GEOID": "3006550", "NAME": "Billings", offset: [-17,10], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.29948415503986, 47.50216159847621 ] }, "properties": { "GEOID": "3032800", "NAME": "Great Falls", offset: [-62,-5] } } ] })41:T85a,map = (opts) => { const layers = opts.layers if (layers.length === 0) return 'No layers to map' const title = opts.title const underlayGroups = opts.underlayGroups || [] 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() const svgScale = opts.scale || 1 const tooltipEnabled = opts.tooltipEnabled || false let tooltip if (tooltipEnabled && d3.select('.svg-tooltip').empty()) { // adapted from https://observablehq.com/@jianan-li/basic-tooltip // conditional prevents redundant tooltips on displays with multiple maps tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position","absolute") .style("visibility","hidden") } else if (tooltipEnabled) { tooltip = d3.select('.svg-tooltip') } // 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') .attr('viewbox', `0,0,${width},${height}`) const plot = svg.append('g') .attr('transform', `scale(${svgScale}) 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) // SVG groups to render under map (optional) underlayGroups.forEach(g => svg) layers.forEach(layer => layer.plot(plot, projection, tooltip)) 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(); }42:[{"id":"6933b68ed7189d91e415f99238e097b71ce54b8307963049390282ad6a8996a0505cf8567b0efb7b4443f18d60dfb4e24520b05922bcdeda4f8eab2def91419b","href":"https://static.observableusercontent.com/files/6933b68ed7189d91e415f99238e097b71ce54b8307963049390282ad6a8996a0505cf8567b0efb7b4443f18d60dfb4e24520b05922bcdeda4f8eab2def91419b","name":"pct_split_by_county@1.csv","type":"text/csv","lastModified":1764953191691.628,"size":2088},{"id":"645541e9ba25b747a365f412d76b246b2d47b8643963f7cb16a3deb0b3ca3b202a3a7c9cb200546c7dc15e899fb8615c78bc6cbd46395f1b8be505a86178f3a8","href":"https://static.observableusercontent.com/files/645541e9ba25b747a365f412d76b246b2d47b8643963f7cb16a3deb0b3ca3b202a3a7c9cb200546c7dc15e899fb8615c78bc6cbd46395f1b8be505a86178f3a8","name":"pct_split_by_county.csv","type":"text/csv","lastModified":1764952328903.89,"size":2084},{"id":"b2aea8a63491537d849cd0af4765f3f140a40977919baadbea444a84804d87cbb9bbcd3bcf65d9df4991335f90c6b88716b2097771cd537c91d07765b9cc6170","href":"https://static.observableusercontent.com/files/b2aea8a63491537d849cd0af4765f3f140a40977919baadbea444a84804d87cbb9bbcd3bcf65d9df4991335f90c6b88716b2097771cd537c91d07765b9cc6170","name":"ticket-split-change@1.csv","type":"text/csv","lastModified":1764952236865.274,"size":2337},{"id":"3823910535bf255fd325fcd9f9bd27fd435bb5a8c124a98ce7bc8ba340d840eff308f73eaaafcf14168783436ca6ad4e5ecbba4def4d2f07f773a9e6f0388bb6","href":"https://static.observableusercontent.com/files/3823910535bf255fd325fcd9f9bd27fd435bb5a8c124a98ce7bc8ba340d840eff308f73eaaafcf14168783436ca6ad4e5ecbba4def4d2f07f773a9e6f0388bb6","name":"nass-cow-count-data@1.csv","type":"text/csv","lastModified":1764952236865.274,"size":2134},{"id":"6e0c8b9f592b4153d75ed4b7f4afe83c679ec44a3d9987be8b1d4aa8caf3fb7c63e0d6df97b05a4a23a4f751ef0f6cfea858a9cb911e12fb96822510028f41c8","href":"https://static.observableusercontent.com/files/6e0c8b9f592b4153d75ed4b7f4afe83c679ec44a3d9987be8b1d4aa8caf3fb7c63e0d6df97b05a4a23a4f751ef0f6cfea858a9cb911e12fb96822510028f41c8","name":"census-mt-2020-county-pops.csv","type":"text/csv","lastModified":1764952236865.274,"size":1882},{"id":"4ce757fa11941a1e29a382fad25aa27aa2427c9bff97ba84aa495812e30138daf5157b0147e3b32990cf37e95758ef56d244b8c4891ca1696566a335ff5bf3a4","href":"https://static.observableusercontent.com/files/4ce757fa11941a1e29a382fad25aa27aa2427c9bff97ba84aa495812e30138daf5157b0147e3b32990cf37e95758ef56d244b8c4891ca1696566a335ff5bf3a4","name":"cows-per-capita-2024.csv","type":"text/csv","lastModified":1764952236865.274,"size":1617}] 2b:{"id":"47f18315d13b0aff","slug":null,"title":"\"Where are people splitting tickets?\" graphics","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-12-05T16:30:36.865Z","update_time":"$D2025-12-05T21:34:50.612Z","view_time":null,"first_public_time":"$D2025-12-05T16:30:36.865Z","has_unpublished_edits":null,"fork":{"id":"ee91f37b668f2acc","slug":null,"title":"Ticket splitting graphics","owner":{"id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob","avatar_url":"https://avatars-next.observableusercontent.com/286ea806712c4101f38678daa20ec893487774be0cb915d1ec1d72122a1654ea","tier":"starter_2024"},"version":2127,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"524ba9658b83acf5","login":"jacob-olness2","name":"Jacob Olness","avatar_url":"https://avatars-next.observableusercontent.com/dfa74109c8f708d522fb4a9f595e7b21ff67039e8e2057c1dacde7875e3a05a0","tier":null}],"members":[{"type":"individual","id":"524ba9658b83acf5","login":"jacob-olness2","name":"Jacob Olness","avatar_url":"https://avatars-next.observableusercontent.com/dfa74109c8f708d522fb4a9f595e7b21ff67039e8e2057c1dacde7875e3a05a0","tier":null,"role":"editor"},{"type":"team","id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob","avatar_url":"https://avatars-next.observableusercontent.com/286ea806712c4101f38678daa20ec893487774be0cb915d1ec1d72122a1654ea","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"\"Where are people splitting tickets?\" graphics","cells":[{"id":1734,"value":"# \"Where are people splitting tickets?\" graphics","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# TICKET SPLITTING NET CHANGE 2012-2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2024,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1951,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1955,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"splitTicketColors = [\n\n // Link #ce5a00 color based\n '#f8c79f',\n '#eaa255',\n '#ce5a00',\n '#b55912',\n '#87420e'\n // '#f8c79f','#eda66a','#ce5a00','#a74900','#813900'\n // '#ffe8d6','#f8c79f','#eda66a','#ce5a00','#a74900','#813900','#592700'\n // Highlight color #F85028 based\n // '#ffe0d9','#ffb8a8','#ff8e75','#f85028','#d03d1d','#a62f15','#7a210e'\n\n \n // Sunset\n // '#f3e79b','#fac484','#f8a07e','#eb7f86','#ce6693','#a059a0','#5c53a5'\n\n // Sunset dark\n // '#f3e79b','#fac484','#f8a07e','#eb7f86','#ce6693','#a059a0','#5c53a5'\n // Yellow Orange\n // '#ecda9a','#efc47e','#f3ad6a','#f7945d','#f97b57','#f66356','#ee4d5a'\n // Red Orange\n // '#f6d2a9','#f5b78e','#f19c7c','#ea8171','#dd686c','#ca5268','#b13f64'\n // '#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4'\n // \"#f7fbff\",\n // \"#deebf7\",\n // \"#c6dbef\",\n // \"#9ecae1\",\n // \"#6baed6\",\n // \"#3182bd\",\n // \"#08519c\"\n];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"splitTicketBreaks = [0.05, 0.10, 0.15, 0.20]\n// [0.02, 0.05, 0.10, 0.15, 0.20, 0.25]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"splitTicketCountyData = FileAttachment(\"ticket-split-change@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"countyOffsets = ({\n \"Petroleum\": { \n arrowOffset: { x: 65, y: -100 }, \n arrowheadOffset: { x: -9, y: -10 },\n textOffset: { x: 130, y: -122 }, \n curve: -0.2,\n customText: [\n { text: \"MOST COWS PER CAPITA\", fontSize: \"13px\", fontWeight: \"bold\" },\n { text: \"Petroleum County\", fontSize: \"12px\", fontWeight: \"bold\" },\n { text: \"62 cows per person\", fontSize: \"12px\", fontWeight: \"normal\" }\n ]\n },\n \"Mineral\": { \n arrowOffset: { x: -0, y: 220 }, \n arrowheadOffset: { x: 18, y: 15 },\n textOffset: { x: 17, y: 238 }, \n curve: 0.3,\n customText: [\n { text: \"FEWEST COWS PER CAPITA\", fontSize: \"13px\", fontWeight: \"bold\" },\n { text: \"Mineral County\", fontSize: \"12px\", fontWeight: \"bold\" },\n { text: \"17 people per cow\", fontSize: \"12px\", fontWeight: \"normal\" }\n ]\n },\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof table = Inputs.table(flatDataMerged, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof countiesTable = Inputs.table(mergedData, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"### DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1740,"value":"percentSplit = FileAttachment(\"pct_split_by_county@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"state = d3.json('https://gist.githubusercontent.com/eidietrich/3e627373ba109a479f1409a3cc7a9be5/raw/7a24d4b3290a3e252513baf14db6b1045f928b81/montana.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"counties = {\n const mtCounties = await d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')\n console.log(mtCounties)\n return mtCounties\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"reservations = {\n const topo = await d3.json('https://gist.githubusercontent.com/eidietrich/364f10df3945bb511a7ebcbb1854bc21/raw/2b9586b64d6e7bdfd594ad9dddb79bf36bb39f0d/mt-reservations.json')\n \n const geo = topojson.feature(topo, topo.objects.reservations)\n return geo\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"### Data processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"cowCounts = FileAttachment(\"nass-cow-count-data@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"peopleCounts = FileAttachment(\"census-mt-2020-county-pops.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"flatDataMerged = {\n const counties = cowCounts.map(d => d.county)\n\n const clean = rawCountyName => {\n // aligns county names for data merge\n return rawCountyName\n .replace(' County, Montana','') // strips this piece from name\n .replace('Lewis and Clark','Lewis & Clark')\n }\n return cowCounts.map(row => {\n \n const match = peopleCounts.find(d => clean(d.geo_name) === row.county)\n if (!match) throw `Error, no match for ${row.county}`\n\n const cows = +row.cows_2020.replace(',','') // + operator converts character string to integer number\n // comma replace avoids confusion over comma in data\n const people = +match.population_2020\n \n return {\n county: row.county,\n cows: cows, \n people: people,\n cowsPerCapita: cows / people,\n peoplePerCow: people / cows,\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"mergedData = FileAttachment(\"cows-per-capita-2024.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"countiesWithSplitTicketData = ({\n ...counties,\n features: counties.features.map(feature => {\n const match = percentSplit.find(d =>\n d.county\n .toUpperCase()\n .replace('LEWIS & CLARK', 'LEWIS AND CLARK') ===\n feature.properties.NAME\n );\n\n if (!match) throw `Error, no match for ${feature.properties.NAME}`;\n\n return {\n ...feature,\n properties: {\n ...feature.properties,\n\n // keep original county name\n county: feature.properties.NAME,\n\n // numeric coercion from csv\n 2012: Number(match[\"2012\"]),\n 2016: Number(match[\"2016\"]),\n 2020: Number(match[\"2020\"]),\n 2024: Number(match[\"2024\"])\n }\n };\n })\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"countiesWithMergedDataOld = ({\n ...counties,\n features: counties.features.map(feature => {\n const match = flatDataMerged.find(d => d.county.toUpperCase().replace('LEWIS & CLARK', 'LEWIS AND CLARK') === feature.properties.NAME)\n if (!match) throw `Error, no match for ${feature.properties.NAME}`\n return {\n ...feature,\n properties: match\n }\n \n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"urbanAreas = {\n const topo = await d3.json('https://gist.githubusercontent.com/eidietrich/2febe571b8fa2edcf7753f4b65149ed1/raw/155518587a1e8809d9bfab701c9bcfd0461089b4/mt-urban-areas.json')\n \n const geo = topojson.feature(topo, topo.objects['urban-areas'])\n return geo\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"import { FeatureLayer, PointLayer } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// import { counties, cities, highways, lakes, urbanAreas } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"### Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"renderTooltip = (tooltip, event) => {\n // Sample tooltip generation function\n if (!tooltip) console.warn('Error: Is {tooltipEnabled: true} set on top-level map object?')\n const data = event.target.__data__\n const content = `

County: ${data}

People: ${data.properties.people}

Cattle: ${data.properties.cows}

Cows Per Capita: ${data.properties.cowsPerCapita},

`;\n tooltip.html(content)\n const toolTipStyle = tooltipDefaultStyle // object\n Object.keys(toolTipStyle).forEach(key => {\n tooltip.style(key, toolTipStyle[key])\n })\n tooltip.style(\"top\", (event.pageY-10)+\"px\").style(\"left\",(event.pageX+10)+\"px\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"tooltipDefaultStyle = ({\n 'border': '1px solid #806f47', \n 'background-color': 'white',\n 'font-family': 'Arial, sans-serif',\n 'font-size': '14px',\n 'line-height':' 1.2em',\n 'padding': '0.2em 0.5em',\n 'opacity': '0.8em',\n 'max-width': '300px',\n 'z-index': '100',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"### Testing for tooltip:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 2c:"$2b:body"