2c:null 2d:["$","title",null,{"children":"Linked Interactive CLASS | michelleeesi | Observable"}] 32:T415e,class LinkedInteractiveMap { constructor({ geojson={}, data={}, colorBins=[], breaks=[], ordinalLabels=[], id_var='', colorVariable='', colorSig = '', column = '', sigVar = '', chartTitle = '', }){ this.geojson= geojson; this.data=data; this.colorBins=colorBins; this.breaks=breaks; this.ordinalLabels=ordinalLabels; this.id_var=id_var; this.colorVariable=colorVariable; this.column = column; this.rendered = false; this.transitionTime = 25; this.colorScale = d3.scaleThreshold() .domain(breaks) .range(colorBins); this.colorScaleSig = d3.scaleThreshold() .domain([1,2,3,4,5,6]) .range(colorSig); this.encoding = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.encodingDefaults = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.lock_active_zip=false; this.active_zip=null; this.neighborTarget=[]; // Default data types as expecting for methods like .includes() ! this.mouseoutTimeout=null; this.title = chartTitle; } update(){ const infoBox = document.querySelector('#infoboxContainer'); d3.selectAll('.label') .attr("visibility", "hidden") if (this.active_zip !== undefined){ d3.selectAll('.cell') .select('circle') .attr('stroke', d => d.data[this.id_var] == this.active_zip[this.id_var] ? "black" : this.active_zip.locNeighbors.includes(d.data[this.id_var]) ? '#999999' : "currentColor") .attr('stroke-width', d => d.data[this.id_var] == this.active_zip[this.id_var] ? 2 : this.active_zip.locNeighbors.includes(d.data[this.id_var]) ? 2 : 1) .style('opacity', d => d.data[this.id_var] == this.active_zip[this.id_var] ? 1 : this.active_zip.locNeighbors.includes(d.data[this.id_var]) ? 1 : 0.5 ); d3.selectAll(`#label-${this.active_zip[this.id_var]}`) // .filter(d => {console.log('label', d); return d.data[this.id_var] == this.active_zip[this.id_var]}) .attr("visibility", "visible") d3.selectAll('.polygon') .attr('stroke-width', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "5" : "1" ) .style('opacity', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? 1 : this.active_zip.locNeighbors.includes(d.properties[this.id_var]) ? 0.8 : 0.2 ) d3.selectAll('.tract') .select('path') .attr('stroke', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? this.colorScaleSig(d.properties['cluster']) : "#999999" ) .attr('paint-order', 'stroke'); d3.selectAll('.tract') .filter(d => d.properties[this.id_var] == this.active_zip[this.id_var]) .raise() d3.selectAll('.tract') .filter(d => this.active_zip.locNeighbors.includes(d.properties[this.id_var])) .raise() infoBox.innerHTML = `

${this.active_zip[id_var]}

${this.active_zip.Dprtmnt}

Cluster	${lm.labels[this.active_zip.cluster]}
${column}	${this.active_zip[column]}
Number of Neighbors	${this.active_zip.numNeighbors}
Lisa Value	${this.active_zip.lisaValue}
P-Value	${this.active_zip.pVal}

`; } else { infoBox.innerHTML = ''; d3.selectAll('.polygon') .attr('stroke-width', 1) .style('opacity', 1); d3.selectAll('.cell') .select('circle') .attr('stroke', 'currentColor') .attr('stroke-width', 1) .style('opacity', 1); d3.selectAll('.tract') .select('path') .attr('stroke', '#999999'); d3.selectAll('.label') .attr("visibility", "hidden") } } renderGraphic(){ const svg = d3.select(DOM.svg(width, 600)) .attr('color', '#999') .attr('font-family', "'Helvetica Neue', sans-serif") .attr('font-size', 12); const chart = svg.append('g') .attr('transform', `translate(${chart_offset.x}, ${chart_offset.y+30})`) .attr('class', 'chart'); const infoBox = html`

`; const styleLabel = label => label .attr('text-anchor', 'middle') .attr('dominant-baseline', 'bottom') .attr('stroke-width', '2') .attr('fill', '#fff') .attr('paint-order', 'stroke') .attr('font-weight', 'bold') .attr('font-size', 14) .attr('pointer-events', 'none') .attr('visibility', 'hidden') .style('text-shadow', '0 0 3px #000, 0 0 3px #000'); const styleCircle = circle => circle .attr('stroke-width', 1) .attr('stroke', 'currentColor') .attr('stroke-opacity', 1) .attr('fill', 'currentColor') .attr('fill-opacity', 0.8); const stylePolygon = polygon => polygon .attr('stroke', '#999999') .attr('stroke-width', '0.05vw') .attr('stroke-linejoin', 'round') .attr('paint-order', 'normal'); const axes = chart.append('g').attr('class', 'axes'); let lastXFormat = ',d'; let lastYFormat = ',d'; let xAxis = axes.append('g').call(x_axis(lastXFormat)) let yAxis = axes.append('g').call(y_axis(lastYFormat)) const xLabel = chart.append('text') .attr('class', 'direction-label direction-label-x') .attr('color', '#333') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('x', chart_width / 2) .attr('y', chart_height + 20); const yLabel = chart.append('text') .attr('class', 'direction-label direction-label-y') .attr('fill', '#333') .attr('text-anchor', 'middle') .attr('x', -chart_height / 2) .attr('y', 6) .attr('dy', is_narrow ? '-1em' : '-2em') .attr('transform', 'rotate(-90)'); const title = chart.append('text') .attr('class', 'title') .attr('color', '#000') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('font-size', 20) .attr('font-weight', "bold") .attr('font-family', 'serif') .attr('x', chart_width / 2) .attr('y', chart_height-320) .text(this.title); const chartContent = chart .append('g') .attr('class', 'chart-content') const cells = chartContent .selectAll('g') .data(voronoi(this.data).polygons(), d => d && d.data && d.data[this.id_var]) .join('g') .attr('class', 'cell') .attr('data-id', d => d.data[this.id_var]) .style('transition', '50ms all') .attr('cursor', 'pointer'); const circles = cells .append('circle') .call(styleCircle); const labels = cells .append('text') .attr('class', 'label') .attr('dy', '-0.5em') .text(d => d && d.data[this.id_var]) .attr('id', d => `label-${d.data[this.id_var]}`) .call(styleLabel); const line = chartContent.append('line') .attr('fill', 'none') .attr('stroke', 'red') .attr('stroke-width', 2) .attr('pointer-events', 'none') .datum(linear_regression(data)); const yBase = chartContent.append('line') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('pointer-events', 'none'); const xBase = chartContent.append('line') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('pointer-events', 'none'); let mapX = map_margin.left; let mapY = map_margin.top; if (is_narrow) { mapY += chart_offset.y + chart_height; } else { const mapHeight = height - map_margin.top - map_margin.bottom; const mapWidth = mapHeight * (2 - map_aspect_ratio); mapX = width - mapWidth - map_margin.right; } const map = svg.append('g') .attr('transform', `translate(${mapX-150}, ${mapY-10})`) .attr('class', 'map'); const options = Object.assign({ color: this.ordinalLabels.length ? d3.scaleOrdinal(this.ordinalLabels, this.colorBins) : this.colorScale, }); const legendSVG = legend(options); const legendWidth = +d3.select(legendSVG).attr('width'); const legendHeight = +d3.select(legendSVG).attr('height'); const legendNode = svg.append('g') .attr('transform', `translate(${mapX-80}, ${mapY+400})`); Array.from(legendSVG.children).forEach((child) => { legendNode.node().appendChild(child); }); legendNode.select('g').selectAll('text') .filter(function() { return d3.select(this).attr('font-weight') === 'bold'; }) .attr('font-size', 14); // const legendNode = svg.append('g') // if (this.ordinalLabels.length>6) { // this.ordinalLabels.forEach((d, i) => { // if (i%2==0){ // legendNode.append('rect') // .attr('x',i*60+mapX-50) // .attr('y',mapY+470) // .attr('width', 20) // .attr('height',20) // .attr('fill', this.colorBins[i]); // legendNode.append('text') // .attr('x',i*60+mapX-25) // .attr('y',mapY+470) // .attr("dy", "1.1em") // .text(() => this.ordinalLabels[i]); // } // else{ // legendNode.append('rect') // .attr('x',(i-1)*60+mapX-50) // .attr('y',mapY+490) // .attr('width', 20) // .attr('height',20) // .attr('fill', this.colorBins[i]); // legendNode.append('text') // .attr('x',(i-1)*60+mapX-25) // .attr('y',mapY+490) // .attr("dy", "1.1em") // .text(() => this.ordinalLabels[i]); // } // }) // } // if (this.ordinalLabels.length<=6) { // this.ordinalLabels.forEach((d, i) => { // if (i%2==0){ // legendNode.append('rect') // .attr('x',i*60+mapX-50) // .attr('y',mapY+470) // .attr('width', 20) // .attr('height',20) // .attr('fill', this.colorBins[i]); // legendNode.append('text') // .attr('x',i*60+mapX-25) // .attr('y',mapY+470) // .attr("dy", "1.1em") // .text(() => this.ordinalLabels[i]); // } // else{ // legendNode.append('rect') // .attr('x',(i-1)*60+mapX-50) // .attr('y',mapY+490) // .attr('width', 20) // .attr('height',20) // .attr('fill', this.colorBins[i]); // legendNode.append('text') // .attr('x',(i-1)*60+mapX-25) // .attr('y',mapY+490) // .attr("dy", "1.1em") // .text(() => this.ordinalLabels[i]); // } // }) // } const tracts = map .selectAll('g') .data(geojson.features) .join('g') .attr('class', 'tract') .attr('cursor', 'pointer'); const geoPath = d3.geoPath(projection); const polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', d => this.colorScale(d.properties[this.encodingDefaults.c])) .attr('data-id', d => d.properties[this.id_var]) .attr('d', geoPath) .call(stylePolygon); tracts .append('text') .attr('class', 'label') .text(d => d.properties[this.id_var]) .attr('x', d => geoPath.centroid(d)[0]) .attr('id', d => `label-${d.properties[this.id_var]}`) .attr('y', d => geoPath.bounds(d)[0][1] - 3) .call(styleLabel); [[cells, d => d.data], [tracts, d => d.properties]] .forEach(([els, accessor]) => { els .on('mouseover', (data) => { if (this.lock_active_zip) return; const zip = accessor(data); // if (zip.population) { if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.active_zip = zip; this.update() } }) .on('mouseout', () => { if (this.lock_active_zip) return; this.mouseoutTimeout = setTimeout(() => { this.active_zip = undefined; this.update() }, 100); }) .on('click', (data) => { const zip = accessor(data); console.log(zip) if (this.lock_active_zip && this.active_zip === zip) { this.lock_active_zip = false; this.active_zip = undefined; this.neighborTarget = undefined; this.update() } else if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.lock_active_zip = true; this.active_zip = zip; this.neighborTarget = zip.locNeighbors; this.update() } }); }); const t = svg.transition().duration(this.rendered ? 300 : 0); x.domain(d3.extent(data, d => d[this.encoding.x])); //[d3.extent(data, d => d[this.encoding.x])[0]-1, d3.extent(data, d => d[this.encoding.x])[1]] y.domain(d3.extent(data, d => d[this.encoding.y])); //this.colorScale.domain(d3.extent(data, d => d[this.encoding.c])); //size.domain(d3.extent(data, d => d[this.encoding.s])); voronoi.x(d => x(d[this.encoding.x])).y(d => y(d[this.encoding.y])); linear_regression.x(d => d[this.encoding.x]).y(d => d[this.encoding.y]); const regression = linear_regression(data); xLabel.text(`${column} (Standardized) ⟶`); yLabel.text(`Spatially Lagged ${column} ⟶`); cells .data(voronoi(data).polygons(), d => d && d.data && d.data[id_var]) .join('g'); cells.selectAll('path').remove(); cells .append('path') .attr('d', d => d && d.join && `M${d.join('L')}Z`) .attr('fill', 'none') // .attr('stroke', 'red') .attr('pointer-events', 'all'); labels .attr('x', d => d && d.data && x(d.data[this.encoding.x])) .attr('y', d => d && d.data && y(d.data[this.encoding.y])); circles .attr('cx', d => d && d.data && x(d.data[this.encoding.x])) .attr('cy', d => d && d.data && y(d.data[this.encoding.y])) .attr('r', 5) .attr('color', d => d && d.data && this.colorScaleSig(d.data[this.encoding.sig])) line .datum(regression) .attr('x1', d => x(d[0][0])) .attr('x2', d => x(d[1][0])) .attr('y1', d => y(d[0][1])) .attr('y2', d => y(d[1][1])); yBase .attr('x1', d => x(0)) .attr('x2', d => x(0)) .attr('y1', d => y(d3.extent(this.data, d => d[this.encoding.y])[0])) .attr('y2', d => y(d3.extent(this.data, d => d[this.encoding.y])[1])); xBase .attr('x1', d => x(d3.extent(this.data, d => d[this.encoding.x])[0])) .attr('x2', d => x(d3.extent(this.data, d => d[this.encoding.x])[1])) .attr('y1', d => y(0)) .attr('y2', d => y(0)); polygons .attr('fill', d => { //console.log(this.colorScale(d.properties[this.encoding.c])) return this.colorScale(d.properties[this.encoding.c]) //d.properties[this.encoding.c]) }) .attr("stroke", d => neighborTarget && this.neighborTarget.includes(d.properties[this.id_var]) ? '#9233AB' : "#999999") .attr("stroke-width", d => neighborTarget && this.neighborTarget.includes(d.properties[this.id_var]) ? 2 : 1) .style('opacity', d => neighborTarget === null || this.neighborTarget.includes(d.properties[this.id_var]) ? 1 : .4); this.rendered = true; return Object.assign(html`

${[svg.node(), infoBox]}

`); } }33:T2906,class LinkedMap { constructor({ geojson={}, geojson1={}, data={}, colorBins=[], colorBins1=[], breaks=[], breaks1=[], ordinalLabels=[], ordinalLabels1=[], id_var='', colorVariable='', colorVariable1='', colorSig = '', column = '', sigVar = '', chartTitle = '', }){ this.geojson= geojson; this.geojson1 = geojson1; this.data=data; this.colorBins=colorBins; this.colorBins1=colorBins1; this.breaks=breaks; this.breaks1=breaks1; this.ordinalLabels=ordinalLabels; this.ordinalLabels1=ordinalLabels1; this.id_var=id_var; this.colorVariable=colorVariable; this.colorVariable1=colorVariable1; this.column = column; this.rendered = false; this.transitionTime = 25; this.colorScale = d3.scaleThreshold() .domain(breaks) .range(colorBins); this.colorScale1 = d3.scaleThreshold() .domain(breaks1) .range(colorBins1); this.colorScaleSig = d3.scaleThreshold() .domain([1,2,3,4,5,6]) .range(colorSig); this.encoding = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.encodingDefaults = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.lock_active_zip=false; this.active_zip=null; this.neighborTarget=[]; // Default data types as expecting for methods like .includes() ! this.mouseoutTimeout=null; this.title = chartTitle; } update(){ d3.selectAll('.label') .attr("visibility", "hidden") if (this.active_zip !== undefined){ d3.selectAll(`#label-${this.active_zip[this.id_var]}`) // .filter(d => {console.log('label', d); return d.data[this.id_var] == this.active_zip[this.id_var]}) .attr("visibility", "visible") d3.selectAll('.polygon') .attr('stroke-width', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "5" : "1" ) .style('opacity', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? 1 : this.active_zip.locNeighbors.includes(d.properties[this.id_var]) ? 0.8 : 0.2 ) d3.selectAll('.tract') .select('path') .attr('stroke', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "black" : 'black' ) .attr('paint-order', 'stroke'); d3.selectAll('.tract') .filter(d => d.properties[this.id_var] == this.active_zip[this.id_var]) .raise() d3.selectAll('.tract') .filter(d => this.active_zip.locNeighbors.includes(d.properties[this.id_var])) .raise() } else { d3.selectAll('.polygon') .attr('stroke-width', 1) .style('opacity', 1); d3.selectAll('.cell') .select('circle') .attr('stroke', 'currentColor') .attr('stroke-width', 1) .style('opacity', 1); d3.selectAll('.tract') .select('path') .attr('stroke', 'black'); d3.selectAll('.label') .attr("visibility", "hidden") } } renderGraphic(){ const svg = d3.select(DOM.svg(width, 600)) .attr('color', '#999') .attr('font-family', "'Helvetica Neue', sans-serif") .attr('font-size', 12); const styleLabel = label => label .attr('text-anchor', 'middle') .attr('dominant-baseline', 'bottom') .attr('stroke-width', '2') .attr('fill', '#fff') .attr('paint-order', 'stroke') .attr('font-weight', 'bold') .attr('font-size', 14) .attr('pointer-events', 'none') .attr('visibility', 'hidden') .style('text-shadow', '0 0 3px #000, 0 0 3px #000'); const styleCircle = circle => circle .attr('stroke-width', 1) .attr('stroke', 'currentColor') .attr('stroke-opacity', 1) .attr('fill', 'currentColor') .attr('fill-opacity', 0.8); const stylePolygon = polygon => polygon .attr('stroke', '#999999') .attr('stroke-width', '0.05vw') .attr('stroke-linejoin', 'round') .attr('paint-order', 'normal'); let mapX = map_margin.left; let mapY = map_margin.top; if (is_narrow) { mapY += chart_offset.y + chart_height; } else { const mapHeight = height - map_margin.top - map_margin.bottom; const mapWidth = mapHeight * (2 - map_aspect_ratio); mapX = width - mapWidth - map_margin.right; } // MAP left const map = svg.append('g') .attr('transform', `translate(${50}, ${mapY-10})`) .attr('class', 'map'); const tracts = map .selectAll('g') .data(geojson.features) .join('g') .attr('class', 'tract') .attr('cursor', 'pointer'); const geoPath = d3.geoPath(projection); const polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', d => this.colorScale(d.properties[this.colorVariable])) .attr('data-id', d => d.properties[this.id_var]) .attr('d', geoPath) .call(stylePolygon); const title = map.append('text') .attr('class', 'title') .attr('color', '#000') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('font-size', 20) .attr('font-weight', "bold") .attr('font-family', 'serif') .attr('x', 100) .attr('y', 20) .text("Natural Breaks Map"); //MAP right const map1 = svg.append('g') .attr('transform', `translate(${mapX-150}, ${mapY-10})`) .attr('class', 'map'); const tracts1 = map1 .selectAll('g') .data(this.geojson1.features) .join('g') .attr('class', 'tract') .attr('cursor', 'pointer'); const geoPath1 = d3.geoPath(projection); const polygons1 = tracts1 .append('path') .attr('class', 'polygon') .attr('fill', d => this.colorScale1(d.properties[this.colorVariable1])) .attr('data-id', d => d.properties[this.id_var]) .attr('d', geoPath1) .call(stylePolygon); const title1 = map1.append('text') .attr('class', 'title') .attr('color', '#000') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('font-size', 20) .attr('font-weight', "bold") .attr('font-family', 'serif') .attr('x', 100) .attr('y', 20) .text("Cluster Map"); // LEGEND left const options = Object.assign({ color: this.ordinalLabels.length ? d3.scaleOrdinal(this.ordinalLabels, this.colorBins) : this.colorScale, }); const legendSVG = legend(options); const legendWidth = +d3.select(legendSVG).attr('width'); const legendHeight = +d3.select(legendSVG).attr('height'); const legendNode = svg.append('g') .attr('transform', `translate(${110}, ${mapY+400})`); Array.from(legendSVG.children).forEach((child) => { legendNode.node().appendChild(child); }); legendNode.select('g').selectAll('text') .filter(function() { return d3.select(this).attr('font-weight') === 'bold'; }) .attr('font-size', 14); //LEGEND right const legendNode1 = svg.append('g') this.ordinalLabels1.forEach((d, i) => { if (i%2==0){ legendNode1.append('rect') .attr('x',i*60+mapX-150) .attr('y',mapY+420) .attr('width', 20) .attr('height',20) .attr('fill', this.colorBins1[i]); legendNode1.append('text') .attr('x',i*60+mapX-125) .attr('y',mapY+420) .attr("dy", "1.1em") .text(() => this.ordinalLabels1[i]); } else{ legendNode1.append('rect') .attr('x',(i-1)*60+mapX-150) .attr('y',mapY+440) .attr('width', 20) .attr('height',20) .attr('fill', this.colorBins1[i]); legendNode1.append('text') .attr('x',(i-1)*60+mapX-125) .attr('y',mapY+440) .attr("dy", "1.1em") .text(() => this.ordinalLabels1[i]); } }) tracts .append('text') .attr('class', 'label') .text(d => d.properties[this.id_var]) .attr('x', d => geoPath.centroid(d)[0]) .attr('id', d => `label-${d.properties[this.id_var]}`) .attr('y', d => geoPath.bounds(d)[0][1] - 3) .call(styleLabel); tracts1 .append('text') .attr('class', 'label') .text(d => d.properties[this.id_var]) .attr('x', d => geoPath1.centroid(d)[0]) .attr('id', d => `label-${d.properties[this.id_var]}`) .attr('y', d => geoPath1.bounds(d)[0][1] - 3) .call(styleLabel); [[tracts1, d => d.properties], [tracts, d => d.properties]] .forEach(([els, accessor]) => { els .on('mouseover', (data) => { if (this.lock_active_zip) return; const zip = accessor(data); // if (zip.population) { if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.active_zip = zip; this.update() } }) .on('mouseout', () => { if (this.lock_active_zip) return; this.mouseoutTimeout = setTimeout(() => { this.active_zip = undefined; this.update() }, 100); }) .on('click', (data) => { const zip = accessor(data); console.log(zip) if (this.lock_active_zip && this.active_zip === zip) { this.lock_active_zip = false; this.active_zip = undefined; this.neighborTarget = undefined; this.update() } else if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.lock_active_zip = true; this.active_zip = zip; this.neighborTarget = zip.locNeighbors; this.update() } }); }); polygons .attr('fill', d => { //console.log(this.colorScale(d.properties[this.encoding.c])) return this.colorScale(d.properties[this.encoding.c]) //d.properties[this.encoding.c]) }) this.rendered = true; return Object.assign(html`

${[svg.node()]}

`); } }34:T36e5,class LinkedContiguityMap { constructor({ geojson={}, geojson1={}, conn={}, data={}, colorBins=[], weightType='', breaks=[], ordinalLabels=[], id_var='', colorVariable='', colorSig = '', column = '', sigVar = '', chartTitle = '', }){ this.geojson= geojson; this.geojson1 = geojson1; this.data=data; this.conn = conn; this.weightType = weightType; this.colorBins=colorBins; this.breaks=breaks; this.ordinalLabels=ordinalLabels; this.id_var=id_var; this.colorVariable=colorVariable; this.column = column; this.rendered = false; this.transitionTime = 25; this.colorScale = d3.scaleThreshold() .domain(breaks) .range(colorBins); this.colorScaleSig = d3.scaleThreshold() .domain([1,2,3,4,5,6]) .range(colorSig); this.encoding = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.encodingDefaults = { x: 'stdVal', y: 'spatialLag', c: colorVariable, sig: sigVar, }; this.lock_active_zip=false; this.active_zip=null; this.neighborTarget=[]; // Default data types as expecting for methods like .includes() ! this.mouseoutTimeout=null; this.title = chartTitle; } update(){ d3.selectAll('.label') .attr("visibility", "hidden") if (this.active_zip !== undefined){ d3.selectAll(`#label-${this.active_zip[this.id_var]}`) // .filter(d => {console.log('label', d); return d.data[this.id_var] == this.active_zip[this.id_var]}) .attr("visibility", "visible") d3.selectAll('.polygon') .attr('stroke-width', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "5" : "1" ) .style('opacity', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? 1 : this.active_zip.locNeighbors.includes(d.properties[this.id_var]) ? 0.8 : 0.2 ) d3.selectAll('.tract') .select('path') .attr('stroke', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "black" : 'black' ) .attr('paint-order', 'stroke'); d3.selectAll('.tract') .filter(d => d.properties[this.id_var] == this.active_zip[this.id_var]) .raise() d3.selectAll('.tract') .filter(d => this.active_zip.locNeighbors.includes(d.properties[this.id_var])) .raise() //contiguity map d3.selectAll('.tract1') .filter(d => d.properties[this.id_var] == this.active_zip[this.id_var]) .raise() d3.selectAll('.polygon1') // .attr('stroke-width', d => d.properties[this.id_var] == this.active_zip[this.id_var] // ? "5" : "1" // ) .attr('fill', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? "yellow" : this.active_zip.locNeighbors.includes(d.properties[this.id_var]) ? "#999999" : "white" ) .style('opacity', d => d.properties[this.id_var] == this.active_zip[this.id_var] ? 0.5 : this.active_zip.locNeighbors.includes(d.properties[this.id_var]) ? 0.5 : 1 ) d3.selectAll('.tract1') .filter(d => d.properties[this.id_var] == this.active_zip[this.id_var]) .lower() } else { d3.selectAll('.tract').lower() d3.selectAll('.polygon').lower() d3.selectAll('.polygon') .attr('stroke-width', 1) .style('opacity', 1) d3.selectAll('.polygon1') .attr('fill', "white") .style('opacity', 1) d3.selectAll('.tract') .select('path') .attr('stroke', 'black'); // contiguity d3.selectAll('.tract1').lower() d3.selectAll('.label') .attr("visibility", "hidden") } } renderGraphic(){ const svg = d3.select(DOM.svg(width, 600)) .attr('color', '#999') .attr('font-family', "'Helvetica Neue', sans-serif") .attr('font-size', 12); const styleLabel = label => label .attr('text-anchor', 'middle') .attr('dominant-baseline', 'bottom') .attr('stroke-width', '2') .attr('fill', '#fff') .attr('paint-order', 'stroke') .attr('font-weight', 'bold') .attr('font-size', 14) .attr('pointer-events', 'none') .attr('visibility', 'hidden') .style('text-shadow', '0 0 3px #000, 0 0 3px #000'); const styleCircle = circle => circle .attr('stroke-width', 1) .attr('stroke', 'currentColor') .attr('stroke-opacity', 1) .attr('fill', 'currentColor') .attr('fill-opacity', 0.8); const stylePolygon = polygon => polygon .attr('stroke', 'black') .attr('stroke-width', '0.05vw') .attr('stroke-linejoin', 'round') .attr('paint-order', 'normal'); let mapX = map_margin.left; let mapY = map_margin.top; if (is_narrow) { mapY += chart_offset.y + chart_height; } else { const mapHeight = height - map_margin.top - map_margin.bottom; const mapWidth = mapHeight * (2 - map_aspect_ratio); mapX = width - mapWidth - map_margin.right; } //MAP 1 (contiguity) const map1 = svg.append('g') .attr('transform', `translate(${50}, ${mapY-10})`) .attr('class', 'map'); const tracts1 = map1 .selectAll('g') .data(this.geojson1.features) .join('g') .attr('class', 'tract1') .attr('cursor', 'pointer'); const geoPath1 = d3.geoPath(projection); const polygons1 = tracts1 .append('path') .attr('class', 'polygon1') .attr('fill', 'white') .attr('data-id', d => d.properties[this.id_var]) .attr('d', geoPath1) .call(stylePolygon); const circles = map1 .append('g') .attr('class', 'circle'); circles .selectAll('circle') .data(this.conn.targets) .enter() .append("circle") .attr('cx', d => { return projection(d.position)[0]; }) .attr('cy', d => { return projection(d.position)[1]; }) .attr('r', 3) .attr('color','orange'); const arcs = map1 .append("g") .attr("class","arcs"); arcs.selectAll("path") .data(this.conn.arcs) .enter() .append("path") .attr('d', d => {console.log(d); return lngLatToArc(d, d.source, d.target); }) const title = map1.append('text') .attr('class', 'title') .attr('color', '#000') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('font-size', 20) .attr('font-weight', "bold") .attr('font-family', 'serif') .attr('x', 230) .attr('y', mapY+400) .text(this.weightType+ " Contiguity"); // MAP original const map = svg.append('g') .attr('transform', `translate(${mapX-150}, ${mapY-10})`) .attr('class', 'map'); const tracts = map .selectAll('g') .data(geojson.features) .join('g') .attr('class', 'tract') .attr('cursor', 'pointer'); const geoPath = d3.geoPath(projection); const polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', d => this.colorScale(d.properties[this.encodingDefaults.c])) .attr('data-id', d => d.properties[this.id_var]) .attr('d', geoPath) .call(stylePolygon); // LEGEND const options = Object.assign({ color: this.ordinalLabels.length ? d3.scaleOrdinal(this.ordinalLabels, this.colorBins) : this.colorScale, }); const legendSVG = legend(options); const legendWidth = +d3.select(legendSVG).attr('width'); const legendHeight = +d3.select(legendSVG).attr('height'); const legendNode = svg.append('g') .attr('transform', `translate(${mapX-80}, ${mapY+400})`); Array.from(legendSVG.children).forEach((child) => { legendNode.node().appendChild(child); }); legendNode.select('g').selectAll('text') .filter(function() { return d3.select(this).attr('font-weight') === 'bold'; }) .attr('font-size', 14); tracts .append('text') .attr('class', 'label') .text(d => d.properties[this.id_var]) .attr('x', d => geoPath.centroid(d)[0]) .attr('id', d => `label-${d.properties[this.id_var]}`) .attr('y', d => geoPath.bounds(d)[0][1] - 3) .call(styleLabel); tracts1 .append('text') .attr('class', 'label') .text(d => d.properties[this.id_var]) .attr('x', d => geoPath1.centroid(d)[0]) .attr('id', d => `label-${d.properties[this.id_var]}`) .attr('y', d => geoPath1.bounds(d)[0][1] - 3) .call(styleLabel); [[tracts1, d => d.properties], [tracts, d => d.properties]] .forEach(([els, accessor]) => { els .on('mouseover', (data) => { if (this.lock_active_zip) return; const zip = accessor(data); // if (zip.population) { if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.active_zip = zip; this.update() } }) .on('mouseout', () => { if (this.lock_active_zip) return; this.mouseoutTimeout = setTimeout(() => { this.active_zip = undefined; this.update() }, 100); }) .on('click', (data) => { const zip = accessor(data); console.log(zip) if (this.lock_active_zip && this.active_zip === zip) { this.lock_active_zip = false; this.active_zip = undefined; this.neighborTarget = undefined; this.update() } else if (zip[column]) { clearTimeout(this.mouseoutTimeout); this.lock_active_zip = true; this.active_zip = zip; this.neighborTarget = zip.locNeighbors; this.update() } }); }); // const t = svg.transition().duration(this.rendered ? 300 : 0); // x.domain(d3.extent(data, d => d[this.encoding.x])); // //[d3.extent(data, d => d[this.encoding.x])[0]-1, d3.extent(data, d => d[this.encoding.x])[1]] // y.domain(d3.extent(data, d => d[this.encoding.y])); // //this.colorScale.domain(d3.extent(data, d => d[this.encoding.c])); // //size.domain(d3.extent(data, d => d[this.encoding.s])); // voronoi.x(d => x(d[this.encoding.x])).y(d => y(d[this.encoding.y])); // linear_regression.x(d => d[this.encoding.x]).y(d => d[this.encoding.y]); // const regression = linear_regression(data); // xLabel.text(`${column} (Standardized) ⟶`); // yLabel.text(`Spatially Lagged ${column} ⟶`); // cells // .data(voronoi(data).polygons(), d => d && d.data && d.data[id_var]) // .join('g'); // cells.selectAll('path').remove(); // cells // .append('path') // .attr('d', d => d && d.join && `M${d.join('L')}Z`) // .attr('fill', 'none') // // .attr('stroke', 'red') // .attr('pointer-events', 'all'); // labels // .attr('x', d => d && d.data && x(d.data[this.encoding.x])) // .attr('y', d => d && d.data && y(d.data[this.encoding.y])); // line // .datum(regression) // .attr('x1', d => x(d[0][0])) // .attr('x2', d => x(d[1][0])) // .attr('y1', d => y(d[0][1])) // .attr('y2', d => y(d[1][1])); // yBase // .attr('x1', d => x(0)) // .attr('x2', d => x(0)) // .attr('y1', d => y(d3.extent(this.data, d => d[this.encoding.y])[0])) // .attr('y2', d => y(d3.extent(this.data, d => d[this.encoding.y])[1])); // xBase // .attr('x1', d => x(d3.extent(this.data, d => d[this.encoding.x])[0])) // .attr('x2', d => x(d3.extent(this.data, d => d[this.encoding.x])[1])) // .attr('y1', d => y(0)) // .attr('y2', d => y(0)); polygons .attr('fill', d => { //console.log(this.colorScale(d.properties[this.encoding.c])) return this.colorScale(d.properties[this.encoding.c]) //d.properties[this.encoding.c]) }) this.rendered = true; // tracts.attr('class', 'tract').select('text').attr('visibility', 'hidden'); // cells.attr('class', 'cell').select('text').attr('visibility', 'hidden'); // circles.call(styleCircle); // polygons.call(stylePolygon); // line.raise(); // if (active_zip) { // [[cells, 'cell', x => x.data[id_var]], [tracts, 'tract', x => x.properties[id_var]]] // .forEach(([els, className, accessor]) => els // .filter(d => { // return (accessor(d) === active_zip[id_var]) // }) // .attr('class', `${className} active`) // .raise() // .filter((_, i) => !i) // .attr('class', `${className} active`) // .select('text') // .attr('visibility', 'visible')); // cells // .filter('.active') // .select('circle') // .attr('fill-opacity', 1) // .attr('stroke', '#000') // .attr('stroke-opacity', 1) // .attr('stroke-width', 2); // tracts // .filter('.active') // .select('path') // .attr('stroke', '#000') // .attr('stroke-width', 4) // .attr('paint-order', 'stroke'); return Object.assign(html`

${[svg.node()]}

`); } }35:T457,function lngLatToArc(d, sourceLngLat, targetLngLat, bend){ // If no bend is supplied, then do the plain square root bend = bend || 1; // `d[sourceName]` and `d[targetname]` are arrays of `[lng, lat]` // Note, people often put these in lat then lng, but mathematically we want x then y which is `lng,lat` if (targetLngLat && sourceLngLat) { let sourceXY = projection( sourceLngLat ), targetXY = projection( targetLngLat ); let sourceX = sourceXY[0], sourceY = sourceXY[1]; let targetX = targetXY[0], targetY = targetXY[1]; let dx = targetX - sourceX, dy = targetY - sourceY, dr = Math.sqrt(dx * dx + dy * dy)*5; //To avoid a whirlpool effect, make the bend direction consistent regardless of whether the source is east or west of the target let west_of_source = (targetX - sourceX) < 0; if (west_of_source) return "M" + targetX + "," + targetY + "A" + dr + "," + dr + " 0 0,1 " + sourceX + "," + sourceY; return "M" + sourceX + "," + sourceY + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY; } else { return "M0,0,l0,0z"; } }36:[{"id":"602dde7c42338e81f502e2dc7d76e911439faf63cc6e6b83a67a4d82e46c154a1f729feeabe2e981b92e1286af2e7036e51f22aed9d1bf7bf3c8cc17dd4e19f9","href":"https://static.observableusercontent.com/files/602dde7c42338e81f502e2dc7d76e911439faf63cc6e6b83a67a4d82e46c154a1f729feeabe2e981b92e1286af2e7036e51f22aed9d1bf7bf3c8cc17dd4e19f9","name":"guerry_wgs84@1.geojson","type":"application/geo+json","lastModified":1624902237362.622,"size":1955249},{"id":"602dde7c42338e81f502e2dc7d76e911439faf63cc6e6b83a67a4d82e46c154a1f729feeabe2e981b92e1286af2e7036e51f22aed9d1bf7bf3c8cc17dd4e19f9","href":"https://static.observableusercontent.com/files/602dde7c42338e81f502e2dc7d76e911439faf63cc6e6b83a67a4d82e46c154a1f729feeabe2e981b92e1286af2e7036e51f22aed9d1bf7bf3c8cc17dd4e19f9","name":"guerry_wgs84.geojson","type":"application/geo+json","lastModified":1624902237362.622,"size":1955249}] 30:{"id":"f5c5e02d1da90386","slug":"linked-interactive-class","title":"Linked Interactive CLASS","thumbnail":"d262070c51fe653e559fae233f0bf0da19716d6193bc9691ac98b815d902cc6f","access_level":"public","create_time":"$D2021-06-28T17:43:57.362Z","update_time":"$D2021-07-08T16:23:13.830Z","view_time":null,"first_public_time":"$D2021-06-29T18:10:56.882Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"15b3ab74dfe1e757","login":"michelleeesi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/521e99898bc8a5a4f7b2843746e29253e7305c565383c4eb1d1ec2c236b696c9","tier":"starter_2024"},"version":5029,"publish_version":5029,"role":null,"authored":false,"authors":[{"type":"individual","id":"22090083f3a72824","login":"michelleeesi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/521e99898bc8a5a4f7b2843746e29253e7305c565383c4eb1d1ec2c236b696c9","tier":null}],"members":[{"type":"individual","id":"22090083f3a72824","login":"michelleeesi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/521e99898bc8a5a4f7b2843746e29253e7305c565383c4eb1d1ec2c236b696c9","tier":null,"role":"editor"},{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null,"role":"editor"}],"comments":[{"id":"ba0843f669d1d82a","reply_to_id":null,"content":"thx!","create_time":"$D2021-06-28T22:19:37.647Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Linked Interactive CLASS","cells":[{"id":0,"value":"# Linked Interactive CLASS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"mutable active_zip = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3570,"value":"mutable lock_active_zip = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4288,"value":"mutable neighborTarget = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4293,"value":"mutable currId = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4420,"value":"md`# Class Implementation\n~~Welp, it's happening.~~ \nWe did it\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4445,"value":"classInteractive.renderGraphic()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4715,"value":"breaks_colors = [\"#fffedb\",\"#ffe7a1\", \"#ffcd60\", \"#ffa934\", \"#e27510\", \"#ab4603\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4726,"value":"breaks_col = geoda.naturalBreaks(6, column_selected)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4441,"value":"classInteractive = new LinkedInteractiveMap({\n data: data,\n geojson: geojson,\n breaks: breaks_col, // breaks for lisa values\n colorBins: breaks_colors,\n colorSig: lm.colors,\n column: column,\n ordinalLabels: breaks_col,\n colorVariable: 'Donatns',\n sigVar: 'cluster',\n id_var: id_var,\n chartTitle: 'Hello'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4632,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5010,"value":"mapsInteractive.renderGraphic()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5007,"value":"mapsInteractive = new LinkedMap({\n data: data,\n geojson: geojson,\n geojson1: geojson,\n breaks: breaks_col, \n breaks1: [1,2,3,4,5,6,7],\n colorBins: breaks_colors,\n colorBins1: lm.colors,\n colorSig: lm.colors,\n column: column,\n ordinalLabels: breaks_col,\n ordinalLabels1: lm.labels,\n colorVariable: 'Donatns',\n colorVariable1: 'cluster',\n sigVar: 'cluster',\n id_var: id_var,\n chartTitle: 'Hello'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5001,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"geojson = await FileAttachment(\"guerry_wgs84.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"// Use only unique zip codes with both testing and income data\ndata_inc = d3.groups(geojson.features, d => d.properties[id_var])\n .map(([, [{ properties }]]) => properties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4075,"value":"data = {\n for (let i=0; i neighbors[f]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4935,"value":"projection(conn.targets[0].position)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4888,"value":"conn = geoda.getConnectivity(weights, mapId)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4184,"value":"// import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4857,"value":"import {callout} from '@d3/line-chart-with-tooltip'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4349,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4255,"value":"function getNeighbors(geojsonData, idCol, weights){\n let neighborsObj = {}\n // loop through\n for (let i=0; i geojsonData.features[i].properties[idCol]))]\n }\n \n return neighborsObj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4257,"value":"neighbors = getNeighbors(geojson, id_var, weights)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":"attachment_array = FileAttachment(\"guerry_wgs84@1.geojson\").arrayBuffer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4055,"value":"mapId = geoda.readGeoJSON(attachment_array)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4057,"value":"weights = geoda.getQueenWeights(mapId)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4038,"value":"id_var = 'dept'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4060,"value":"column = 'Donatns'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4063,"value":"column_selected = geoda.getColumn(mapId, column)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4062,"value":"lm = geoda.localMoran(weights, column_selected)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4069,"value":"std_vals = standardize(column_selected)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4071,"value":"spatial_lags = geoda.spatialLag(weights, std_vals)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3531,"value":"is_narrow = width <= 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = 450\n/*\n{\n if (is_narrow) {\n const mapHeight = width * map_aspect_ratio;\n return chart_offset.y + chart_height + map_margin.top + mapHeight + map_margin.bottom;\n }\n\n return Math.round(width / 1.618);\n}\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3537,"value":"chart_offset = is_narrow\n ? ({ x: 15, y: 140 })\n : ({ x: 35, y: 14 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"chart_width = 400\n //is_narrow ? width - chart_offset.x : Math.round(width * 0.48)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"chart_height = 300\n //Math.round(chart_width / (is_narrow ? 1.3 : 1.618))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"chart_margin = is_narrow\n ? ({ top: 20, right: chart_width * 0.04, bottom: 20, left: 20 })\n : ({ top: 20, right: 30, bottom: 20, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4067,"value":"function standardize(arr){ // used to standardize column values as # of stdev away from the mean\n const avg = ss.mean(arr);\n const stdev = ss.standardDeviation(arr);\n return arr.map(val => {\n return ss.zScore(val, avg, stdev);\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4001,"value":"map_aspect_ratio = 587.09 / 590.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2566,"value":"map_margin = is_narrow\n ? ({ top: 60, right: 2, bottom: 2, left: 2 })\n : ({ top: 50, right: 8, bottom: 2, left: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"encoding_options = [\n { label: 'Donations', value: 'Donatns', format: ',d', suffix: '', right: 'More donations' },\n { label: 'Standardized', value: 'stdVal', format: ',d', suffix: '', right: 'More donations' },\n { label: 'Lisa', value: 'lisaValue', format: ',d', suffix: '', right: 'More' },\n { label: 'Spatial Lag', value: 'spatialLag', format: ',d', suffix: '', right: 'More' },\n { label: 'Cluster', value: 'cluster', format: ',d', suffix: '', right: 'More' }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"x = d3.scaleLinear()\n .range([chart_margin.left, chart_width - chart_margin.right])\n .domain(d3.extent(data, d => d[column]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"y = d3.scaleLinear()\n .range([chart_height - chart_margin.bottom, chart_margin.top])\n .domain(d3.extent(data, d => d.spatialLag))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4163,"value":"breaks = geoda.naturalBreaks(6, data.map(o => o[column]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"size = d3.scaleSqrt()\n .range([\n chart_width * (is_narrow ? 0.013 : 0.008),\n chart_width * (is_narrow ? 0.03 : 0.02),\n ])\n .domain(d3.extent(data, d => d[column]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"linear_regression = d3.regressionLinear()\n .x(d => d[column])\n .y(d => d.spatialLag)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"voronoi = d3.voronoi()\n .extent([[0, 0], [chart_width, chart_height]])\n .x(d => x(d[column]))\n .y(d => y(d.spatialLag))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3705,"value":"style_axis = (axis, x, y) => {\n const text = axis.selectAll('.tick text:first-of-type');\n\n text.style('text-anchor', 'start');\n\n if (x !== undefined) text.attr('x', x);\n if (y !== undefined) text.attr('y', y);\n\n axis.selectAll('.tick line')\n .attr('color', 'lightgrey')\n .attr('stroke-width', 1)\n .attr('stroke-linecap', 'round');\n \n\n axis.selectAll('.domain').remove();\n\n return axis;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"x_axis = format => g => g\n .attr('transform', `translate(0, ${chart_height})`)\n .attr('class', 'axis x')\n .call(d3.axisBottom(x).ticks(5, format).tickSize(-chart_height).tickPadding(0))\n .call(el => style_axis(el, '0.5em', '-1em'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"y_axis = format => g => g\n .attr('class', 'axis y')\n .call(d3.axisLeft(y).ticks(5, format).tickSize(-chart_width).tickPadding(0))\n .call(el => style_axis(el, undefined, '-0.7em'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"format_percent = d3.format('.2%')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"format_int = d3.format(',d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"projection = {\n const projection = d3.geoMercator();\n\n if (is_narrow) projection.fitWidth(width - map_margin.left - map_margin.right, geojson);\n else projection.fitHeight(height - map_margin.top - map_margin.bottom, geojson);\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2557,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4044,"value":"geoda = await jsgeoda.New()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"jsgeoda = import('https://cdn.skypack.dev/jsgeoda')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4049,"value":"ss = require('simple-statistics')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"import { select, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"// import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"