28:null 29:["$","title",null,{"children":"MoranPlot: Interactive plots for Local Moran's I analysis | Lee Mason | Observable"}] 2e:T801,{ const thead = htl.html` Name Type Required Description ` // const thead = htl.html` // Name` const rows = [ ["id", "string", "✓", "The ID corresponding to a spatial location (e.g. a FIPS code)"], ["z", "number", "✓", "The z-score normalized attribute value"], ["lag", "number", "✓", "The spatial lag"], ["statistic", "number", "✓", "The value of the Local Moran's I statistic"], ["neighbors", "Array of [string,number] tuples", "✓", "[id, weight] tuples for each spatial neighbor"], ["label", "string", "Some", "Assigned label (e.g. 'High-high')"], ["lowerCutoff", "number", "", "The lower boundary value for the statistic, below which the result would be deemed significant"], ["upperCutoff", "number", "", "The upper boundary value for the statistic, above which the result would be deemed significant"], ["permutationDistribution", "Array of [number, number] tuples", "", "The estimated distribution of the permutations, given as pairs of [statistic value, probability density]"], ["permuations", "Array of numbers", "", "Alternative to permutationDistribution. The permuted values of the Local Moran's I statistic."] ] const tbody = htl.html`` rows.forEach(row => { const tr = htl.html`` if (row[0] == "lowerCutoff" || row[0] == "permutationDistribution") { tr.style.borderTop = "2px solid #bbb" } for (const field of row) { const td = htl.html`${field}` if (field == "✓") { td.classList.add("yes") } else if (field == "Some") { td.classList.add("some") } tr.appendChild(td) } tbody.appendChild(tr) }) const table = htl.html`` table.appendChild(thead) table.appendChild(tbody) return table }2f:T481,This plot consists of the following elements: * **Value and lag density plot (top)**: shows both the distribution of z-normalized attributed values (in ${ct("grey")}) and the distribution of spatial lags (in ${ct("transparent blue", "rgb(0,0,255,.5)")}). * **The location's z-score normalized value:** shown as a black dot at the top of the top density plot. It is connected to the z = 0 axis by a dashed line. * **The location's neighbors' z-score normalized values**: shown as black dots half way up the top density plot. They are all connected to the spatial lag value by curved dashed lines. * **Local Moran's I permuted value density plot (bottom):** showing the density of permuted Local Moran's I statistic values. * **Connected spatial lag and Local Moran's I values**: The spatial lag and Local Moran's I value are plotted as ${ct("blue")} points connected by a dashed line. This shows the linear relationship between these two numbers. * **Significance cutoffs:** The significant values shown as colored areas. By default these are ${ct("green")} for positive spatial autocorrelation and ${ct("purple")} for negative spatial autocorrelation.30:Tbca,{ const lagPolarPlot = new moranplot.LagRadial(results, {featureCentroids: centroids}) lagPolarPlot.focus("30017"); const resultIndex = d3.index(results, d => d.id) const result = resultIndex.get("30017") const neighbors = result.neighborWeights.map(d => resultIndex.get(d[0])) const featureMap = d3.index(usCounties.features, d => d.id) const focusFeature = featureMap.get(result.id) const neighborFeatures = neighbors.map(d => featureMap.get(d.id)) const neighborsCombinedFeature = turf.combine(turf.featureCollection(neighborFeatures)) const angleEntries = lagPolarPlot.angleMap.get(result.id) angleEntries.sort((a,b) => a[1] - b[1]) const numberMap = new Map(angleEntries.map((d,i) => [d[0],i+1])) const mapPlot = Plot.plot({ width: 400, color: { scheme: "RdYlBu", legend: true, pivot: d3.mean(results, d => d.z), reverse: true, label: "Mortality Rate (Z-normalized)" }, projection: {type: "albers-usa", domain: neighborsCombinedFeature }, marks: [ Plot.geo(usCounties.features.filter(d => d.id != focusFeature.id), { stroke: "lightgrey", fill: d => resultIndex.get(d.id)?.z, opacity: .2 }), Plot.geo(neighborFeatures , { stroke: "lightgrey", strokeWidth: 1.5, fill: d => resultIndex.get(d.id)?.z, }), Plot.geo(usCounties.features.filter(d => d.id == focusFeature.id) , { stroke: "yellow", strokeWidth: 3, fill: d => resultIndex.get(d.id)?.z, }), // Plot.dot(neighborCentroids, { x: d => d[0], y: d => d[1] }), Plot.text(neighborFeatures, Plot.centroid({ text: d => numberMap.get(d.id), fontSize: 15, textAnchor: "middle", stroke: "white", fill: "black" }) ) ] }) const flatPlot = Plot.plot({ width: 400, style: { fontSize: 14 }, marginLeft: 60, x: { domain: lagPolarPlot.zExtent, ticks: [...lagPolarPlot.zExtent, 0] }, y: { type: "point", grid: true}, marks: [ Plot.dot(neighbors, {x: d => d.z, y: d => numberMap.get(d.id), fill: d => lagPolarPlot.colorScale(d.z), stroke: "grey", r: 4}), Plot.ruleX([0], {stroke: lagPolarPlot.colors.refCircle}), Plot.ruleX([result.lag], {stroke: lagPolarPlot.colors.connection, strokeDasharray: "3,3"}), Plot.ruleX([lagPolarPlot.zExtent[1]], {stroke: lagPolarPlot.colors.refCircle, strokeWidth: 1}), Plot.ruleX([lagPolarPlot.zExtent[0]], {stroke: lagPolarPlot.colors.refCircle, strokeWidth: 3}), Plot.link(neighbors, { x1: d => result.lag, x2: d => d.z, y: d => numberMap.get(d.id), opacity: .5}), Plot.text([result.lag], { x: d => result.lag, text: d => "Lag", frameAnchor: "top", fill: lagPolarPlot.colors.connection, lineAnchor: "bottom", dy: -5}) ] }) const div = htl.html`

` div.appendChild(mapPlot) div.appendChild(flatPlot) div.appendChild( lagPolarPlot.plot()) return div }31:T466,plots = { elements.mapContainer.innerHTML = '' elements.dualContainer.innerHTML = '' elements.networkContainer.innerHTML = '' // Dual density plot const moranDualPlot = new moranplot.MoranDualDensity(results, { width: 400, marginLeft: 40, marginRight: 40, textMode: "label_only", fontSize: 14, height: 180, centerHeight: 50, }) //moranDualPlot.focus(results[range].id) elements.dualContainer.appendChild(moranDualPlot.plot()) // Moran network scatterplot const moranNetworkPlot = new moranplot.MoranNetwork(results, { zExtent: moranDualPlot.zExtent, drawAxisConnections: true, hideXAxis: true, marginBottom: 10, width: 400, height: 400, margin: 40, }) elements.networkContainer.appendChild(moranNetworkPlot.plot()) moranNetworkPlot.onHover((d,i) => moranDualPlot.focus(d?.id)) // Cluster map const moranChoropleth = new moranplot.ClusterMap(results, usCounties, { width: 800, projection: {type: "albers-usa", domain: usCounties} }) elements.mapContainer.appendChild(moranChoropleth.plot()) return { moranNetworkPlot, moranDualPlot, moranChoropleth } }32:T716,estimateDistribution = { const gaussian = (await import('https://cdn.jsdelivr.net/npm/gaussian@1.3.0/+esm')).default function kde(X, K, h) { return function (x) { let sum = 0 for (let xi of X) { sum += K((x - xi) / h) } return (1/(X.length*h)) * sum } } function estimateDistribution(X, n=50, extent=null) { console.log("boop") const normal = gaussian(0,1) const h = 0.9 * d3.deviation(X) * X.length ** (-1/5) const kernel = kde(X, d => normal.pdf(d), h) if (!extent) { extent = d3.extent(X) } const threshold = 0.001 let points = [] let step = (extent[1] - extent[0])/n for (let i = 0; i < n; i++) { const x = extent[0] - step*i const value = kernel(x) points.push([x,value]) if (value < threshold) { break } } points = points.reverse() for (let i = 1; i < n*2; i++) { const x = extent[0] + step*i const value = kernel(x) points.push([x,value]) if (value < threshold) { break } } const max = d3.max(points, d => d[1]) return points.map(([x,y]) => [x, y]) } function interpolatePoints(points, xVals) { const resultPoints = [...points] for (const x of xVals) { let i = 1 while (i < points.length && points[i][0] < x) { i++ } if (i === 0 || i === points.length) { resultPoints.push([x, NaN]) continue } const x0 = points[i - 1][0] const y0 = points[i - 1][1] const x1 = points[i][0] const y1 = points[i][1] const y = y0 + (x - x0) * (y1 - y0) / (x1 - x0) resultPoints.push([x, y]) } return resultPoints.sort((a,b) => a[0] - b[0]) } return estimateDistribution }33:[{"id":"28c56e6ab0b6ba2147013f744beeb3dd8932f94ba6d4631fde7697a616c4b4e71586669c7ec279d17ab34470063ebf5dcdcf4ba2ac020738bd10a693540f4ac5","href":"https://static.observableusercontent.com/files/28c56e6ab0b6ba2147013f744beeb3dd8932f94ba6d4631fde7697a616c4b4e71586669c7ec279d17ab34470063ebf5dcdcf4ba2ac020738bd10a693540f4ac5","name":"us_counties.json","type":"application/json","lastModified":1714420996018.886,"size":3176554},{"id":"b0f75da2dbfa4cd0795de1c925bebc96095581224686d4b6cc6eb7c3603cd4c5cc000ac552e7a0322b4dd513d33bc5318c7d3f04bb6165e1fc9a10fd7a36660f","href":"https://static.observableusercontent.com/files/b0f75da2dbfa4cd0795de1c925bebc96095581224686d4b6cc6eb7c3603cd4c5cc000ac552e7a0322b4dd513d33bc5318c7d3f04bb6165e1fc9a10fd7a36660f","name":"moran_us_cancer_mortality-2011-2020_county.json","type":"application/json","lastModified":1714407119144.975,"size":2838239},{"id":"1331a2c6af1dbd5ff76aefd5360b1b26d8920573231d5668aa0b153c89ca345b452cf0ef99436b850a527fff547b26e9f625ea8ae002eecf868317b68ebd1c21","href":"https://static.observableusercontent.com/files/1331a2c6af1dbd5ff76aefd5360b1b26d8920573231d5668aa0b153c89ca345b452cf0ef99436b850a527fff547b26e9f625ea8ae002eecf868317b68ebd1c21","name":"texas_counties.json","type":"application/json","lastModified":1714147310558.079,"size":195793},{"id":"e8c448bcfb466680b8031413e333fbb67fb13220de3014bd533f196f5db78e2836b320f0b931afa38aad5685e09d8dd4b35938f9e872a19952a82b56f9aa9fe0","href":"https://static.observableusercontent.com/files/e8c448bcfb466680b8031413e333fbb67fb13220de3014bd533f196f5db78e2836b320f0b931afa38aad5685e09d8dd4b35938f9e872a19952a82b56f9aa9fe0","name":"moran_us_cancer_mortality-2011-2020_county@1.json","type":"application/json","lastModified":1720304415587.645,"size":2856869},{"id":"9892d76123c0dfae208239b344ec9755efab8e24d546efa9d14db7f5c87730eb3d14bedd25d85f3e4765e42d34247734746529130e2d00483aab2a9110150b69","href":"https://static.observableusercontent.com/files/9892d76123c0dfae208239b344ec9755efab8e24d546efa9d14db7f5c87730eb3d14bedd25d85f3e4765e42d34247734746529130e2d00483aab2a9110150b69","name":"moranplot_screenshot.png","type":"image/png","lastModified":1715013426342.347,"size":607558}] 2c:{"id":"24078d8eb2ecee0b","slug":"moranplot-overview","title":"MoranPlot: Interactive plots for Local Moran's I analysis","thumbnail":"4e072726cbd6f69c7bdbc10c880e4b3eebc115c60a9a9c4677e7b87e10f1e8d2","access_level":"public","create_time":"$D2024-04-24T13:52:35.565Z","update_time":"$D2025-04-10T21:11:28.976Z","view_time":null,"first_public_time":"$D2024-05-06T14:05:41.654Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"aeba13ccd439d1a5","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/c4c5a3e295d0725774878e8d8bc1675789d3ba7c1755c3f8ac1ba1b06c7c2b88","tier":"starter_2024"},"version":2125,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fbdd2b94d96f3c3c","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/6f7da31c0ab5d37355f81ae230a04aa4e504d6516803dba0ce51e12285aad934","tier":null}],"members":[{"type":"team","id":"aeba13ccd439d1a5","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/c4c5a3e295d0725774878e8d8bc1675789d3ba7c1755c3f8ac1ba1b06c7c2b88","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fbdd2b94d96f3c3c","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/6f7da31c0ab5d37355f81ae230a04aa4e504d6516803dba0ce51e12285aad934","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"MoranPlot: Interactive plots for Local Moran's I analysis","cells":[{"id":0,"value":"# MoranPlot: Interactive plots for Local Moran's I analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1061,"value":"dashboard = {\n const container = document.createElement(\"div\")\n container.setAttribute(\"id\", \"main-container\")\n\n const leftContainer = document.createElement(\"div\")\n leftContainer.setAttribute(\"id\", \"left-container\")\n\n const networkContainer = document.createElement(\"div\")\n networkContainer.setAttribute(\"id\", \"network-container\")\n\n const dualContainer = document.createElement(\"div\")\n dualContainer.setAttribute(\"id\", \"dual-container\")\n\n leftContainer.appendChild(networkContainer)\n leftContainer.appendChild(dualContainer)\n \n const mapContainer = document.createElement(\"div\")\n mapContainer.setAttribute(\"id\", \"map-container\")\n \n container.appendChild(leftContainer)\n container.appendChild(mapContainer)\n \n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"Local Moran's I is a popular statistic in spatial analysis for measuring local spatial autocorrelation - used primarily for detecting spatial clusters. The statistic can provide powerful insights but it can be difficult to effectively interpret. For this reason, visualizations of Local Moran's I are often used to simplify analysis.\n\nThe MoranPlot JavaScript library allows users to plot Local Moran's I results using several interactive plots. In this notebook, we're going to describe the plots and provide instructions on how to use the library.\n\nCheckout the dashboard above for an example of the plots in action! Try hovering over the counties in the map or the points on the scatterplot. For a bigger version the dashboard, [click here](https://episphere.github.io/moranplot/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1220,"value":"## Input results\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1549,"value":"The library takes Local Moran's I results as input. The library doesn't calculate the results itself, for that we recommend the spatial-autocorrelation library. Full disclosure: we also developed this library and it is in its early stages. As far as we know there are no other web libraries that output all of the elements required by the plots. However, we describe the required result format(s) so you can use the results from any library that provides the necessary details. \n\nEach of the plot classes takes an array of Local Moran's I result objects in its constructor. Each object may contain the following fields:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1603,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"As we introduce each plot, we will discuss these fields in a little more detail, and how they affect each plot.\n\nIn this example, we will be using pre-computed results from the spatial-autocorrelation libary. The dataset is county-level age-adjusted cancer mortality rates in the US spanning 2011-2020.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"results = {\n //const results = await FileAttachment(\"moran_results_tx_mortality.json\").json()\n const results = await FileAttachment(\"moran_us_cancer_mortality-2011-2020_county@1.json\").json()\n \n const testResult1 = results.at(-1)\n delete testResult1.permutationDistribution\n\n const testResult2 = results.at(-2)\n delete testResult2.permutationDistribution\n delete testResult2.lowerCutoff\n delete testResult2.upperCutoff\n \n return results \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"results","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1401,"value":"## Plots\n\nEach of the plot classes works in a similar way: you instantiate the class with the result list (and the GeoJSON FeatureCollection for the cluster map), and provide an optional object containing additional configuration arguments. To focus on a specific location (required for the dual-density and lag radial plots), you need to call the `focus` method with the desired result ID.\n\nTo introduce the plots we'll keep it simple and use the defaults, but if you scroll to the *Plot arguments* section below we have some examples of using optional arguments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1404,"value":"### Moran dual-density\n\nThe Moran dual-density plot explicitly shows the elements involved in a Local Moran's I calculation at a specific location. Try looking at different results and seeing how they are plotted. To see examples of missing optional fields, try the results at the end of the range slider.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1924,"value":"viewof viewResult = {\n\n const input = htl.html``\n const element = htl.html`

View Result

`\n element.appendChild(input)\n const valueLabel = htl.html``\n valueLabel.style.marginLeft = \"5px\"\n element.appendChild(valueLabel)\n\n input.addEventListener(\"input\", e => {\n element.value = results[parseInt(input.value)]\n valueLabel.innerText = results[input.value].id\n //element.dispatchEvent(e)\n })\n\n element.value = results[parseInt(input.value)]\n valueLabel.innerText = results[input.value].id\n return element\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"Viewing result for location ${viewResult.id} (${areaNameMap.get(viewResult.id)}). Label: ${viewResult.label}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1748,"value":"{\n const dualDensityPlot = new moranplot.MoranDualDensity(results)\n dualDensityPlot.focus(viewResult.id)\n return dualDensityPlot.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1410,"value":"### Moran network scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"moranNetwork = {\n const moranNetwork = new moranplot.MoranNetwork(results)\n return moranNetwork.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"The Moran network scatterplot is a variant of the [Moran scatterplot](https://geodacenter.github.io/workbook/5a_global_auto/lab5a.html). The only difference is that when you hover over one of the points, it is connected to each of its neighbor points with lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1773,"value":"### Spatial lag radial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1776,"value":"{\n const lagPolarPlot = new moranplot.LagRadial(results, {featureCentroids: centroids})\n lagPolarPlot.focus(\"30017\")\n return lagPolarPlot.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"The spatial lag radial shows the values of a location's neighbors on a radial plot. Below is a diagram showing how the plot is constructed. Essentially, each \"spoke\" on the radial plot is an axis corresponding to one of the location's neighbors. Each axis covers the same range: the full range of z-score normalized values in the dataset. On each axis a dot is drawn corresponding to that neighbor's z-score normalized value. In the center diagram below, these axes are stacked vertically. In the lag radial plot, these axes are angled in the relative direction between the corresponding neighbor and the focal location. e.g. notice how the area labelled \"2\" (with the highest value) is North North East of the focal location, and the axis in the radial plot is angled to reflect this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2113,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"The blue dashed circle is the spatial lag, which is equal to the weighted mean of the neighbor values. The grey circle represents z = 0. A finer dashed blue line connects the lag circle to a scale with p-value cut-off areas similar to the dual-density plots.\n \nThis plot works best when positioned near the corresponding map, like in a tooltip as demonstrated by the [example dashboard](https://episphere.github.io/moranplot/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1786,"value":"### LISA cluster map\n\nJust the standard LISA cluster map plot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"usCounties = FileAttachment(\"us_counties.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"{\n const clusterMap = new moranplot.ClusterMap(results, usCounties, {\n projection: { type: \"albers-usa\", domain: usCounties }\n })\n return clusterMap.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2000,"value":"### Plot arguments\n\nYou can supply optional plot arguments. Below are the defaults, with some commented lines for additional examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2004,"value":"#### Moran dual-density plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2006,"value":"{\n const dualDensityPlot = new moranplot.MoranDualDensity(results, { \n width: 480, \n height: 160,\n margin: 30,\n centerHeight: 50,\n \n textMode: \"label_only\",\n fontSize: 12,\n\n zDistribution: \"auto\", \n // zDistribution: estimateDistribution(results.map(d => d.z), 10),\n lagDistribution: undefined, // Distribution tuples or a false-y value to hide the lag distribution\n // lagDistributionDisplay: \"fill\", // Applies only if 'lagDistribution' is not false-y. Takes \"fill\" or \"stroke\"\n\n colors: {\n distribution: \"#E5E4E2\",\n z: \"black\",\n connection: \"blue\",\n positiveAutocorrelation: \"green\",\n negativeAutocorrelation: \"purple\",\n },\n })\n dualDensityPlot.focus(viewResult.id)\n return dualDensityPlot.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2057,"value":"#### Moran network plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2056,"value":"{\n const moranNetwork = new moranplot.MoranNetwork(results, {\n width: 480, \n height: 480, \n margin: 35,\n \n fontSize: 12,\n \n colors: {\n highHigh: \"#ff3d47\",\n highLow: \"#f99ae4\",\n lowHigh: \"#94d1ff\",\n lowLow: \"#186ffb\",\n notSignificant: \"#d1d1d1\"\n },\n\n xLabel: \"Value (z)\",\n \n pointOpacity: 0.5, pointOpacityDimmed: 0.05,\n rSmall: 2, rMedium: 3, rBig: 5, \n drawAxisConnections: false,\n hideXAxis: false, \n })\n return moranNetwork.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"#### Spatial lag radial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2054,"value":"neighborAngles = {\n const angles = []\n // We just make it up for the purposes of this example! It doesn't even make sense!\n for (let i = 0; i < results.length; i++) {\n for (const [id,w] of results[i].neighbors ? results[i].neighbors : []) {\n angles.push({from: results[i].id, to: id, angle: Math.random()*Math.PI*2})\n }\n }\n return angles\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"{\n const lagRadialPlot = new moranplot.LagRadial(results, {\n featureCentroids: undefined, // The centroids of the spatial features\n neighborAngles: undefined, // An alternative to the feature centroids: provide the angles between features directly\n //neighborAngles: neighborAngles,\n \n size: 180,\n margin: 5,\n \n innerRadius: 15, \n pointRadius: [2,5],\n \n colors: {\n axis: \"#ededed\",\n refCircle: \"#d1d1d1\",\n connection: \"blue\",\n positiveAutocorrelation: \"green\",\n negativeAutocorrelation: \"purple\",\n highHigh: \"red\",\n highLow: \"pink\",\n lowHigh: \"lightblue\",\n lowLow: \"blue\",\n notSignificant: \"grey\"\n },\n })\n lagRadialPlot.focus(\"30017\")\n return lagRadialPlot.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"#### LISA cluster map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2051,"value":"{\n const clusterMap = new moranplot.ClusterMap(results, usCounties, {\n width: 640, height: 480,\n style: { fontSize: \"12px\" }, \n colorMode: \"label\",\n colors: {\n highlight: \"orange\",\n highHigh: \"#ff3d47\",\n highLow: \"#f99ae4\",\n lowHigh: \"#94d1ff\",\n lowLow: \"#186ffb\",\n notSignificant: \"whitesmoke\"\n },\n pointOpacity: 0.8,\n projection: {type: \"identity\", domain: usCounties},\n })\n return clusterMap.plot()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"## Dashboard demo \n\nBelow is example code showing how these plots can be linked together in a dashboard. Scroll to the top of the notebook to see the dashboard. For a more complete demonstration, see the [MoranPlot dashboard](https://episphere.github.io/moranplot/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1275,"value":"elements = {\n dashboard;\n return {\n dualContainer: dashboard.querySelector(\"#dual-container\"),\n mapContainer: dashboard.querySelector(\"#map-container\"),\n networkContainer: dashboard.querySelector(\"#network-container\"),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"tooltip = {\n const tooltipElem = document.createElement(\"div\")\n tooltipElem.classList.add(\"tooltip\")\n const tooltip = addPopperTooltip(elements.mapContainer)\n const tooltipText = document.createElement(\"b\")\n tooltipElem.appendChild( tooltipText)\n\n const centroidIds = new Set(centroids.map(d => d.id))\n const lagPolarPlot = new moranplot.LagRadial(results.filter(d => centroidIds.has(d.id)), {\n size: 120, zExtent: plots.moranDualPlot.zExtent, featureCentroids: centroids\n })\n tooltipElem.appendChild(lagPolarPlot.plot())\n\n plots.moranChoropleth.onHover((result,e) => {\n lagPolarPlot.focus(result?.id)\n plots.moranDualPlot.focus(result?.id)\n plots.moranNetworkPlot.focus(result?.id)\n \n if (result) {\n tooltipText.innerText = areaNameMap.get(result.id)\n tooltip.show(e.target, tooltipElem)\n } else {\n tooltip.hide()\n }\n })\n\n return tooltip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"## Working","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"This is here as a temporary measure to make it easier to generate the centroids!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1358,"value":"us = Plot.plot({\n width: 500,\n projection: \"albers-usa\",\n marks: [\n Plot.geo(usCounties, {\n fill: \"white\", stroke: \"whitesmoke\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"centroids = {\n const centroids = []\n d3.select(us).selectAll(\"path\")\n .each((_,i,paths) => {\n const bbox = paths[i].getBBox()\n centroids.push({id: usCounties.features[i].id, centroid: [bbox.x + bbox.width/2, bbox.y + bbox.height/2]})\n })\n return centroids\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"areaNameMap = new Map(usCounties.features.map(d => [d.id, d.properties.name + \", \" + d.state.name]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1958,"value":"colorMap = new Map([\n [\"High-high\", plots.moranNetworkPlot.colors.highHigh],\n [\"High-low\", plots.moranNetworkPlot.colors.highLow],\n [\"Low-high\", plots.moranNetworkPlot.colors.lowHigh],\n [\"Low-low\", plots.moranNetworkPlot.colors.lowLow],\n [\"Not significant\", plots.moranNetworkPlot.colors.notSignificant]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## Helper ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1872,"value":"function color(color) {\n const div = htl.html`

`\n div.style.backgroundColor = color \n return div \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1986,"value":"function ct(text, color) {\n if (!color) color = text\n return htl.html`${text}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"function addPopperTooltip(element) {\n\n const tooltipElement = document.createElement(\"div\")\n tooltipElement.classList.add(\"custom-tooltip\")\n element.appendChild(tooltipElement)\n\n let popper = null\n function show(targetElement, html) {\n if (popper) popper.destroy()\n popper = Popper.createPopper(targetElement, tooltipElement, {\n placement: \"top-start\",\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [10, 10],\n },\n },\n {\n name: 'preventOverflow',\n options: {\n boundary: element,\n },\n },\n ],\n })\n\n if (html instanceof Element) {\n tooltipElement.innerHTML = ``\n tooltipElement.appendChild(html)\n } else {\n tooltipElement.innerHTML = html\n }\n\n tooltipElement.style.display = \"block\"\n }\n\n function hide() {\n tooltipElement.style.display = \"none\"\n }\n\n return { show, hide }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"function getPolarAngles(center, points) {\n const angles = [];\n for (let point of points) {\n if (point != null && Number.isFinite(point[0]) && Number.isFinite(point[1])) {\n const dx = point[0] - center[0]\n const dy = point[1] - center[1]\n let angle = Math.atan2(dy, dx)\n angles.push(angle)\n } else {\n angles.push(null)\n }\n }\n return angles.map(d => d + Math.PI/2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1102,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1908,"value":"moranplot = import(\"https://episphere.github.io/moranplot/src/export.js\")\n//moranplot = import(\"http://127.0.0.1:5500/src/export.js?x=\"+new Date())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"turf = require('@turf/turf@7.0.0/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"Popper = import(\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"