viewof exportPlotChoroplethGeoImpact = { const t = nbText.export.geoImpact; // Helper: Download blob const downloadBlob = (blob, filename) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.style.display = 'none'; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 100); }; // Helper: Show notification const showNotification = (message, isError = false) => { const notification = html`

${message}

`; document.body.appendChild(notification); setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, isError ? 5000 : 3000); }; // Helper: Download as SVG const downloadAsSvg = (svg, filename) => { const clone = svg.cloneNode(true); const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(clone); const blob = new Blob([svgString], { type: 'image/svg+xml' }); downloadBlob(blob, filename); }; // Helper: Download as raster (PNG/JPEG) const downloadAsRaster = (svg, filename, format) => { return new Promise((resolve, reject) => { const clone = svg.cloneNode(true); const serializer = new XMLSerializer(); let svgString = serializer.serializeToString(clone); if (!svgString.includes('\n' + svgString; } const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const url = URL.createObjectURL(svgBlob); const img = new Image(); const rect = svg.getBoundingClientRect(); const width = rect.width || 900; const height = rect.height || 600; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; // Fill with white background for both PNG and JPEG ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); img.onload = () => { try { ctx.drawImage(img, 0, 0, width, height); URL.revokeObjectURL(url); canvas.toBlob( (blob) => { if (blob) { downloadBlob(blob, filename); resolve(); } else { reject(new Error('Failed to create blob from canvas')); } }, format === 'png' ? 'image/png' : 'image/jpeg', format === 'jpeg' || format === 'jpg' ? 0.92 : 1.0 ); } catch (drawError) { URL.revokeObjectURL(url); reject(new Error(`Failed to draw image: ${drawError.message}`)); } }; img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Failed to load SVG image')); }; img.src = url; }); }; // Helper: Download as CSV const downloadAsCsv = (data, filename) => { if (!data || data.length === 0) { throw new Error(_lang(t.noDataAvailable)); } const headers = Object.keys(data[0]); const csvRows = []; csvRows.push(headers.join(',')); for (const row of data) { const values = headers.map(header => { const value = row[header]; if (value === null || value === undefined) return ''; const stringValue = String(value); if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) { return `"${stringValue.replace(/"/g, '""')}"`; } return stringValue; }); csvRows.push(values.join(',')); } const csvContent = csvRows.join('\n'); const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); downloadBlob(blob, filename); }; // Helper: Download as JSON const downloadAsJson = (data, filename) => { const jsonString = JSON.stringify(data, null, 2); const blob = new Blob([jsonString], { type: 'application/json' }); downloadBlob(blob, filename); }; // Helper: Download as GeoJSON const downloadAsGeoJson = (geojson, filename) => { const jsonString = JSON.stringify(geojson, null, 2); const blob = new Blob([jsonString], { type: 'application/geo+json' }); downloadBlob(blob, filename); }; // Helper: Download as Shapefile (pure-JS binary generation) const downloadAsShapefile = (geojson, filename) => { const crcTable = (() => { const tb = new Uint32Array(256); for (let i = 0; i < 256; i++) { let c = i; for (let j = 0; j < 8; j++) c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1); tb[i] = c; } return tb; })(); const crc32 = (data) => { let crc = 0xFFFFFFFF; for (let i = 0; i < data.length; i++) crc = crcTable[(crc ^ data[i]) & 0xFF] ^ (crc >>> 8); return (crc ^ 0xFFFFFFFF) >>> 0; }; const enc = new TextEncoder(); const buildShapefiles = (features) => { const geomType = (() => { for (const f of features) { if (!f.geometry) continue; const tp = f.geometry.type; if (tp === 'Point' || tp === 'MultiPoint') return 1; if (tp === 'LineString' || tp === 'MultiLineString') return 3; if (tp === 'Polygon' || tp === 'MultiPolygon') return 5; } return 5; })(); const records = []; let bbox = [Infinity, Infinity, -Infinity, -Infinity]; for (const f of features) { const geom = f.geometry; if (!geom) { records.push(null); continue; } let rings = []; if (geomType === 5) { if (geom.type === 'Polygon') rings = geom.coordinates; else if (geom.type === 'MultiPolygon') rings = geom.coordinates.flat(1); } else if (geomType === 3) { if (geom.type === 'LineString') rings = [geom.coordinates]; else if (geom.type === 'MultiLineString') rings = geom.coordinates; } else { rings = [geom.type === 'Point' ? [geom.coordinates] : geom.coordinates]; } const allPts = rings.flat(); let fb = [Infinity, Infinity, -Infinity, -Infinity]; for (const [x, y] of allPts) { fb[0] = Math.min(fb[0], x); fb[1] = Math.min(fb[1], y); fb[2] = Math.max(fb[2], x); fb[3] = Math.max(fb[3], y); bbox[0] = Math.min(bbox[0], x); bbox[1] = Math.min(bbox[1], y); bbox[2] = Math.max(bbox[2], x); bbox[3] = Math.max(bbox[3], y); } records.push({ rings, bbox: fb, numPts: allPts.length }); } if (!isFinite(bbox[0])) bbox = [0, 0, 0, 0]; const shxSize = 100 + records.length * 8; let shpContentLen = 100; for (const r of records) { if (!r) { shpContentLen += 12; continue; } if (geomType === 1) { shpContentLen += 4 + 16; } else { shpContentLen += 8 + 4 + 32 + 8 + r.rings.length * 4 + r.numPts * 16; } } const shp = new DataView(new ArrayBuffer(shpContentLen)); const shx = new DataView(new ArrayBuffer(shxSize)); const writeHeader = (dv, fileLen) => { dv.setInt32(0, 9994, false); dv.setInt32(24, fileLen / 2, false); dv.setInt32(28, 1000, true); dv.setInt32(32, geomType, true); dv.setFloat64(36, bbox[0], true); dv.setFloat64(44, bbox[1], true); dv.setFloat64(52, bbox[2], true); dv.setFloat64(60, bbox[3], true); }; writeHeader(shp, shpContentLen); writeHeader(shx, shxSize); let shpOff = 100, shxOff = 100; for (let i = 0; i < records.length; i++) { const r = records[i]; const recNum = i + 1; shx.setInt32(shxOff, shpOff / 2, false); if (!r) { shp.setInt32(shpOff, recNum, false); shp.setInt32(shpOff + 4, 2, false); shp.setInt32(shpOff + 8, 0, true); shx.setInt32(shxOff + 4, 2, false); shpOff += 12; shxOff += 8; continue; } if (geomType === 1) { const cLen = (4 + 16) / 2; shp.setInt32(shpOff, recNum, false); shp.setInt32(shpOff + 4, cLen, false); shp.setInt32(shpOff + 8, 1, true); shp.setFloat64(shpOff + 12, r.rings[0][0][0], true); shp.setFloat64(shpOff + 20, r.rings[0][0][1], true); shx.setInt32(shxOff + 4, cLen, false); shpOff += 8 + cLen * 2; shxOff += 8; } else { const numParts = r.rings.length, numPts = r.numPts; const cBytes = 4 + 32 + 8 + numParts * 4 + numPts * 16; const cLen = cBytes / 2; shp.setInt32(shpOff, recNum, false); shp.setInt32(shpOff + 4, cLen, false); let p = shpOff + 8; shp.setInt32(p, geomType, true); p += 4; shp.setFloat64(p, r.bbox[0], true); p += 8; shp.setFloat64(p, r.bbox[1], true); p += 8; shp.setFloat64(p, r.bbox[2], true); p += 8; shp.setFloat64(p, r.bbox[3], true); p += 8; shp.setInt32(p, numParts, true); p += 4; shp.setInt32(p, numPts, true); p += 4; let ptIdx = 0; for (const ring of r.rings) { shp.setInt32(p, ptIdx, true); p += 4; ptIdx += ring.length; } for (const ring of r.rings) for (const [x, y] of ring) { shp.setFloat64(p, x, true); p += 8; shp.setFloat64(p, y, true); p += 8; } shx.setInt32(shxOff + 4, cLen, false); shpOff += 8 + cBytes; shxOff += 8; } } return { shp: new Uint8Array(shp.buffer), shx: new Uint8Array(shx.buffer) }; }; const buildDbf = (features) => { const allKeys = new Set(); for (const f of features) if (f.properties) Object.keys(f.properties).forEach(k => allKeys.add(k)); const fields = Array.from(allKeys).map(k => ({ name: k.substring(0, 10), key: k })); const headerSize = 32 + fields.length * 32 + 1; const recordSize = 1 + fields.length * 10; const buf = new Uint8Array(headerSize + features.length * recordSize); const dv = new DataView(buf.buffer); buf[0] = 3; const now = new Date(); buf[1] = now.getFullYear() - 1900; buf[2] = now.getMonth() + 1; buf[3] = now.getDate(); dv.setUint32(4, features.length, true); dv.setUint16(8, headerSize, true); dv.setUint16(10, recordSize, true); let off = 32; for (const f of fields) { const nb = enc.encode(f.name); buf.set(nb.subarray(0, Math.min(nb.length, 10)), off); buf[off + 11] = 67; dv.setUint8(off + 16, 10); off += 32; } buf[off++] = 0x0D; for (const f of features) { buf[off++] = 0x20; for (const field of fields) { const val = f.properties ? String(f.properties[field.key] ?? '') : ''; const vb = enc.encode(val.substring(0, 10).padEnd(10, ' ')); buf.set(vb, off); off += 10; } } return buf; }; const buildPrj = () => enc.encode('GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]'); const buildZip = (files) => { const localHeaders = []; let off = 0; const parts = []; for (const file of files) { const nameBuf = enc.encode(file.name); const crc = crc32(file.data); const lh = new Uint8Array(30 + nameBuf.length); const lv = new DataView(lh.buffer); lv.setUint32(0, 0x04034b50, true); lv.setUint16(4, 20, true); lv.setUint32(14, crc, true); lv.setUint32(18, file.data.length, true); lv.setUint32(22, file.data.length, true); lv.setUint16(26, nameBuf.length, true); lh.set(nameBuf, 30); localHeaders.push({ offset: off, nameBuf, crc, size: file.data.length }); parts.push(lh, file.data); off += lh.length + file.data.length; } const cdOffset = off; for (let i = 0; i < files.length; i++) { const { offset, nameBuf, crc, size } = localHeaders[i]; const ch = new Uint8Array(46 + nameBuf.length); const cv = new DataView(ch.buffer); cv.setUint32(0, 0x02014b50, true); cv.setUint16(4, 20, true); cv.setUint16(6, 20, true); cv.setUint32(16, crc, true); cv.setUint32(20, size, true); cv.setUint32(24, size, true); cv.setUint16(28, nameBuf.length, true); cv.setUint32(42, offset, true); ch.set(nameBuf, 46); parts.push(ch); off += ch.length; } const cdSize = off - cdOffset; const eocd = new Uint8Array(22); const ev = new DataView(eocd.buffer); ev.setUint32(0, 0x06054b50, true); ev.setUint16(8, files.length, true); ev.setUint16(10, files.length, true); ev.setUint32(12, cdSize, true); ev.setUint32(16, cdOffset, true); parts.push(eocd); const total = parts.reduce((s, p) => s + p.length, 0); const zip = new Uint8Array(total); let pos = 0; for (const p of parts) { zip.set(p, pos); pos += p.length; } return zip; }; const { shp, shx } = buildShapefiles(geojson.features); const dbf = buildDbf(geojson.features); const prj = buildPrj(); const base = filename.replace(/\.[^.]+$/, ''); const zipData = buildZip([{ name: `${base}.shp`, data: shp }, { name: `${base}.shx`, data: shx }, { name: `${base}.dbf`, data: dbf }, { name: `${base}.prj`, data: prj }]); downloadBlob(new Blob([zipData], { type: 'application/zip' }), `${base}.zip`); showNotification(_lang(t.shapefileSuccess)); }; // Find Map SVG - simplified approach const findMap = () => { // First, try to find in the immediately previous cell const cells = Array.from(document.querySelectorAll('.observablehq--cell')); let currentCellIndex = -1; // Find the current export cell for (let i = 0; i < cells.length; i++) { if (cells[i].contains(select)) { currentCellIndex = i; break; } } // Look in the immediately previous cell first if (currentCellIndex > 0) { const prevCell = cells[currentCellIndex - 1]; if (prevCell) { const svg = prevCell.querySelector('svg'); if (svg) { // Check if it looks like a map (has many paths or is wide) const paths = svg.querySelectorAll('path'); const rect = svg.getBoundingClientRect(); // Maps typically have many path elements or are wide if (paths.length > 10 || rect.width > 500) { return svg; } } } } // Fallback: find all SVGs and pick the one that looks most like a map const allSvgs = Array.from(document.querySelectorAll('svg')); if (allSvgs.length > 0) { // Score each SVG based on map-like characteristics const scoredSvgs = allSvgs.map(svg => { const paths = svg.querySelectorAll('path'); const rect = svg.getBoundingClientRect(); const score = paths.length * 2 + (rect.width > 600 ? 100 : 0) + (rect.height > 400 ? 50 : 0); return { svg, score }; }); // Return the highest scoring SVG scoredSvgs.sort((a, b) => b.score - a.score); if (scoredSvgs[0].score > 50) { return scoredSvgs[0].svg; } } return null; }; // Get GeoJSON from mapDataGeoImpact const getGeoJson = () => { const selector = selectGeoDataType; const geojson = { type: "FeatureCollection", features: mapDataGeoImpact.features.map(feature => ({ type: "Feature", geometry: feature.geometry, properties: { ...feature.properties, // Include data values in properties for GIS software ...(feature.properties.data ? feature.properties.data : {}), // Preserve admin names admin0_name: feature.properties.admin0_name, admin1_name: feature.properties.admin1_name, admin2_name: feature.properties.admin2_name, admin3_name: feature.properties.admin3_name, admin_name: feature.properties.admin_name, // Include the selected data column value for easy styling in GIS [selector.dataColumn]: feature.properties.data && feature.properties.data[selector.dataColumn] !== undefined ? feature.properties.data[selector.dataColumn] : null } })) }; return geojson; }; // Get CSV data from GeoJSON features const getCsvData = () => { const selector = selectGeoDataType; return mapDataGeoImpact.features.map(feature => { const props = feature.properties; const data = props.data || {}; return { admin0_name: props.admin0_name || '', admin1_name: props.admin1_name || '', admin2_name: props.admin2_name || '', admin3_name: props.admin3_name || '', admin_name: props.admin_name || '', [selector.dataColumn]: data[selector.dataColumn] !== undefined ? data[selector.dataColumn] : null, // Include all other data columns ...Object.keys(data).reduce((acc, key) => { acc[`data_${key}`] = data[key]; return acc; }, {}) }; }); }; // Get JSON data (tabular format) const getJsonData = () => { return getCsvData(); }; // Main download function const downloadChart = async (format) => { // Add delay before finding SVG for image formats if (format === 'png' || format === 'jpeg' || format === 'jpg' || format === 'svg') { await new Promise(resolve => setTimeout(resolve, 300)); } const timestamp = new Date().toISOString().replace(/[:.]/g, '-').split('T')[0]; const selector = selectGeoDataType; const baseFilename = `geo-impact-map-${selector.dataColumn}-${timestamp}`; if (format === 'csv') { try { const csvData = getCsvData(); const filename = `${baseFilename}.csv`; downloadAsCsv(csvData, filename); showNotification(_lang(t.csvSuccess)); } catch (error) { console.error('CSV export failed:', error); showNotification(`${_lang(t.csvFailed)} ${error.message || error}`, true); } return; } if (format === 'json') { try { const jsonData = getJsonData(); const filename = `${baseFilename}.json`; downloadAsJson(jsonData, filename); showNotification(_lang(t.jsonSuccess)); } catch (error) { console.error('JSON export failed:', error); showNotification(`${_lang(t.jsonFailed)} ${error.message || error}`, true); } return; } if (format === 'geojson') { try { const geojson = getGeoJson(); const filename = `${baseFilename}.geojson`; downloadAsGeoJson(geojson, filename); showNotification(_lang(t.geojsonSuccess)); } catch (error) { console.error('GeoJSON export failed:', error); showNotification(`${_lang(t.geojsonFailed)} ${error.message || error}`, true); } return; } if (format === 'shp' || format === 'shapefile') { try { const geojson = getGeoJson(); downloadAsShapefile(geojson, baseFilename); } catch (error) { console.error('Shapefile export failed:', error); showNotification(`${_lang(t.shapefileFailed)} ${error.message || error}`, true); } return; } // Image formats (PNG, JPEG, SVG) const svg = findMap(); if (!svg) { const errorMsg = _lang(t.mapNotFound); console.error(errorMsg); showNotification(errorMsg, true); return; } const filename = `${baseFilename}.${format}`; try { if (format === 'svg') { downloadAsSvg(svg, filename); showNotification(_lang(t.exportSuccess)); } else { await downloadAsRaster(svg, filename, format); showNotification(_lang(t.exportSuccess)); } } catch (error) { console.error('Download failed:', error); showNotification(`${_lang(t.downloadFailed)} ${error.message || error}`, true); } }; // Create select element const select = html``; select.onchange = async (event) => { const format = event.target.value; if (format) { try { await downloadChart(format); event.target.value = ''; } catch (error) { console.error('Export error:', error); } } }; return html`

${_lang(t.title)}

${select}

• ${_lang(t.hintPng)}

• ${_lang(t.hintJpeg)}

• ${_lang(t.hintSvg)}

• ${_lang(t.hintCsv)}

• ${_lang(t.hintJson)}

• ${_lang(t.hintGeojson)}

• ${_lang(t.hintShp)}

`; }