43:["$","title",null,{"children":"Data Mapping of Traffic Fatalities in Montana | geo-theo | Observable"}] 4b:T60c,

# Data Sources
![data source](${await FileAttachment("MT_DoT_logo.png").url()}) ## Road Networks Road vector line data disaggregated by type of road, maintained by the State of Montana (excludes accident reports with vague location estimates on smaller roads) - **Variables:** lat, lon, name, type, highway network, length, speed limit, surface, mileage with centerline - **Source:** [Montana Department of Transportation](https://data-mdt.hub.arcgis.com/datasets/bfdeb82fddab48438b2066b8314d9f7c_0/explore?location=46.694643%2C-108.993213%2C6)
## Montana Road Accidents Points Large database of road accidents across Montana between 2016-2025. - **Variables:** latitude, longitude, severity - **Source:** [Montana Department of Transportation](https://mdt.maps.arcgis.com/apps/webappviewer/index.html?id=237b766a07074259ad7a6eec66d699b7) - **CRS:** EPSG 6514 - **Resolution:** 1-meter
## Montana Road Traffic Yearly Count - **Variables:** lat, lon, length, counts - **Source:** [Montana Department of Transportation](https://data-mdt.hub.arcgis.com/datasets/dea13f8783434e45aada165e5fe1308d_5/explore?location=46.755100%2C-109.894750%2C6)
## Montana County Daily Vehicle Miles County boundary polygons with sum of daily vehicle miles by county - **Variables:** county, counts - **Source:** [Montana Department of Transportation](https://data-mdt.hub.arcgis.com/datasets/44d4dcdc864f4b82bccf5bb5455a7ec3_1/explore?location=46.939828%2C-109.770287%2C6) - **CRS:** EPSG 4326 - **Resolution:** County boundaries4c:Tb6b,const engine = { distanceMeters(a, b) { const rad = Math.PI / 180; const p = a[1] * rad; const q = b[1] * rad; const h = Math.sin((q - p) / 2) ** 2 + Math.cos(p) * Math.cos(q) * Math.sin((b[0] - a[0]) * rad / 2) ** 2; return ( 12742017.6 * Math.asin( Math.sqrt(Math.min(1, Math.max(0, h))) ) ); }, accidentType(match) { return ( match.accidentType ?? match.severityGroup ?? match.severity ?? match.type ?? match.properties?.accidentType ?? match.properties?.severityGroup ?? match.properties?.severity ?? match.properties?.type ?? "Unknown" ); }, aggregate( model, binMeters, { routeId = null, accidentType = null } = {} ) { const bins = new Map(); for (const match of model.matches) { const chain = model.chains[match.chainIndex]; const matchType = this.accidentType(match); if ( !chain || chain.length <= 0 || (routeId !== null && chain.routeId !== routeId) || (accidentType !== null && matchType !== accidentType) ) { continue; } const lastBin = Math.max( 0, Math.ceil(chain.length / binMeters) - 1 ); const binIndex = Math.min( lastBin, Math.max( 0, Math.floor(match.distance / binMeters) ) ); const key = `${match.chainIndex}:${binIndex}`; if (!bins.has(key)) { bins.set(key, { chainIndex: match.chainIndex, binIndex, start: binIndex * binMeters, end: Math.min( (binIndex + 1) * binMeters, chain.length ), count: 0 }); } bins.get(key).count++; } return [...bins.values()].sort( (a, b) => a.chainIndex - b.chainIndex || a.binIndex - b.binIndex ); }, locate(chain, metres) { const coordinates = chain.coordinates; const distances = chain.distances; if (metres <= 0) { return [...coordinates[0]]; } if (metres >= chain.length) { return [ ...coordinates[coordinates.length - 1] ]; } let low = 0; let high = distances.length - 1; while (low + 1 < high) { const middle = (low + high) >>> 1; if (distances[middle] <= metres) { low = middle; } else { high = middle; } } const t = (metres - distances[low]) / (distances[high] - distances[low]); return [ coordinates[low][0] + t * ( coordinates[high][0] - coordinates[low][0] ), coordinates[low][1] + t * ( coordinates[high][1] - coordinates[low][1] ) ]; } }; display(engine);4d:T4a76,const createRoadChart = function createObservableRoadChart({ Plot, d3, Inputs, engine }) { const resolutions = [ 10, 100, 1000, 10000 ]; const format = new Intl.NumberFormat("en-US"); const distanceLabel = m => m >= 1000 ? `${m / 1000} km` : `${m} m`; const automaticResolution = metersPerPixel => resolutions.find( m => m / metersPerPixel >= 8 ) ?? 10000; function mount( model, { width = 1000, height = 650, invalidation } = {} ) { if (!model?.chains?.length) { throw new Error( "No usable road chains in this dataset." ); } width = Math.max( 320, Math.round(width) ); height = Math.max( 380, Math.round(height) ); const routeChoices = new Map([ ["All state-maintained roads", null], ...[ ...new Map( model.chains.map(chain => [ chain.routeId, chain.label ]) ).entries() ] .sort((a, b) => a[1].localeCompare( b[1], undefined, {numeric: true} ) ) .map(([id, label]) => [ `${label} · ${id}`, id ]) ]); const routeInput = Inputs.select( routeChoices, { label: "Road", value: null } ); /* * Get the unique accident types retained * in model.matches. */ const accidentTypes = [ ...new Set( model.matches.map(match => engine.accidentType(match) ) ) ].sort((a, b) => String(a).localeCompare( String(b), undefined, {numeric: true} ) ); const accidentTypeChoices = new Map([ ["All accident types", null], ...accidentTypes.map(type => [ String(type), type ]) ]); const accidentTypeInput = Inputs.select( accidentTypeChoices, { label: "Accident type", value: null } ); const binInput = Inputs.select( new Map([ ["Automatic with zoom", "auto"], ["10 km", 10000], ["1 km", 1000], ["100 m", 100], ["10 m", 10] ]), { label: "Segment length", value: "auto" } ); const scaleInput = Inputs.radio( new Map([ ["Linear", "linear"], ["Square root", "sqrt"] ]), { label: "Bar height", value: "linear" } ); const sideInput = Inputs.radio( new Map([ ["Left", "left"], ["Right", "right"] ]), { label: "Bar side", value: "left" } ); const root = document.createElement("div"); const controls = document.createElement("div"); controls.append( routeInput, accidentTypeInput, binInput, scaleInput, sideInput ); const stage = document.createElement("div"); stage.style.cssText = ` position: relative; overflow: hidden; touch-action: none; width: 100%; height: ${height}px; background: #f7f7f0; `; stage.setAttribute( "aria-label", "Road map; drag to pan, scroll to zoom, hover bars for accident counts" ); const drawing = document.createElement("div"); const note = document.createElement("div"); note.style.cssText = ` position: absolute; left: 12px; top: 10px; padding: 4px 7px; background: #f7f7f0dc; color: #425c52; font: 12px system-ui; pointer-events: none; `; const tooltip = document.createElement("div"); tooltip.hidden = true; tooltip.style.cssText = ` position: absolute; z-index: 2; pointer-events: none; max-width: 260px; padding: 9px 11px; background: #173d34f2; color: white; border-radius: 5px; font: 12px/1.45 system-ui; white-space: pre-line; `; stage.append( drawing, note, tooltip ); root.append( controls, stage ); const geoRoads = { type: "MultiLineString", coordinates: model.chains.map( chain => chain.coordinates ) }; const projection = d3 .geoConicConformal() .parallels([45, 49]) .rotate([110, 0]) .center([0, 47]) .fitExtent( [ [25, 30], [width - 25, height - 25] ], geoRoads ); const projectedChains = model.chains.map(chain => { const points = chain.coordinates.map(projection); return { type: "Feature", geometry: { type: "LineString", coordinates: points }, bounds: [ d3.min( points, point => point[0] ), d3.min( points, point => point[1] ), d3.max( points, point => point[0] ), d3.max( points, point => point[1] ) ] }; }); /* * Cache bins separately for every * resolution and accident-type selection. */ const cache = new Map(); let transform = d3.zoomIdentity; let frame = 0; let disposed = false; let hitIndex = null; const pointAt = (chain, metres) => projection( engine.locate(chain, metres) ); const getBins = ( metres, accidentType ) => { const cacheKey = JSON.stringify([ metres, accidentType ]); if (cache.has(cacheKey)) { return cache.get(cacheKey); } const bins = engine .aggregate( model, metres, {accidentType} ) .map(row => { const chain = model.chains[row.chainIndex]; const middle = (row.start + row.end) / 2; const center = pointAt(chain, middle); const delta = Math.min( 15, (row.end - row.start) / 2 ); const a = pointAt( chain, Math.max( 0, middle - delta ) ); const b = pointAt( chain, Math.min( chain.length, middle + delta ) ); const magnitude = Math.hypot( b[0] - a[0], b[1] - a[1] ) || 1; return { ...row, center, ux: (b[0] - a[0]) / magnitude, uy: (b[1] - a[1]) / magnitude, baseWidth: ( (row.end - row.start) * magnitude ) / Math.max( 1e-9, 2 * delta ) }; }); cache.set(cacheKey, bins); return bins; }; const intersects = bounds => bounds[2] * transform.k + transform.x >= -100 && bounds[0] * transform.k + transform.x <= width + 100 && bounds[3] * transform.k + transform.y >= -100 && bounds[1] * transform.k + transform.y <= height + 100; const binText = row => { const chain = model.chains[row.chainIndex]; const selectedType = accidentTypeInput.value ?? "All accident types"; return ( `${format.format(row.count)} accident` + `${row.count === 1 ? "" : "s"}\n` + `${selectedType}\n` + `${chain.label} · ${chain.routeId}\n` + `${(row.start / 1000).toFixed(3)}–` + `${(row.end / 1000).toFixed(3)} km along chain` ); }; function render() { frame = 0; if (disposed) return; const middle = transform.invert([ width / 2, height / 2 ]); const metresPerPixel = engine.distanceMeters( projection.invert(middle), projection.invert([ middle[0] + 1 / transform.k, middle[1] ]) ); const binMetres = binInput.value === "auto" ? automaticResolution( metresPerPixel ) : +binInput.value; const routeId = routeInput.value; const accidentType = accidentTypeInput.value; const bins = getBins( binMetres, accidentType ).filter(row => routeId == null || model.chains[ row.chainIndex ].routeId === routeId ); const maximum = d3.max( bins, row => row.count ) || 1; const heightScale = ( scaleInput.value === "sqrt" ? d3.scaleSqrt() : d3.scaleLinear() ) .domain([0, maximum]) .range([ 0, Math.min( 86, height * 0.14 ) ]); const color = d3 .scaleSequentialSqrt( d3.interpolateOrRd ) .domain([0, maximum]); const activeRows = []; const shapes = []; for (const row of bins) { const [x, y] = transform.apply(row.center); if ( x < -120 || y < -120 || x > width + 120 || y > height + 120 ) { continue; } const direction = sideInput.value === "left" ? 1 : -1; const nx = row.uy * direction; const ny = -row.ux * direction; const barHeight = heightScale(row.count); const barWidth = Math.max( 1.3, Math.min( 32, row.baseWidth * transform.k * 0.84 ) ); const ax = x - row.ux * barWidth / 2; const ay = y - row.uy * barWidth / 2; const bx = x + row.ux * barWidth / 2; const by = y + row.uy * barWidth / 2; const ring = [ [ax, ay], [bx, by], [ bx + nx * barHeight, by + ny * barHeight ], [ ax + nx * barHeight, ay + ny * barHeight ], [ax, ay] ]; shapes.push({ type: "Feature", properties: row, geometry: { type: "Polygon", coordinates: [ring] } }); activeRows.push({ ...row, x, y, nx, ny, h: barHeight, w: barWidth, hitX: x + nx * barHeight / 2, hitY: y + ny * barHeight / 2 }); } const roadProjection = d3 .geoIdentity() .scale(transform.k) .translate([ transform.x, transform.y ]) .clipExtent([ [0, 0], [width, height] ]); const visibleRoads = projectedChains.filter(chain => intersects(chain.bounds) ); const selectedRoads = routeId == null ? [] : projectedChains.filter( (chain, index) => model.chains[index] .routeId === routeId && intersects(chain.bounds) ); const roads = Plot.plot({ width, height, margin: 0, projection: () => roadProjection, style: { background: "transparent" }, marks: [ Plot.geo(visibleRoads, { stroke: routeId == null ? "#849e8a" : "#b9c8b9", strokeWidth: 0.75 }), Plot.geo(selectedRoads, { stroke: "#295943", strokeWidth: 1.8 }) ] }); const bars = Plot.plot({ width, height, margin: 0, projection: () => d3 .geoIdentity() .clipExtent([ [0, 0], [width, height] ]), style: { background: "transparent" }, marks: [ Plot.geo(shapes, { fill: shape => color( shape.properties.count ), fillOpacity: 0.85, stroke: "#a74126", strokeWidth: 0.3, title: shape => binText( shape.properties ) }) ] }); const surface = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ); surface.setAttribute( "width", width ); surface.setAttribute( "height", height ); surface.setAttribute( "viewBox", `0 0 ${width} ${height}` ); surface.append( roads, bars ); drawing.replaceChildren( surface ); hitIndex = d3.quadtree( activeRows, row => row.hitX, row => row.hitY ); note.textContent = `${accidentType ?? "All accident types"} · ` + `${distanceLabel(binMetres)} segments · ` + `${format.format(shapes.length)} bars in view`; tooltip.hidden = true; } const schedule = () => { if (!frame && !disposed) { frame = requestAnimationFrame(render); } }; const zoom = d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([ 1, 32768 ]) .translateExtent([ [ -width * 0.2, -height * 0.2 ], [ width * 1.2, height * 1.2 ] ]) .on("zoom", event => { transform = event.transform; schedule(); }); const selection = d3 .select(stage) .call(zoom); for (const input of [ routeInput, accidentTypeInput, binInput, scaleInput, sideInput ]) { input.addEventListener( "input", schedule ); } stage.addEventListener( "pointermove", event => { if ( event.buttons || !hitIndex ) { tooltip.hidden = true; return; } const [x, y] = d3.pointer(event, stage); let chosen = null; let best = Infinity; hitIndex.visit( ( node, x0, y0, x1, y1 ) => { if ( x0 > x + 60 || x1 < x - 60 || y0 > y + 60 || y1 < y - 60 ) { return true; } if (!node.length) { do { const row = node.data; const dx = x - row.x; const dy = y - row.y; const across = Math.abs( dx * row.ux + dy * row.uy ); const above = dx * row.nx + dy * row.ny; if ( across <= row.w / 2 + 3 && above >= -3 && above <= row.h + 3 ) { const score = Math.hypot( x - row.hitX, y - row.hitY ); if (score < best) { chosen = row; best = score; } } } while ( (node = node.next) ); } return false; } ); if (!chosen) { tooltip.hidden = true; return; } tooltip.textContent = binText(chosen); tooltip.hidden = false; tooltip.style.left = `${ Math.max( 8, Math.min( width - 268, x + 15 ) ) }px`; tooltip.style.top = `${ Math.max( 8, Math.min( height - 100, y + 15 ) ) }px`; } ); stage.addEventListener( "pointerleave", () => { tooltip.hidden = true; } ); root.destroy = () => { disposed = true; if (frame) { cancelAnimationFrame(frame); } selection.on(".zoom", null); }; if (invalidation) { invalidation.then( root.destroy ); } render(); return root; } return { mount, automaticResolution }; }; display({ createRoadChart: typeof createRoadChart });4e:T4d1,const accidentRates = counties.flatMap(d => [ ["Fatal", d.accidents_fatal], ["Serious injury", d.accidents_serious], ["Minor injury", d.accidents_minor], ["No injury", d.accidents_noinjury] ].map(([type, count]) => ({ county: d.NAME, type, count, totalDVMT: d.TOT_DVMT, rate: (count / d.TOT_DVMT) * 1_000_000 }))); display( Plot.plot({ width: 900, height: counties.length * 22, marginLeft: 110, x: { label: "Accidents per 1 million DVMT →", grid: true }, y: { label: null }, color: { legend: true, domain: [ "Fatal", "Serious injury", "Minor injury", "No injury" ], range: [ "#7f0000", "#d7301f", "#fc8d59", "#fdd49e" ] }, marks: [ Plot.barX(accidentRates, { x: "rate", y: "county", fill: "type", sort: {y: "-x"}, tip: { format: { county: true, type: true, count: true, totalDVMT: ",.0f", rate: ".2f", x: false, y: false, fill: false } } }), Plot.ruleX([0]) ] }) );4f:T189d,{ const proj4Module = await import( "https://cdn.jsdelivr.net/npm/proj4@2.15.0/+esm" ); const proj4 = proj4Module.default ?? proj4Module; proj4.defs( "EPSG:6514", "+proj=lcc +lat_0=44.25 +lon_0=-109.5 " + "+lat_1=49 +lat_2=45 +x_0=600000 +y_0=0 " + "+ellps=GRS80 +units=m +no_defs" ); const countiesData = await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json(); const roadsData = await FileAttachment( "MT_highway_roads_simplified.geojson" ).json(); const crashesData = await FileAttachment( "MT_accidents_points_filtered.geojson" ).json(); function projectCoordinates(coords) { if (typeof coords[0] === "number") { return proj4("EPSG:4326", "EPSG:6514", coords); } return coords.map(projectCoordinates); } function projectFeatures(data) { return { type: "FeatureCollection", features: data.features.map(feature => ({ ...feature, geometry: { ...feature.geometry, coordinates: projectCoordinates( feature.geometry.coordinates ) } })) }; } const projectedCounties = projectFeatures(countiesData); const projectedRoads = projectFeatures(roadsData); const projectedCrashes = crashesData.features.map(feature => ({ ...feature, projectedCoordinates: projectCoordinates( feature.geometry.coordinates ) })); const layerColors = { "All crashes": "#2878b5", "Fatal crash": "#b2182b", "Suspected Serious Injury": "#e6550d", "Suspected Minor Injury": "#fdae6b", "Possible injury crash": "#31a354", "No apparent Injury (property damage only crash)": "#756bb1", "Unknown": "#969696" }; const categories = Object.keys(layerColors); const layerButtons = new Map(); const width = 850; const height = 600; const projection = d3.geoIdentity() .reflectY(true) .fitExtent( [[20, 55], [width - 20, height - 20]], projectedCounties ); const path = d3.geoPath(projection); const container = document.createElement("div"); const controls = document.createElement("div"); controls.style.marginBottom = "8px"; controls.style.lineHeight = "2.2"; const legendLabel = document.createElement("span"); legendLabel.textContent = "Crash severity: "; legendLabel.style.fontWeight = "bold"; legendLabel.style.marginRight = "6px"; controls.appendChild(legendLabel); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "100%") .style("height", "auto"); svg.append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 22) .attr("font-weight", "bold") .text("Montana Crash Locations, 2016–2025"); const mapLayer = svg.append("g"); const countyLayer = mapLayer .append("g") .selectAll("path") .data(projectedCounties.features) .join("path") .attr("d", path) .attr("fill", "#f3f3f3") .attr("stroke", "none"); const roadLayer = mapLayer .append("g") .attr("pointer-events", "none"); const roadPaths = roadLayer .selectAll("path") .data(projectedRoads.features) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.7) .attr("stroke-width", 1.2); roadPaths .append("title") .text(d => `${d.properties.SIGN_ROUTE || d.properties.ROUTE_ID} AADT: ${d.properties.AADT ?? "Not available"}` ); const pointsLayer = mapLayer.append("g"); let activeCategory = "Fatal crash"; function drawLayer(category) { activeCategory = category; let points = projectedCrashes; if (category !== "All crashes") { points = projectedCrashes.filter( d => d.properties.CRASH_SEVERITY === category ); } const baseRadius = category === "All crashes" ? 1.2 : 3.5; pointsLayer .selectAll("circle") .remove(); pointsLayer .selectAll("circle") .data(points) .join("circle") .attr("cx", d => projection(d.projectedCoordinates)[0]) .attr("cy", d => projection(d.projectedCoordinates)[1]) .attr("r", baseRadius) .attr("fill", layerColors[category]) .attr( "fill-opacity", category === "All crashes" ? 0.2 : 0.8 ) .attr( "stroke", category === "All crashes" ? "none" : "white" ) .attr("stroke-width", 0.25) .append("title") .text(d => `${d.properties.CRASH_DATE} ${d.properties.COUNTY} County ${d.properties.CRASH_SEVERITY}` ); for (const [name, button] of layerButtons) { const selected = name === category; button.style.fontWeight = selected ? "bold" : "normal"; button.style.border = selected ? "2px solid #333" : "1px solid #aaa"; button.setAttribute("aria-pressed", selected); } } for (const category of categories) { const button = document.createElement("button"); const swatch = document.createElement("span"); swatch.style.display = "inline-block"; swatch.style.width = "10px"; swatch.style.height = "10px"; swatch.style.marginRight = "5px"; swatch.style.backgroundColor = layerColors[category]; button.appendChild(swatch); button.appendChild( document.createTextNode(category) ); button.style.marginRight = "4px"; button.style.marginBottom = "4px"; button.onclick = () => drawLayer(category); layerButtons.set(category, button); controls.appendChild(button); } const zoom = d3.zoom() .scaleExtent([1, 50]) .on("zoom", event => { const k = event.transform.k; mapLayer.attr("transform", event.transform); roadPaths.attr("stroke-width", 1.2 / k); const baseRadius = activeCategory === "All crashes" ? 1.2 : 3.5; pointsLayer .selectAll("circle") .attr("r", baseRadius / k) .attr( "stroke-width", activeCategory === "All crashes" ? 0 : 0.25 / k ); }); svg.call(zoom); drawLayer("Fatal crash"); container.appendChild(controls); container.appendChild(svg.node()); display(container); }50:T1976,{ // Upload MTcountiesStats_EPSG6514.geojson, then paste this into one Observable cell. const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"); const counties = await FileAttachment("MTcountiesStats_EPSG6514.geojson").json(); const measures = [ {key: "accidents_total", label: "All crashes", axis: "All crashes"}, {key: "accidents_noinjury", label: "No-injury crashes", axis: "No injury"}, {key: "accidents_minor", label: "Minor-injury crashes", axis: "Minor injury"}, {key: "accidents_serious", label: "Serious-injury crashes", axis: "Serious injury"}, {key: "accidents_fatal", label: "Fatal crashes", axis: "Fatal"} ]; const schemes = [ {name: "RdBu", colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ]}, {name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ]}, {name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ]}, {name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ]} ]; const n = 3; const labels = ["low", "", "high"]; const number = d3.format(",.0f"); const value = (feature, key) => { const raw = feature.properties[key]; return raw == null || raw === "" ? NaN : +raw; }; const name = feature => feature.properties.NAME .toLowerCase().replace(/\b\w/g, letter => letter.toUpperCase()); const root = document.createElement("div"); root.style.cssText = "width:975px;max-width:100%;font:13px sans-serif;"; const id = `mt-bivariate-${Math.random().toString(36).slice(2)}`; function selector(labelText, options, selected) { const row = document.createElement("div"); row.style.cssText = "display:flex;align-items:center;margin:0 0 6px 18px;"; const label = document.createElement("label"); label.textContent = labelText; label.htmlFor = `${id}-${labelText.replace(/\s+/g, "-")}`; label.style.cssText = "width:126px;flex:none;"; const select = document.createElement("select"); select.id = label.htmlFor; select.style.cssText = "width:234px;max-width:calc(100% - 126px);font:inherit;"; for (const option of options) select.add(new Option(option.label, option.value)); select.value = selected; row.append(label, select); root.append(row); return select; } const accidentSelect = selector("Accident count", measures.map(d => ({ label: d.label, value: d.key })), "accidents_total"); const schemeSelect = selector("Color scheme", schemes.map(d => ({ label: d.name, value: d.name })), "BuPu"); // The GeoJSON is already projected in EPSG:6514, so use planar coordinates. const projection = d3.geoIdentity().reflectY(true) .fitExtent([[15, 50], [830, 545]], counties); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "display:block;max-width:100%;height:auto;"); const k = 24; const legend = svg.append("g") .attr("transform", "translate(895,455)") .attr("font-family", "sans-serif") .attr("font-size", 10); const legendGrid = legend.append("g") .attr("transform", `rotate(-45) translate(${-k * n / 2},${-k * n / 2})`); const markerId = `${id}-arrow`; legendGrid.append("defs").append("marker") .attr("id", markerId) .attr("markerHeight", 10).attr("markerWidth", 10) .attr("refX", 6).attr("refY", 3).attr("orient", "auto") .append("path").attr("d", "M0,0L9,3L0,6Z"); const swatches = legendGrid.selectAll("rect") .data(d3.cross(d3.range(n), d3.range(n))) .join("rect") .attr("width", k).attr("height", k) .attr("x", ([i]) => i * k) .attr("y", ([, j]) => (n - 1 - j) * k); swatches.append("title"); legendGrid.append("line") .attr("x1", 0).attr("x2", n * k) .attr("y1", n * k).attr("y2", n * k) .attr("stroke", "black").attr("stroke-width", 1.5) .attr("marker-end", `url(#${markerId})`); legendGrid.append("line") .attr("x1", 0).attr("x2", 0) .attr("y1", n * k).attr("y2", 0) .attr("stroke", "black").attr("stroke-width", 1.5) .attr("marker-end", `url(#${markerId})`); legendGrid.append("text") .attr("font-weight", "bold").attr("dy", "0.71em") .attr("transform", `rotate(90) translate(${n * k / 2},6)`) .attr("text-anchor", "middle") .text("DVMT"); const accidentAxis = legendGrid.append("text") .attr("font-weight", "bold").attr("dy", "0.71em") .attr("transform", `translate(${n * k / 2},${n * k + 6})`) .attr("text-anchor", "middle"); const x = d3.scaleQuantile( counties.features.map(d => value(d, "TOT_DVMT")).filter(Number.isFinite), d3.range(n) ); const paths = svg.append("g") .attr("stroke", "white") .attr("stroke-width", 0.6) .attr("stroke-linejoin", "round") .selectAll("path") .data(counties.features) .join("path") .attr("d", path); paths.append("title"); root.append(svg.node()); function update() { const measure = measures.find(d => d.key === accidentSelect.value); const colors = schemes.find(d => d.name === schemeSelect.value).colors; const y = d3.scaleQuantile( counties.features.map(d => value(d, measure.key)).filter(Number.isFinite), d3.range(n) ); paths.attr("fill", d => { const a = value(d, "TOT_DVMT"), b = value(d, measure.key); return Number.isFinite(a) && Number.isFinite(b) ? colors[y(b) + x(a) * n] : "#ccc"; }); paths.select("title").text(d => { const a = value(d, "TOT_DVMT"), b = value(d, measure.key); if (!Number.isFinite(a) || !Number.isFinite(b)) return `${name(d)} County\nN/A`; return `${name(d)} County\n${number(a)} daily VMT${labels[x(a)] ? ` (${labels[x(a)]})` : ""}\n${number(b)} ${measure.label}${labels[y(b)] ? ` (${labels[y(b)]})` : ""}`; }); swatches.attr("fill", ([i, j]) => colors[j * n + i]); swatches.select("title").text(([i, j]) => `Daily VMT${labels[j] ? ` (${labels[j]})` : ""}\n${measure.label}${labels[i] ? ` (${labels[i]})` : ""}`); accidentAxis.text(measure.axis); } accidentSelect.addEventListener("change", update); schemeSelect.addEventListener("change", update); update(); display(root); } 51:T982,{ const countiesData = await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json(); const crashesData = await FileAttachment( "MT_accidents_points_filtered.geojson" ).json(); const fatalCrashes = crashesData.features.filter( d => String(d.properties.CRASH_SEVERITY) .toLowerCase() .includes("fatal") ); const width = 850; const height = 600; const west = -116.1; const east = -104.0; const south = 44.3; const north = 49.1; const margin = { top: 55, right: 25, bottom: 25, left: 25 }; const mapWidth = width - margin.left - margin.right; const mapHeight = height - margin.top - margin.bottom; const x = longitude => margin.left + ((longitude - west) / (east - west)) * mapWidth; const y = latitude => margin.top + ((north - latitude) / (north - south)) * mapHeight; function polygonPath(feature) { const polygons = feature.geometry.type === "Polygon" ? [feature.geometry.coordinates] : feature.geometry.coordinates; return polygons .map(polygon => polygon .map(ring => ring .map(([longitude, latitude], i) => `${i === 0 ? "M" : "L"}${x(longitude)},${y(latitude)}` ) .join("") + "Z" ) .join("") ) .join(""); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "100%") .style("height", "auto"); svg.append("text") .attr("x", margin.left) .attr("y", 30) .attr("font-size", 22) .attr("font-weight", "bold") .text("Fatal Crashes in Montana, 2016–2025"); svg.append("g") .selectAll("path") .data(countiesData.features) .join("path") .attr("d", polygonPath) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", 0.7); svg.append("g") .selectAll("circle") .data(fatalCrashes) .join("circle") .attr("cx", d => x(d.geometry.coordinates[0])) .attr("cy", d => y(d.geometry.coordinates[1])) .attr("r", 2.5) .attr("fill", "#c62828") .attr("fill-opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 0.4) .append("title") .text(d => `${d.properties.CRASH_DATE} ${d.properties.COUNTY} County Fatal crash` ); display(svg.node()); }52:Ta76,{ const proj4Module = await import( "https://cdn.jsdelivr.net/npm/proj4@2.15.0/+esm" ); const proj4 = proj4Module.default ?? proj4Module; proj4.defs( "EPSG:6514", "+proj=lcc +lat_0=44.25 +lon_0=-109.5 " + "+lat_1=49 +lat_2=45 +x_0=600000 +y_0=0 " + "+ellps=GRS80 +units=m +no_defs" ); const countiesData = await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json(); const crashesData = await FileAttachment( "MT_accidents_points_filtered.geojson" ).json(); const fatalCrashes = crashesData.features.filter( d => String(d.properties.CRASH_SEVERITY) .toLowerCase() .includes("fatal") ); function projectCoordinates(coords) { if (typeof coords[0] === "number") { return proj4( "EPSG:4326", "EPSG:6514", coords ); } return coords.map(projectCoordinates); } const projectedCounties = { type: "FeatureCollection", features: countiesData.features.map(feature => ({ ...feature, geometry: { ...feature.geometry, coordinates: projectCoordinates( feature.geometry.coordinates ) } })) }; const projectedFatalCrashes = fatalCrashes.map(feature => ({ ...feature, projectedCoordinates: projectCoordinates( feature.geometry.coordinates ) })); const width = 850; const height = 600; const projection = d3.geoIdentity() .reflectY(true) .fitExtent( [[20, 55], [width - 20, height - 20]], projectedCounties ); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "100%") .style("height", "auto"); svg.append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 22) .attr("font-weight", "bold") .text("Fatal Crashes in Montana, 2016–2025, EPSG:6514"); svg.append("g") .selectAll("path") .data(projectedCounties.features) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#888") .attr("stroke-width", 0.7); svg.append("g") .selectAll("circle") .data(projectedFatalCrashes) .join("circle") .attr("cx", d => projection(d.projectedCoordinates)[0]) .attr("cy", d => projection(d.projectedCoordinates)[1]) .attr("r", 2.4) .attr("fill", "#c62828") .attr("fill-opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 0.4) .append("title") .text(d => `${d.properties.CRASH_DATE} ${d.properties.COUNTY} County Fatal crash` ); display(svg.node()); }53:T10fc,{ const proj4Module = await import( "https://cdn.jsdelivr.net/npm/proj4@2.15.0/+esm" ); const proj4 = proj4Module.default ?? proj4Module; proj4.defs( "EPSG:6514", "+proj=lcc +lat_0=44.25 +lon_0=-109.5 " + "+lat_1=49 +lat_2=45 +x_0=600000 +y_0=0 " + "+ellps=GRS80 +units=m +no_defs" ); const countiesData = await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json(); const crashesData = await FileAttachment( "MT_accidents_points_filtered.geojson" ).json(); function projectCoordinates(coords) { if (typeof coords[0] === "number") { return proj4("EPSG:4326", "EPSG:6514", coords); } return coords.map(projectCoordinates); } const projectedCounties = { type: "FeatureCollection", features: countiesData.features.map(feature => ({ ...feature, geometry: { ...feature.geometry, coordinates: projectCoordinates( feature.geometry.coordinates ) } })) }; const projectedCrashes = crashesData.features.map(feature => ({ ...feature, projectedCoordinates: projectCoordinates( feature.geometry.coordinates ) })); const width = 850; const height = 600; const projection = d3.geoIdentity() .reflectY(true) .fitExtent( [[20, 55], [width - 20, height - 20]], projectedCounties ); const path = d3.geoPath(projection); const container = document.createElement("div"); const controls = document.createElement("div"); controls.style.marginBottom = "8px"; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "100%") .style("height", "auto"); svg.append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 22) .attr("font-weight", "bold") .text("Montana Crash Locations, 2016–2025"); const mapLayer = svg.append("g"); mapLayer .append("g") .selectAll("path") .data(projectedCounties.features) .join("path") .attr("d", path) .attr("fill", "#f3f3f3") .attr("stroke", "#888") .attr("stroke-width", 0.7); const pointsLayer = mapLayer.append("g"); let activeCategory = "Fatal crash"; function drawLayer(category) { activeCategory = category; let points = projectedCrashes; if (category !== "All crashes") { points = projectedCrashes.filter( d => d.properties.CRASH_SEVERITY === category ); } const baseRadius = category === "All crashes" ? 1 : 2.5; pointsLayer .selectAll("circle") .remove(); pointsLayer .selectAll("circle") .data(points) .join("circle") .attr("cx", d => projection(d.projectedCoordinates)[0]) .attr("cy", d => projection(d.projectedCoordinates)[1]) .attr("r", baseRadius) .attr( "fill", category === "Fatal crash" ? "#b2182b" : "#2878b5" ) .attr( "fill-opacity", category === "All crashes" ? 0.18 : 0.65 ) .attr( "stroke", category === "All crashes" ? "none" : "white" ) .attr("stroke-width", 0.4) .append("title") .text(d => `${d.properties.CRASH_DATE} ${d.properties.COUNTY} County ${d.properties.CRASH_SEVERITY}` ); } const categories = [ "All crashes", "Fatal crash", "Suspected Serious Injury", "Suspected Minor Injury", "Possible injury crash", "No apparent Injury (property damage only crash)", "Unknown" ]; for (const category of categories) { const button = document.createElement("button"); button.textContent = category; button.style.marginRight = "4px"; button.style.marginBottom = "4px"; button.onclick = () => drawLayer(category); controls.appendChild(button); } const zoom = d3.zoom() .scaleExtent([1, 12]) .on("zoom", event => { mapLayer.attr("transform", event.transform); const baseRadius = activeCategory === "All crashes" ? 1 : 2.5; pointsLayer .selectAll("circle") .attr("r", baseRadius / event.transform.k); }); svg.call(zoom); drawLayer("Fatal crash"); container.appendChild(controls); container.appendChild(svg.node()); display(container); }54:T9f0,{ const data = await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json(); const width = 850; const height = 420; const padding = 20; // Montana's longitude/latitude extent from this GeoJSON. const west = -116.05; const east = -104.03; const south = 44.35; const north = 49.01; const scale = Math.min( (width - 2 * padding) / (east - west), (height - 2 * padding) / (north - south) ); const mapWidth = (east - west) * scale; const mapHeight = (north - south) * scale; const offsetX = (width - mapWidth) / 2; const offsetY = (height - mapHeight) / 2; const x = (longitude) => offsetX + (longitude - west) * scale; const y = (latitude) => offsetY + (north - latitude) * scale; const values = data.features.map((d) => Number(d.properties.TOT_DVMT)); const minValue = Math.min(...values); const maxValue = Math.max(...values); const blues = [ "#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#3182bd", "#08519c" ]; const fillColor = (value) => { const t = (value - minValue) / (maxValue - minValue); return blues[Math.min(6, Math.floor(t * 7))]; }; const rings = (feature) => feature.geometry.type === "Polygon" ? feature.geometry.coordinates : feature.geometry.coordinates.flat(); const polygonPath = (feature) => rings(feature) .map((ring) => ring .map(([longitude, latitude], i) => `${i === 0 ? "M" : "L"}${x(longitude)},${y(latitude)}` ) .join("") + "Z" ) .join(""); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.style.maxWidth = "100%"; svg.style.height = "auto"; for (const feature of data.features) { const county = document.createElementNS("http://www.w3.org/2000/svg", "path"); county.setAttribute("d", polygonPath(feature)); county.setAttribute("fill", fillColor(Number(feature.properties.TOT_DVMT))); county.setAttribute("stroke", "white"); county.setAttribute("stroke-width", "0.7"); county.setAttribute("fill-rule", "evenodd"); const title = document.createElementNS("http://www.w3.org/2000/svg", "title"); title.textContent = `${feature.properties.NAME}\n` + `Total DVMT: ${Number(feature.properties.TOT_DVMT).toLocaleString()}`; county.appendChild(title); svg.appendChild(county); } display(svg); }55:T50b,{ const counties = structuredClone( await FileAttachment( "MT_county_vehiclemilestravelled.geojson" ).json() ); // Correct the polygon ring direction for D3/Observable Plot. counties.features.forEach(feature => { feature.geometry.coordinates[0].reverse(); }); const values = counties.features.map( d => +d.properties.TOT_DVMT ); const plot = Plot.plot({ width: 850, height: 600, title: "Total Daily Vehicle Miles Traveled by Montana County", subtitle: "Counties are shaded by total daily vehicle miles traveled.", projection: { type: "equirectangular", domain: counties, inset: 10 }, color: { type: "linear", domain: [ Math.min(...values), Math.max(...values) ], scheme: "Blues" }, marks: [ Plot.geo(counties, { fill: d => d.properties.TOT_DVMT, stroke: "white", strokeWidth: 0.7, tip: true, title: d => `${d.properties.NAME}\n` + `Total daily VMT: ${d3.format(",.0f")( d.properties.TOT_DVMT )}` }) ] }); display(plot); display( plot.legend("color", { label: "Total daily vehicle miles traveled", width: 450 }) ); }56:T15ce,{ // Paste this entire file into ONE Observable JavaScript cell. // Upload MTcountiesStats_EPSG6514.geojson as a file attachment first. const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"); const source = await FileAttachment("MTcountiesStats_EPSG6514.geojson").json(); const xField = "TOT_DVMT"; const xName = "Total daily VMT"; const comparisons = [ {field: "accidents_noinjury", label: "No-injury crashes", scheme: d3.schemeBuPu[9]}, {field: "accidents_minor", label: "Minor-injury crashes", scheme: d3.schemeGnBu[9]}, {field: "accidents_serious", label: "Serious-injury crashes", scheme: d3.schemePuOr[9]}, {field: "accidents_fatal", label: "Fatal crashes", scheme: d3.schemeRdBu[9]} ]; const labels = ["Low", "Middle", "High"]; const number = d3.format(",.0f"); const countyName = feature => feature.properties.NAME .toLowerCase().replace(/\b\w/g, letter => letter.toUpperCase()); const value = (feature, field) => +feature.properties[field]; const features = source.features.filter(feature => Number.isFinite(value(feature, xField))); const xScale = d3.scaleQuantile() .domain(features.map(feature => value(feature, xField))) .range(d3.range(3)); const root = document.createElement("section"); root.style.cssText = "max-width:1120px;font:14px/1.4 system-ui,sans-serif;color:#222;"; root.innerHTML = `

Montana crash severity by daily VMT

Every panel compares total daily VMT with one crash-severity count. Both measures are independently classified into county quantile thirds.

`; const grid = document.createElement("div"); grid.style.cssText = "display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;"; root.append(grid); for (const comparison of comparisons) { const valid = features.filter(feature => Number.isFinite(value(feature, comparison.field))); const yScale = d3.scaleQuantile() .domain(valid.map(feature => value(feature, comparison.field))) .range(d3.range(3)); const panel = document.createElement("article"); panel.style.cssText = "min-width:0;border:1px solid #ddd;border-radius:5px;padding:10px;background:white;"; const title = document.createElement("h3"); title.style.cssText = "margin:0 0 7px;font-size:16px;"; title.textContent = `${xName} × ${comparison.label}`; panel.append(title); const map = Plot.plot({ width: 520, height: 335, projection: {type: "reflect-y", domain: source, inset: 5}, style: "display:block;width:100%;height:auto;", marks: [ Plot.geo(source, { fill: feature => { const x = value(feature, xField); const y = value(feature, comparison.field); return Number.isFinite(x) && Number.isFinite(y) ? comparison.scheme[xScale(x) * 3 + yScale(y)] : "#ccc"; }, stroke: "white", strokeWidth: 0.65, title: feature => { const x = value(feature, xField); const y = value(feature, comparison.field); if (!Number.isFinite(x) || !Number.isFinite(y)) return `${countyName(feature)} County\nNo data`; return `${countyName(feature)} County\n${xName}: ${number(x)} (${labels[xScale(x)].toLowerCase()})\n${comparison.label}: ${number(y)} (${labels[yScale(y)].toLowerCase()})`; }, tip: true }) ] }); panel.append(map); const legend = d3.create("svg") .attr("viewBox", "0 0 330 72").attr("width", 330).attr("height", 72) .style("display", "block").style("max-width", "100%").style("height", "auto") .attr("role", "img").attr("aria-label", `Bivariate legend for ${comparison.label}`); const cells = d3.cross(d3.range(3), d3.range(3)).map(([x, y]) => ({x, y})); const cell = legend.append("g").attr("transform", "translate(54,35)") .selectAll("g").data(cells).join("g") .attr("transform", d => `translate(${(d.y - d.x) * 12},${(d.x + d.y - 2) * 12}) rotate(45)`); cell.append("rect").attr("x", -8).attr("y", -8).attr("width", 16).attr("height", 16) .attr("fill", d => comparison.scheme[d.x * 3 + d.y]).attr("stroke", "white"); cell.append("title").text(d => `${xName}: ${labels[d.x]}\n${comparison.label}: ${labels[d.y]}`); legend.append("text").attr("x", 100).attr("y", 21).attr("font-size", 10).attr("font-weight", 600) .attr("transform", "rotate(-35 100 21)").text(`${comparison.label} →`); legend.append("text").attr("x", 6).attr("y", 62).attr("font-size", 10).attr("font-weight", 600) .attr("transform", "rotate(-35 6 62)").text(`← ${xName}`); const yBreaks = yScale.quantiles(); legend.append("text").attr("x", 143).attr("y", 27).attr("font-size", 10).attr("fill", "#555") .text(`VMT breaks: ${number(xScale.quantiles()[0])} / ${number(xScale.quantiles()[1])}`); legend.append("text").attr("x", 143).attr("y", 45).attr("font-size", 10).attr("fill", "#555") .text(`${comparison.label} breaks: ${number(yBreaks[0])} / ${number(yBreaks[1])}`); panel.append(legend.node()); grid.append(panel); } const note = document.createElement("p"); note.style.cssText = "margin:14px 0 0;color:#555;font-size:12px;"; note.textContent = "Hover a county in any panel for its values and low/middle/high classes. Palette assignment: BuPu (no injury), GnBu (minor injury), PuOr (serious injury), and RdBu (fatal crashes)."; root.append(note); display(root); } 57:T400,This map took the bulk of the time we had to complete this project, and I acknowledge that there are still some revisions needed to make it better. I prioritized being able to disaggregate the data between the different types of accidents. A couple band-aid solutions to the dreadful bar rendering included adding a square-root bar height to reduce the scale of the tall bars, and being able to make the bar stem off the right or left depending on which would look better on a given road you are zoomed into.
If I had more time I would improve the data bar aggregation at the most zoomed-out levels, because the initial view is admittedly horrendous to look at and it's only when zooming into specific highways and cities does a pretty & insightful pattern emerge. The key to a better visualization here will be dealing with what direction to stem the bars off on super curvy segments (right now some of the lower-value bars look offset but that's because they are wider than tall, which is misleading to the viewer).58:[{"id":"c5ea61fd5842076306c6d4513478591be3d4f3f853e87d69711a352526a7bf5b923c3cb2656d4c6f85ad864b7ae9245b1f0d37196a036d77a6cda3d35d224a18","href":"https://static.observableusercontent.com/files/c5ea61fd5842076306c6d4513478591be3d4f3f853e87d69711a352526a7bf5b923c3cb2656d4c6f85ad864b7ae9245b1f0d37196a036d77a6cda3d35d224a18","name":"header_img.jpg","type":"image/jpeg","lastModified":1789740678878,"size":176405},{"id":"0d8165f0b8bf56480f742120a892eeb06846f1ec68666947886e7545973ba8b429b445789bcc926dec8e3941deb40a2e1eac4c6eef7d90cbcd5499d14e549bc0","href":"https://static.observableusercontent.com/files/0d8165f0b8bf56480f742120a892eeb06846f1ec68666947886e7545973ba8b429b445789bcc926dec8e3941deb40a2e1eac4c6eef7d90cbcd5499d14e549bc0","name":"dataprep_far-off-points.png","type":"image/png","lastModified":1789889581811,"size":2074326},{"id":"07983cfc01b6d28decb81da662de3503a5ce8a8edb5d03881ee80fe432ebe79e1d23a2e957f0123e4f63bb939cef81ef353a0542ecdf907c82f27189c1c76f45","href":"https://static.observableusercontent.com/files/07983cfc01b6d28decb81da662de3503a5ce8a8edb5d03881ee80fe432ebe79e1d23a2e957f0123e4f63bb939cef81ef353a0542ecdf907c82f27189c1c76f45","name":"MT_county_vehiclemilestravelled.geojson","type":"application/octet-stream","lastModified":1789891397662,"size":8328191},{"id":"06f34e97721cb2c5567bdabe4b4d632d7a61464b60bd8d3f85fbc4f8f244dacc99bc69765546b57b4b06054a05a200b8240f2e4a4cb48388be12da782841c116","href":"https://static.observableusercontent.com/files/06f34e97721cb2c5567bdabe4b4d632d7a61464b60bd8d3f85fbc4f8f244dacc99bc69765546b57b4b06054a05a200b8240f2e4a4cb48388be12da782841c116","name":"MT_accidents_points_filtered.geojson","type":"application/octet-stream","lastModified":1789897834123,"size":47354111},{"id":"94b598058eff1052d973fa7e2803ff2c217b1b0d8cb41fe1e4ddee389d97e2b3216831e15eea56c815e1c9914681b4192535602d4a2422ad5afb5a53c7ad8df3","href":"https://static.observableusercontent.com/files/94b598058eff1052d973fa7e2803ff2c217b1b0d8cb41fe1e4ddee389d97e2b3216831e15eea56c815e1c9914681b4192535602d4a2422ad5afb5a53c7ad8df3","name":"MT_DoT_logo.png","type":"image/png","lastModified":1790058918266,"size":25008},{"id":"dd57a3cfccd012df4f210fca60d3471289642f38893e352181e66dcddb9611b490f24bae54fa8dd3e3b1f9c8832cbf783a361692e13d6e16a9f33ea677750199","href":"https://static.observableusercontent.com/files/dd57a3cfccd012df4f210fca60d3471289642f38893e352181e66dcddb9611b490f24bae54fa8dd3e3b1f9c8832cbf783a361692e13d6e16a9f33ea677750199","name":"montana-prepared.json","type":"application/json","lastModified":1790423898576,"size":20214876},{"id":"6eb0baa99f07acaef89f088a48a73f9ca02b2c29da9e6c51374b6a8731b979fc24b224ca0e7b1d4ea8c1b3b09e79d7e4ab53d09190003b6bfb440fd27e9c6234","href":"https://static.observableusercontent.com/files/6eb0baa99f07acaef89f088a48a73f9ca02b2c29da9e6c51374b6a8731b979fc24b224ca0e7b1d4ea8c1b3b09e79d7e4ab53d09190003b6bfb440fd27e9c6234","name":"MTcountiesStats_EPSG6514.geojson","type":"application/octet-stream","lastModified":1790427154640,"size":7240258},{"id":"fb3d93e917623c0372fafe8f41efaf70adcc4f2fb7ba79f31624ff42c98f59e42e8186e00e5629cdbb796723a98ea7cdd14bc2f0eaebb2b976973f708987854e","href":"https://static.observableusercontent.com/files/fb3d93e917623c0372fafe8f41efaf70adcc4f2fb7ba79f31624ff42c98f59e42e8186e00e5629cdbb796723a98ea7cdd14bc2f0eaebb2b976973f708987854e","name":"MT_highway_roads_simplified.geojson","type":"application/octet-stream","lastModified":1790554717095,"size":2240115}] 47:{"id":"fbf6cc5075c3d3f0","slug":"csci-444-project-2-trivariate-data","title":"Data Mapping of Traffic Fatalities in Montana","thumbnail":"848fdd693968254ca4ca715fa2a612f6e1d03a8886528af1858f7a419114754b","access_level":"public","create_time":"$D2026-09-04T15:48:00.707Z","update_time":"$D2026-10-28T12:49:30.598Z","view_time":null,"first_public_time":"$D2026-10-28T12:49:36.906Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":600,"publish_version":600,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ebe4fb56285b831","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Mapping of Traffic Fatalities in Montana","cells":[{"id":1,"value":"

\n\n# Data Mapping of Traffic Fatalities in Montana\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"![header](${await FileAttachment(\"header_img.jpg\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"

\n\n# Hypothesis\n\nLooking at point data of road traffic accidents laid over road networks suggests a pattern of increased accidents near intersections, but does this mainly involve low-speed collisions? We could reasonably assume that highway curves present a more fatal danger to Montana drivers facing a combination of two-lane highways (close oncoming traffic), high-speeds, and ice. In my experience driving on two-lane highways in Montana, it seems that we see more roadside white cross markers in windier sections, however, there are also many markers in straight-sections accompanied by tragic stories like those of drunk drivers hitting oncoming victims. Is it possible to build a vector-based visualization that will clearly show an increase in fatal accidents near/on curves?\n\n_**Hypothesis: Fatal roads accident in Montana are likelier to occur at curves than at intersections.**_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"

\n\n# Plan for visualizations\n- **Bivariate choropleth:** show counties with (HH) higher accidents & traffic, (LL) lower accidents & traffic, (HL) higher accidents in low-traffic areas, and (LH) lower accidents in high-traffic areas.\n- **Interactive data profile bar-vector:** allow user to set road segment length and quantify road accident counts into bars for given road segment. Road segments distances used for bar bins can be set automatically by zoom level or manually by the user.\n\n
\n\n#### Why this is a good for a visualization-based hypothesis test using vector data:\n- With plenty of meter-level accident point data and road line data, will be easy to determine accident proximity to road intersections but there will be more bias in determining proximity.\n- Could we add bar graphs along road vectors to quantify and visualize accident counts within x-meter bands?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"

\n\n# Exploratory Data Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// table\nconst countyGeojson = await FileAttachment(\n \"MT_county_vehiclemilestravelled.geojson\"\n).json();\n\nconst countyRows = countyGeojson.features.map(({properties, geometry}) => ({\n ...properties,\n geometryType: geometry?.type\n}));\n\ndisplay(\n Inputs.table(countyRows, {\n columns: [\n \"NAME\",\n \"ONSYS_DVMT\",\n \"OFFSYSDVMT\",\n \"STHWY_DVMT\",\n \"TOT_DVMT\"\n ],\n sort: \"TOT_DVMT\",\n reverse: true,\n rows: 15\n })\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Data Cleaning\nA few points in weird locations to delete from the dataset.\n![data-cleaning](${await FileAttachment(\"dataprep_far-off-points.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"### Data Prep\nThere are several geospatial operations with QGIS and Python that can make our lives much easier when using the data later. The largest constraint to be mindful of is the 50mb file size limit imposed by Observable (most of the MTDoT datasets are 100mb-200mb).\n1. **Reprojections:** meters-based CRS for accidents locations (EPSG:6514) and web-friendly CRS for Observable plot (EPSG:4326).\n2. **County Aggregations:** to provide county-level statistics beyond the Vehicle Miles Traveled dataset we have from MTDoT, we can sum the number of accidents located in each county, and we can even sum the total number of miles of road vectors passing through each county. These additional county-level columns will allow for a bivariate choropleth to be added later this notebook.\n3. **Join Roads & Accident Points:** assign road attributes (road name, road type, speed limit, traffic count, etc.) to accident points, so that each accident has a little bit more information based on the road it happened on.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"const [\n preparedSource,\n accidentSource\n] = await Promise.all([\n FileAttachment(\n \"montana-prepared.json\"\n ).json(),\n\n FileAttachment(\n \"MT_accidents_points_filtered.geojson\"\n ).json()\n]);\n\nconst accidentsById = new Map(\n accidentSource.features.map(feature => [\n String(feature.id),\n feature.properties\n ])\n);\n\nconst prepared = {\n ...preparedSource,\n\n matches: preparedSource.matches.map(match => {\n const properties =\n accidentsById.get(String(match.id));\n\n return {\n ...match,\n properties,\n CRASH_SEVERITY:\n properties?.CRASH_SEVERITY ??\n \"Unknown\",\n accidentType:\n properties?.CRASH_SEVERITY ??\n \"Unknown\",\n county:\n properties?.COUNTY ??\n \"Unknown\",\n crashDate:\n properties?.CRASH_DATE ??\n null\n };\n })\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"const roadChart = createRoadChart({\n Plot,\n d3,\n Inputs,\n engine\n});\n\ndisplay({\n mount: typeof roadChart.mount,\n automaticResolution: typeof roadChart.automaticResolution\n});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"

\n\n# Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## Data Table\n_Several spatial joins later and we have a vectorized accident count and daily traffic volume by county in Montana._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"const geojson = await FileAttachment(\n \"MTcountiesStats_EPSG6514.geojson\"\n).json();\n\nconst counties = geojson.features.map(({properties}) => properties);\n\ndisplay(\n Inputs.table(counties, {\n columns: [\n \"NAME\",\n \"TOT_DVMT\",\n \"ONSYS_DVMT\",\n \"OFFSYSDVMT\",\n \"STHWY_DVMT\",\n \"accidents_total\",\n \"accidents_fatal\",\n \"accidents_serious\",\n \"accidents_minor\",\n \"accidents_noinjury\"\n ],\n sort: \"NAME\",\n layout: \"auto\",\n rows: 15,\n select: false\n })\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"DVMT represents the estimated Daily Vehicle Miles Traveled in a given county, which I am including in this dataset as an important determinant of traffic volume. With a few cities and tons of remote space across the state, it is important that the number of accidents occurring in an area is normalized by the traffic volume of the area it's in. There is a wide range of normalized traffic accidents by county across Montana, which should hopefully make for an interesting choropleth map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Accidents count / DVMT, by type per Montana county (2016-2025)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Even with normalized traffic accidents by traffic volume, the counties with the biggest cities are still the ones with the most accidents overall. I think this is due to the reality of most incidents occurring at intersections, which there are a lot more of in cities. But our hypothesis is specifically looking at fatalities, which we notice in the plot above that the number of fatal accidents (normalized by traffic volume) does not follow the same trend, where some counties with lower overall traffic accidents have an abnormally high fatal accident count compared to other counties with similar overall accident numbers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Crash Points Data\n_This plot shows the point locations of accident data (disaggregated by accident type) and highways across Montana._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$4f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"With point data overlayed on top of each other, it's hard to get a sense of the true distribution of accident incidents across cities and the state. Vectorizing accident and traffic statistics into a choropleth map will give us a much better idea of where most accidents are occurring and where they are not.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"## Bivariate Choropleth\n_Bivariate relationship between traffic and accidents in Montana Counties (2016-2025)._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$50","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"The bivariate choropleth has become one of my favorite vector map visualizations, because I love the added dimension that you miss in a standard choropleth map. The most important concept to understanding bivariate choropleths is being able to think of the bivariate relationships as High-High, Low-Low, High-Low, and Low-High. The dimmest color and the densest color represent LL and HH respectively, while the 'extremity' colors represent abnormalities of low traffic/high accidents and high traffic/low accidents. We expect there to be more accidents in places where there are more cars driving, a simple choropleth telling us this is not insightful. But is it not far more interesting to find out which counties have lower traffic volume but higher fatal accidents, or vice versa? I imagine we could learn from these counties to implement better traffic solutions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## Vector-based Data Profile of Highway Accident Density in Montana between 2016-2025\n_Bars aggregate accident counts by (zoom-variable) road segment bins._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"const accidentMap = roadChart.mount(prepared, {\n width,\n height: Math.max(\n 520,\n Math.min(720, width * 0.66)\n )\n});\n\ndisplay(accidentMap);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Take a look at the fatal accidents occurring in the section of Highway US-93 just south of Missoula (using a 1km bin), if you've driven this stretch in the winter you know it can be frequently closed due to tragic\naccidents, and sadly this map reveals why. Experiment with the bin segment lengths & accident types; I encourage you to scroll through the map and visit stretches of highways or dangerous curves you are familiar with in Montana, and see if there is a higher density of fatal accidents where you expect there to be.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"

\n\n# Conclusion from visualizations\nWhile a test of spatial autocorrelation would be needed to prove the hypothesis one way or another, I do think that the last interactive map can help us get a sense of the pattern. When looking at all accidents, they seem to overwhelmingly occur at intersections -- an assessment that insurance companies are familiar with. However, when we filter for just fatal accidents, it seems that curved roads gain way more data bars than the intersections do. So while not statistically proven, I think this interactive map is a creative way to explore the pattern of where fatal accidents are occuring on Montana highways\n

\n\n# Appendix\n_Documentation of edits, improvements, and decisions made to reach the final 4 charts that best visualize the hypothesis._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Points Scatter\nA point map is basically just a scatterplot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$51","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"This is a good first attempt to plot our data points along x (latitude) and y (longitude) coordinates, but we notice that the outline of the state looks kind of off, like it's been stretched. This is due to the EPSG_4326 web mercator projection, which is a standard projection used for web visualizations, but when focused on an area we know well it is better to use projections that are specific to local areas, as these will produce more familiar-looking geography to the viewer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$52","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"This looks much better. A neat trick to know what projection a map of Montana is using, is to look at the northern border with Canada. Due to the Conformal Conic mprojection method that renders latitudes flat on the map, the border on the 49th parallel appears as a straight line. With a Lambert Conformal Conic projection, where the surface-wrap is tangent to a specific latitude, EPSG:6514 works better for rendering a more accurate shape of Montana, as evidenced by the curved northern border that better reflects the visual of a latitude line across the globe's surface.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$53","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"The dataset is quite large for Observable to render all the accident points in a timely manner, but it is still interesting to look at the different severity of accidents, so this simple button switcher allows for a quick look at each type of accident.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Choropleth\nWorking towards a choropleth map that models a bivariate relationship between road accidents and traffic counts on these roads. This will allow us to distinguish between counties with many accidents in high traffic volume roads (High-High) versus lower traffic volume roads (High-Low), the latter of which would be more interesting as it defies the expected trend of fewer accidents due to less traffic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$54","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Our first interactive choropleth in Observable! It needs a title, legend, and let's also enable a zoom feature to add to the interactivity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$55","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Great, now let's add a choropleth for each bivariate relationship we have from the different types of accidents (no injuries, minor injuries, severe injuries, fatalities). While a univariate choropleth could reveal the counties with higher/lower traffic, or higher/lower accidents, but it could not do both in the same map. The bivariate choropleth adds a new dimension to see not only where both accidents and traffic are high or low, but also where there is a divergence in the intensity of crashes and drivers on the road, which I would argue is far more interesting than a simple choropleth telling us that most accidents occur where there are more drivers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$56","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Normally I would be satisfied with this quadrant choropleth plot, but I think we can take advantage of the filtering selector buttons to put it all in one plot. I also am not sure which color scheme I'm happiest with, so why not give the user the choice to choose whatever works best for them. The final map for this notebook is basically these four bivariate relationships fit into a single plot with the added ability to change the choropleth color scheme based on the user's preference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Road Accident Density Vector Bar Chart\n This one should hopefully be cool... Inspired from elevation profiles that are plotted along route maps (see citation at the end of this notebook), I felt like a bar chart that aggregates accidents on a certain road segment could be a really cool visualization, to end up with a really good visual on the density of where accidents are happening.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"const accidentMap = roadChart.mount(prepared, {\n width,\n height: Math.max(\n 520,\n Math.min(720, width * 0.66)\n )\n});\n\ndisplay(accidentMap);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$57","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"

\n\n# Citations\n- D3 Observable Gallery: Bivariate Choropleth ([link](https://observablehq.com/@observablehq/bivariate-choropleth))\n- VisQuill: Kungsleden Height Profile ([link](https://visquill.com/gallery/kungsleden))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"2"}} 42:null