2d:null 2e:["$","title",null,{"children":"Map Generator | eastcoasting | Observable"}] 33:T14cd,worldMap = { let stateselected = "none"; let clearButton; function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed); let filter; let feComponentTransfer; let feMerge; if (ui.enableShader) { filter = svg.append("filter").attr("id", "dropshadow"); filter .append("feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", ui.stDev); filter .append("feOffset") .attr("dx", ui.dX) .attr("dy", ui.dY) .attr("result", "offsetblur"); feComponentTransfer = filter.append("feComponentTransfer"); feComponentTransfer .append("feFuncA") .attr("slope", ui.slope) .attr("type", "linear"); feMerge = filter.append("feMerge"); feMerge.append("feMergeNode"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); } else { filter = null; feComponentTransfer = null; feMerge = null; } var path = d3 .geoPath() .projection(d3.geoMercator().fitSize([width, height], validCountries)); g.selectAll("path") .data(validCountries.features, (d) => d.properties.brk_name) .enter() .append("path") .attr("d", path); const countries = g .append("g") .selectAll("path.countries") .data(validCountries.features, (d) => d.properties.brk_name) .join("path") .attr("class", "countries") .attr("d", (d) => path(d)) .attr("fill", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return colors.selectedFill; } else return colors.otherFill; }) .attr("stroke", colors.otherStroke) .attr("stroke-width", colors.strokeWidth) .on("click", clicked) .style("cursor", "pointer") .style("filter", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return "url(#dropshadow)"; } else return ""; }) .style("overflow", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return "visible"; } else return ""; }); countries.append("title").text((d) => d.properties.brk_name); svg.call(zoom); function reset() { countries .transition() .style("fill", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return; } else return colors.otherFill; }) .style("filter", "") .style("overflow", ""); svg.property("value", "none").dispatch("input"); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); const countrySelected = d.properties.brk_name; if (clickedCountries.has(countrySelected)) { clickedCountries.delete(countrySelected); d3.select(this) .transition() .style("fill", colors.otherFill) .style("filter", "") .style("overflow", ""); } else { clickedCountries.add(countrySelected); svg.property("value", countrySelected).dispatch("input"); event.stopPropagation(); countries .transition() .style("fill", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return colors.selectedFill; } else return colors.otherFill; }) .style("filter", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return "url(#dropshadow)"; } else return ""; }) .style("overflow", (d) => { if (clickedCountries.has(d.properties.brk_name)) { return "visible"; } else return ""; }); d3.select(this).transition().style("fill", colors.selectedFill); if (event.type === "click" && ui.zoomOnClick) { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(3, 1 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } } } if (!clearMapButton) { clearButton = svg .append("g") .on("click", () => { clickedCountries.clear(); reset(); }) .attr("class", "clearButton") .style("cursor", "pointer"); clearButton .append("rect") .style("fill", "black") .attr("width", 125) .attr("height", 50) .attr("x", 50) .attr("rx", 8) .attr("ry", 8); clearButton .append("text") .attr("x", 57) .attr("y", 32) .attr("font-size", "25px") .text("Clear Map") .attr("fill", "white"); } else if (clearMapButton) { clearButton = svg.selectAll(".clearButton"); // console.log(clearButton); clearButton.selectAll("*").remove(); console.log(clearButton); clearButton.remove(); // console.log(d3.select(clearButton)); // ui.screenshot; } svg.property("value", "none").dispatch("input"); return svg.node(); }34:[] 31:{"id":"3ece9dd2a05b8e18","slug":"map-generator","title":"Map Generator","thumbnail":"cadb6432514743fbabe75c44076355b2812980cf575e876ed7fe584fa7a30bdd","access_level":"public","create_time":"$D2023-02-23T20:15:12.005Z","update_time":"$D2023-02-27T21:46:46.008Z","view_time":null,"first_public_time":"$D2023-02-23T20:15:12.005Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"eeff2c5459868c71","login":"eastcoasting","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0bd996e681cf4368cc7b26ea220c43fedfda41be2b9473bc75d19acdb83ef3f1","tier":"starter_2024"},"version":607,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"64bdb7d8ac477035","login":"eastcoasting","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0bd996e681cf4368cc7b26ea220c43fedfda41be2b9473bc75d19acdb83ef3f1","tier":null}],"members":[{"type":"individual","id":"64bdb7d8ac477035","login":"eastcoasting","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0bd996e681cf4368cc7b26ea220c43fedfda41be2b9473bc75d19acdb83ef3f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Map Generator","cells":[{"id":43,"value":"# Map Generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"### To use:\n- Select countries by clicking\n- Scroll, or double click to zoom in; pan to the viewport of the desired map\n- Download a screenshot using the button below in SVG or using the sidebar toggle for a PNG.\n\nAdditional Functionality\n- Click the button 'Clear Map' in the top-left to remove active selections, or click a selected country to remove\n- Use the menus below to switch the color and fill of selected and background countries\n- To add additional geographies use: http://geojson.xyz/ and swap [here](https://observablehq.com/d/3ece9dd2a05b8e18#validCountries)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"downloadButton = removeButtonAndDownload(worldMap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"### Control Fill and Outline\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"viewof colors = Inputs.form({\n selectedFill: Inputs.color({ label: \"Selected Fill\", value: \"#266068\" }),\n selectedStroke: Inputs.color({ label: \"Selected Stroke\", value: \"#ffffff\" }),\n otherFill: Inputs.color({ label: \"Fill\", value: \"#e5e5e5\" }),\n otherStroke: Inputs.color({ label: \"Stroke\", value: \"#ffffff\" }),\n strokeWidth: Inputs.range([0, 5], {\n step: 0.25,\n value: 0.25,\n label: \"Stroke Width\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"### Map Control\n\n##### Shading is a WIP, does not work well for small geometries or with shared borders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"viewof ui = Inputs.form({\n enableShader: Inputs.toggle({ value: false, label: \"Enable shading\" }),\n stDev: Inputs.range([0, 20], {\n step: 0.1,\n value: 0.5,\n label: \"stdDeviation\"\n }),\n dX: Inputs.range([-20, 20], { step: 0.1, value: 0, label: \"dx\" }),\n dy: Inputs.range([-20, 20], { step: 0.1, value: 0, label: \"dy\" }),\n slope: Inputs.range([0, 20], { step: 0.1, value: 0.5, label: \"slope\" }),\n zoomOnClick: Inputs.toggle({\n value: false,\n label: \"Zoom on click\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"Not required for downloads:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"viewof clearMapButton = Inputs.toggle({\n value: false,\n label: \"Remove clear button from viewport\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"

Note: For additional admin 1/2 data for specific countries access data here: https://data.humdata.org/organization/geoboundaries. Download data and upload in place of the world object.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"viewof geojsonURL = Inputs.text({\n value:\n \"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson\",\n label: \"geojson URL to fetch:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"world = fetch(geojsonURL, {\n headers: {\n Accept: \"*/*\",\n \"Accept-Language\": \"en-US,en;q=0.5\",\n Referer: \"https://observablehq.com/@randomfractals/fetch\"\n },\n //credentials: 'include',\n cache: \"no-store\",\n mode: \"cors\",\n redirect: \"follow\"\n})\n .then((response) => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n })\n .catch((error) => {\n return error;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"validCountries = [\n {\n type: \"FeatureCollection\",\n features: world.features.filter((feature) => {\n return feature.properties.sovereignt !== \"Antarctica\";\n })\n }\n][0]\n\n// again why can we not declare objects inline","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"clickedCountries = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"function removeButtonAndDownload(svgNode, filename = \"map.svg\") {\n const downloadButton = html` Save Current Map as SVG`;\n\n downloadButton.onclick = function (e) {\n setInputValue(viewof clearMapButton, true);\n\n const clearButton = svg.selectAll(\".clearButton\");\n clearButton.selectAll(\"*\").remove();\n\n clearButton.remove();\n var url = (downloadButton.href = URL.createObjectURL(serialize(svgNode)));\n setTimeout(function () {\n URL.revokeObjectURL(url);\n }, 50);\n\n setInputValue(viewof clearMapButton, false);\n };\n\n return downloadButton;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"width = 1300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"height = 810","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width + 350, height])\n .attr(\"width\", width)\n .attr(\"height\", height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"g = svg.append(\"g\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"function setInputValue(input, value) {\n input.value = value;\n console.log(input.value);\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"