31:T881,montanaMap = () => map({ width: largeMapWidth(), height: largeMapWidth() * 0.6, margin: {top: 10, left: 10, right: 10, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), tooltipEnabled: true, layers: [ new FeatureLayer({ geodata: state, // geojson featureStyle: { fill: d => 'none', stroke: d => 'none', strokeWidth: d => 1, }, }), new FeatureLayer({ geodata: counties, // geojson featureStyle: { fill: d => '#d9d1b8', stroke: d => '#fff', strokeWidth: d => 1, zIndex: d => 1, }, renderTooltip: renderTooltip, }), new FeatureLayer({ geodata: lakes, featureStyle: { fill: d => '#fff', stroke: d => 'none', } }), new FeatureLayer({ geodata: highways, featureStyle: { fill: d => 'none', stroke: d => '#a18c4d', opacity: d => 0.5, pointerEvents: d => 'none', // prevents mouse interaction } }), new PointLayer({ geodata: cities, labelStyle: { text: d => (width > 500) ? d.NAME : '', dx: d => d.offset ? d.offset[0] : '0.5em', dy: d => d.offset ? d.offset[1] : '0.5em', }, }), // new PointLayer({ // geodata: countiesWithTestData, // featureStyle: { // radius: d => sizeScale(d.testsPer1kPopulation), // fill: d => '#2c7fb8', // fillOpacity: d => 0.7, // // stroke: d => '#CA532B', // stroke: d => '#2c7fb8', // strokeWidth: d => 2, // }, // labelStyle: { // // text: d => (d.tests > 0) ? `${d3.format('.2s')(d.tests)}` : ``, // text: d => (d.tests > 0) ? `${d3.format(',.0f')(d.testsPer1kPopulation)}` : ``, // dx: d => 0, // dy: d => '0.3em', // textAnchor: d => 'middle', // fontSize: d => '11px', // fill: d => '#fff', // }, // }), new FeatureLayer({ geodata: state, // geojson featureStyle: { fill: d => 'none', stroke: d => 'black', strokeWidth: d => 2, }, }), ], })32: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" } } ] })33: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(); }34:T79b,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) this.renderTooltip = opts.renderTooltip || null // calculated this.style = { class: d => '', opacity: d => 1, fill: d => '#ddd', fillOpacity: d => 1, stroke: d => '#fff', strokeWidth: d => 1, strokeOpacity: d => 1, strokeDasharray: d => 'none', pointerEvents: d => 'auto', ...this.featureStyle } } plot(parent, projection, tooltip){ 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', d => `feature ${style.class(d)}`) .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))) .attr('stroke-dasharray', (f => style.strokeDasharray(f.properties))) .attr('pointer-events', (f => style.pointerEvents(f.properties))) .on('click', this.handleFeatureClick) if (this.renderTooltip) { shapes .on("mouseover", event => tooltip.style("visibility", "visible")) .on("mousemove", event => this.renderTooltip(tooltip, event)) .on("mouseout", event => tooltip.style("visibility", "hidden")) } } }35:Tbe2,class PointLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features // optional opts this.handleFeatureClick = opts.handleFeatureClick || ((e) => null) this.featureStyle = opts.featureStyle || {} this.labelStyle = opts.labelStyle this.customMarker = opts.customMarker || null this.renderTooltip = opts.renderTooltip || 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, strokeDasharray: d => 'none', ...this.featureStyle } this.label = { text: d => null, fill: d => '#000', fontSize: d => '12px', fontWeight: d => 'normal', dx: d => '0.5em', dy: d => '0.5em', textAnchor: d => 'start', ...this.labelStyle } } plot(parent, projection, tooltip){ 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))) .attr('stroke-dasharray', (f => style.strokeDasharray(f.properties))) .on('click', this.handleFeatureClick) } 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('font-weight', f => label.fontWeight(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)) } if (this.renderTooltip) { markerGroups .on("mouseover", event => tooltip.style("visibility", "visible")) .on("mousemove", event => this.renderTooltip(tooltip, event)) .on("mouseout", event => tooltip.style("visibility", "hidden")) } } }36: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) } }37: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) } }38:T44a,class RasterLayer { // plots a geotiff image // WORK IN PROGRESS constructor(opts) { this.geoTiff = opts.geoTiff // 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, strokeDasharray: d => 'none', pointerEvents: d => 'auto', ...this.featureStyle } } plot(parent, projection, tooltip){ const path = d3.geoPath().projection(projection); const style = this.style const image = parent.append('image') .attr('href', this.geoTiff.getImage()) // .attr('height', this.geoTiff.getImage().getHeight()) // .attr('width', this.geoTiff.getImage().getWidth()) } }39:[{"id":"967b7441124aaf158a8e1630fa9afee7c9166427b80390c103f2b131d98edd6a5d390650a14aca818b5fc8e910c72abe6f2c4c5b72497d055848ef07013f2142","href":"https://static.observableusercontent.com/files/967b7441124aaf158a8e1630fa9afee7c9166427b80390c103f2b131d98edd6a5d390650a14aca818b5fc8e910c72abe6f2c4c5b72497d055848ef07013f2142","name":"mt-hillshade-small.tif","type":"image/tiff","lastModified":1690321566044.828,"size":3412654}] 2f:{"title":"D3 + GeoJSON mapping rig","cells":[{"id":0,"value":"# D3 + GeoJSON mapping rig\n\nGraphics rig for generating customizable D3-based maps. Developed for use at [Montana Free Press](https://montanafreepress.org/).","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"### Usage example","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"embedableHtml = {\n return html`\n

\n\n

${legend()}

${await montanaMap()}

Data: Attribution TK

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"largeMapWidth = () => {\n // Customized to Montana Free Press CMS\n if (width <= 600) {\n return width - 20\n } else if (width >= 1400 ){\n return 1400 * 0.9 * 0.66\n } else {\n return width * 0.9 * 0.66 - 10\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"legend = () => html`

\n\n \n TK label\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"### Sample data\nFor state of Montana common use cases","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"state = d3.json('https://gist.githubusercontent.com/eidietrich/3e627373ba109a479f1409a3cc7a9be5/raw/7a24d4b3290a3e252513baf14db6b1045f928b81/montana.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"counties = {\n const mtCounties = await d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')\n \n return mtCounties\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"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":51,"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":91,"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":false,"hidden":false,"mode":"ojs"},{"id":99,"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":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"### Components","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"flatToPointCollection = data => {\n const xKey = 'longitude'\n const yKey = 'latitude'\n return {\n type: 'FeatureCollection',\n features: data.map(d => {\n return {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [+d[xKey], +d[yKey]]\n },\n properties: {\n // NAME: d.Tribe,\n ...d\n }\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"joinFlatDataToGeo = (opts) => {\n // left merge of GeoJson FeatureCollection with flat data array\n // overwrites any existing properties on GeoJson\n // accessors are functions that produce merge keys\n\n /* Example usage\n\n countiesMerged = joinFlatDataToGeo({\n geoData: counties,\n geoAccessor: d => d.NAME,\n flatData: assignments,\n flatAccessor: d => d.county,\n })\n\n */\n \n const {geoData, geoAccessor, flatData, flatAccessor} = opts\n return {\n ...geoData,\n features: geoData.features.map(feature => {\n const p = feature.properties\n const match = flatData.find(d => flatAccessor(d) === geoAccessor(p))\n if (!match) throw `Error, no match for geoData item ${geoAccessor(p)}`\n return {\n ...feature,\n properties: match,\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"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 tooltip.html(`

${data.properties.NAME}

`)\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":false,"hidden":false,"mode":"ojs"},{"id":143,"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":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"hillshade = FileAttachment(\"mt-hillshade-small.tif\").arrayBuffer()\n .then(buffer => GeoTIFF.fromArrayBuffer(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"GeoTIFF = require('geotiff')\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}