31:Tcb0,map = svelte`

{#if !data || !data.length} {:else} {/if}

`32:Tcd8,_createMap = (id, props) => { return new Vue({ el: html`

`, data: { containerClass: {}, width: 1000, height: null, highlighted: null, selected: null, onClick() {}, onHover() {}, getStyles() { return {}; }, data: [], bbox: [0, 0, 1000, 150], ...props }, computed: { hght() { if (this.height) { return this.height; } const bbox = this.bbox; return Math.ceil(this.width * Math.sqrt((bbox[3] / bbox[2]) * 0.6)); }, highlightedArea() { return this.highlighted ? this.data.find(({ props }) => props.id === this.highlighted) : undefined; }, selectedArea() { return this.selected ? this.data.find(({ props }) => props.id === this.selected ): undefined; }, smallSelectedArea() { if (!this.selectedArea) { return undefined; } const { centroid, bounds, area } = this.selectedArea; const areaLimit = 40; if (area && area > areaLimit) { return undefined; } const minR = Math.max(15, Math.abs(bounds[0][0] - bounds[1][0]) * .66, Math.abs(bounds[0][1] - bounds[1][1]) * .66); return { x: centroid[0], y: centroid[1], r: Math.min(minR, 30) }; } }, methods: { select(area) { if (typeof this.onClick === 'function') { this.onClick(area); } }, highlight(area) { if (typeof this.onHover === 'function') { this.onHover(area); } }, areaStyle(d, highlighted, selected) { if (typeof this.getStyles === 'function') { return this.getStyles(d, { highlighted, selected }); } } } }) }33:[] 2f:{"title":"Svelte Map Component","cells":[{"id":0,"value":"md`# Svelte Map Component\nHighlightable & selectable map SVG component.\n\nCreated using [Svelte](https://svelte.dev) to be used with [COVID-19 visualisations](https://observablehq.com/@lounjukk/covid-19-corona-virus-deaths-per-1-000-000-people).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2754,"value":"md`## Detail map example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2718,"value":"viewof detailMapData = select({\n title: \"Choose data for detail map\",\n options: Object.keys(mapDataOptions).map(value => ({ label: mapDataOptions[value].title, value }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"detailMap = create('detail-map')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2726,"value":"currentMapData = mapDataOptions[detailMapData || 'us'].data","pinned":false,"hidden":false,"mode":"ojs"},{"id":2730,"value":"mapDataOptions = ({\n 'usa': { title: 'US (geoAlbersUsa)', data: await mapData.US() },\n 'china': { title: 'china (geoMercator)', data: await mapData.CN() }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3096,"value":"bindDetailMap = bindProps(detailMap, {\n data: currentMapData.data,\n bbox: currentMapData.bbox,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2761,"value":"md`## Hoverable & clickable map example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2387,"value":"mutable highlighted = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":2498,"value":"mutable selected = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":3010,"value":"worldMap = {\n return create('world-map', {\n containerClass: 'foo',\n getStyles({ id, population, ...t }, { highlighted, selected }) {\n let areaStyle = 'zIndex: 0;';\n if (highlighted) {\n // ...\n }\n if (selected) {\n // ... \n }\n if (population) {\n return `fill: ${scales.color(scales.value(population))};${areaStyle}`;\n }\n return `fill: #fff;${areaStyle}`;\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3045,"value":"bindWorldMap = {\n const { data, bbox } = await (mapDataStore.get('worldWithProvinces') || mapData.worldWithProvinces);\n bindProps(worldMap, {\n data: data.map(d => ({...d, props: {...d.props, population: populationData.areas[d.props.id]}})),\n bbox,\n width: width,\n highlighted: highlighted,\n selected: mutable selected,\n onHover(area) {\n mutable highlighted = area ? area.id : undefined;\n },\n onClick(area) {\n mutable selected = area ? area.id : undefined;\n },\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2803,"value":"md`## Exports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2990,"value":"loader = svelte`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2999,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2992,"value":"bindProps = (rendered, props) => {\n const component = getComponent(rendered);\n Object.keys(props).forEach(key => {\n component.$set({ [key]: props[key] });\n });\n if (props.selected) {\n component.$$.dirty.selected = true;\n };\n if (props.highlighted) {\n component.$$.dirty.highlighted = true;\n };\n return true;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":3007,"value":"create = async (id, props, dom) => {\n const properties = {\n id,\n containerClass: {},\n width: 1000,\n height: null,\n highlighted: null,\n selected: null,\n onClick() {},\n onHover() {},\n getStyles() { return {}; },\n data: [],\n bbox: [0, 0, 1000, 150],\n ...props\n };\n return render(map, properties, dom);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2310,"value":"drawMap = (vueMap, data) => {\n Object.keys(data).forEach(key => {\n Vue.set(vueMap, key, data[key])\n });\n return vueMap.$el;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"md`## Data mangling and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"scales = {\n const populations = Object.values(populationData.areas);\n const valueScale = d3.scaleLinear()\n .range([1, 0])\n .domain([0, Math.max.apply(this, populations)]);\n valueScale.clamp(true);\n \n return {\n value: valueScale,\n color: d3.interpolateMagma\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2769,"value":"import { mapData, population as populationData, created as mapDataStore } from '@lounjukk/map-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1923,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3\", \"d3-scale-chromatic@^1.4.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2988,"value":"import { svelte, render, generatedPromises, derivedPromises, getComponent, readableInput, readable, writable, observe, componentTag, CSSTag } from '@ajbouh/svelte'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2904,"value":"loaderStyle = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2832,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}