30:T5fd,map = { const root = d3.select(DOM.svg(width, height)); root.style("background", "#e8f0f2"); const defs = root.append("defs"); const noise_uid = DOM.uid("noise"); defs.node().appendChild(svg` `); const g = root.append("g") .attr("filter", noise_uid) .attr("stroke", "#222") .attr("stroke-linejoin", "round"); const path = d3.geoPath().projection(projection); g.selectAll(".country") .data(areas) .enter().append("path").attr("class", "country") .attr("fill", area => colors[area.properties.sovereignt] || (console.log(area.properties.name), "rgba(255, 255, 255, .7)")) .attr("d", path); root.append("path") .attr("fill", "none") .attr("stroke", "#3d72af") .attr("d", path(d3.geoGraticule().step([20,20])())); return root; }31:T5fb,colors = ({ "San Marino": "#719555", // (won't actually matter) "Vatican": "#719555", // (won't actually matter) "Monaco": "#827f8b", "Malta": "#b8c27b", "Liechtenstein": "#719555", // (won't actually matter) "United Kingdom": "#f4d16d", // "Isle of Man": "#f4d16d", // "Jersey": "#f4d16d", // "Guernsey": "#f4d16d", "Denmark": "#a4c6b8", // "Faeroe Is.": "#a4c6b8", "Belarus": "#b5a95d", "Bosnia and Herzegovina": "#8db965", "Andorra": "#c16659", "Hungary": "#f4dab5", "Slovakia": "#b18573", "Ukraine": "#f1cb65", "Poland": "#8fbb6e", "Switzerland": "#f4d16b", "Kosovo": "#b3ad57", "Slovenia": "#99b1cd", "Estonia": "#ceae87", "Latvia": "#a6c5bd", "Germany": "#d6e178", "Lithuania": "#b38571", "Belgium": "#d46b6f", "Luxembourg": "#f7f4a8", "Austria": "#ebb27f", "France": "#b8a953", "Portugal": "#f1b290", "Spain": "#f7dcbf", "Morocco": "#b58770", "Algeria": "#f0ce60", "Tunisia": "#88b968", "Italy": "#faf7aa", "Croatia": "#d5de71", "Montenegro": "#f4dab6", "Macedonia": "#f2cb63", "Albania": "#62a492", "Greece": "#b9877a", "Turkey": "#efac8c", "Bulgaria": "#d56a57", "Norway": "#91aabf", "Finland": "#5b9887", "Sweden": "#e5a887", "Russia": "#f6f4aa", "Iceland": "#b98c77", "Greenland": "#a6c7bd", "Estonia": "#ccb080", "Netherlands": "#af8573", "Romania": "#a7c8b7", "Bulgaria": "#d46b5c", "Moldova": "#98b0cc", "Republic of Serbia": "#cfb187", "Czech Republic": "#61a08a", "Ireland": "#96bf73", })32:T5c1,{ const W = 500; const H = W * height/width; const svg = d3.select(DOM.svg(W, H)) .style("border", "1px solid #000") .style("background", "#eee"); const g = svg.append("g"); const g_countries = g.append("g"); const graticules = g.append("path") .attr("fill", "none") .attr("stroke", "rgba(0,0,0,.2)"); let x = 0; let z = 1; function draw () { const projection = d3.geoConicConformal() .parallels([40, 68]) .rotate([-10 + x/z/15, 0]) .center([8 - 10, 53.823]) .scale(900 * z) .translate([W/2, H/2]); mutable msg = md`\`\`\`javascript const projection = d3.geoConicConformal() .parallels([40, 68]) .rotate([${-10 + x/z/15}, 0]) .center([5.886 - 10, 51.823]) .scale(${1000 * z}) .translate([cx, cy]); \`\`\``; const path = d3.geoPath().projection(projection); const countries = g_countries.selectAll("path").data(areas); countries.exit().remove(); countries .enter().append("path") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-linejoin", "round") .merge(countries) .attr("d", path); graticules.attr("d", path(d3.geoGraticule().step([20,20])())); } svg.call(d3.drag().on("drag", function () { x += d3.event.dx; draw(); })); /* svg.call(d3.zoom().on("zoom", function () { z = d3.event.transform.k; draw(); })); */ draw(); return svg.node(); }33:[] 2e:{"title":"Europe","cells":[{"id":0,"value":"md`# Europe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"viewof view = select({\n options: [\n { label: \"My remake\", value: \"mine\" },\n { label: \"Original map\", value: \"original\" },\n ],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof mapview = {\n const root = html`

${map.node()}

`;\n \n root.value = d3.select(root).select(\".mine\");\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"mapview.style(\"display\", view == \"mine\" ? \"block\" : \"none\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"projection = d3.geoConicConformal()\n .parallels([40, 68])\n .rotate([-9.05, 0])\n .center([9.5 -9.05, 54.1])\n .scale(1690)\n .translate([width/2, height/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`## The colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"{\n const H = _.sortBy(Object.values(colors).map(hex => d3.hsl(hex)), \"h\").map(c => c.hex());\n return html`

${H.map(h => html`

`)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"md`## The projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"mutable msg = md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"height = width * 2145/1680 // image is 1680 × 2145 pixels","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"world.features.find(o => Object.values(o.properties).filter(s => (s+\"\").match(/Malta/)).length > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"world.features.find(o => o.properties.name.match(\"Serbia\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"areas = world.features\n\n // select only countries in europe\n .filter(o => o.properties.continent == \"Europe\"\n || o.properties.name == \"Morocco\"\n || o.properties.name == \"Algeria\"\n || o.properties.name == \"Tunisia\"\n || o.properties.name == \"Turkey\"\n || o.properties.name == \"Greenland\"\n )\n\n // flatten multipolygons into polygons\n .reduce((countries2, feature) => {\n if (feature.geometry.type == \"Polygon\") {\n countries2.push(feature);\n } else { // MultiPolygon\n feature.geometry.coordinates.forEach(coordinates => {\n countries2.push({\n type: \"Feature\",\n properties: feature.properties,\n geometry: { type: \"Polygon\", coordinates },\n });\n });\n }\n\n return countries2;\n }, [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"// from: http://geojson.xyz/\nworld = d3.json(\"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"import { mapinputdata } from \"@kelleyvanevert/little-things\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}