2e:null 2f:["$","title",null,{"children":"Make a Map (beta) | Michael Bricknell | Observable"}] 34:T60e,styleDefault = html` `35:T10a8,carto = { d3.selection.prototype.moveToFront = function () { return this.each(function () { this.parentNode.appendChild(this); }); } d3.selection.prototype.first = function () { return d3.select(this.nodes()[0]); }; d3.selection.prototype.last = function () { return d3.select(this.nodes()[this.size() - 1]); }; String.prototype.replaceAll = function(target, replacement) { return this.split(target).join(replacement); }; const sortedFeatures = myfeatures.sort((a, b) => d3.descending(encodeURIComponent(a.properties.NAME_0), encodeURIComponent(b.properties.NAME_0))); const sortedLakes = mylakes.sort((a, b) => d3.descending(a.properties.name_en, b.properties.name_en)); const svg = d3.create("svg") .style("display", "block") .attr("id", "map") .attr('preserveAspectRatio', 'xMinYMin meet') .attr("viewBox", [0, 0, width, height]); const defs = svg.append("defs"); const type = d3.annotationBadge const annotations = [{ //can use x, y directly instead of data data: { lat: "0", lng: "0" }, dy: 137, dx: 162, subject: { text: "A", radius: 14 } }] //Skipping setting domains for sake of example //const x = d3.scaleTime().range([0, 800]) //const y = d3.scaleLinear().range([300, 0]) /* .attr("cx",function(d){return projection(d.geometry.coordinates)[0]}) .attr("cy",function(d){return projection(d.geometry.coordinates)[1]}) */ const makeAnnotations = d3.annotation() .editMode(true) .notePadding(15) .type(type) .accessors({ x: d => projection([d.lat,d.lng])[0], y: d => projection([d.lat,d.lng])[1] }) .accessorsInverse({ lat: d => projection.inverse([d.x, d.y])[0], lng: d => projection.inverse([d.x, d.y])[1] }) .annotations(annotations) defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const group = svg.append('g').attr('id', 'map-group') const group_a = svg.append('g').attr('id', 'annotation-group') group.append('path') .datum({ type: 'Sphere' }) .attr('class', 'sphere') .attr('id', 'id-sphere') .attr('d', path) .attr('fill', '#f2f2f2') .attr('stroke', 'none'); group.append('g') .attr('class', 'country-fill') .attr('id', 'id-country-fill') .selectAll('path') .data(sortedFeatures) .enter().append('path') .attr('d', path) .attr('vector-effect', 'non-scaling-stroke') .attr('stroke-linejoin', 'round') .attr('class', 'country') .attr('data-link', function (d, i) { return d.properties.GID_0 }) .attr('id', function (d, i) { return d.properties.NAME_0.replaceAll(" ","-") }) group.append('g') .attr('class', 'country-borders') .attr('id', 'id-country-borders') .selectAll('path') .data(sortedFeatures) .enter().append('path') .attr('d', path) .attr('stroke-linejoin', 'round') .attr('vector-effect', 'non-scaling-stroke') .attr('id', function (d, i) { return d.properties.NAME_0.replaceAll(" ","-") }) group.append('g') .attr('class', 'lakes-borders') .attr('id', 'id-lakes-borders') .selectAll('path') .data(sortedLakes) .enter().append('path') .attr('stroke-linejoin', 'round') .attr('d', path) .attr('id', function (d, i) { return d.properties.name_en.replaceAll(" ","-") }) group.append('g') .attr('class', 'country-hover') .attr('id', 'id-country-hover') .selectAll('path') .data(sortedFeatures) .enter().append('path') .attr('d', path) .attr('class', 'hover') .attr('id', function (d, i) { return 'hover-' + d.properties.GID_0 }) .attr('vector-effect', 'non-scaling-stroke') .attr('stroke-linejoin', 'round') /* .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) .on('mousemove', function (event) { handleMouseMove(event) }) */ /*group_a.attr("class", "annotation-group") .call(makeAnnotations)*/ return svg.node(); }36:[] 32:{"id":"834277cf6bb6f6e2","slug":"make-a-map-beta","title":"Make a Map (beta)","thumbnail":"089e8e31e49c83f0e68af7518257524bcf4c543b668671de9b99617e1b03d849","access_level":"public","create_time":"$D2020-02-16T15:48:55.801Z","update_time":"$D2023-02-20T14:19:07.015Z","view_time":null,"first_public_time":"$D2020-02-17T19:17:28.358Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":292,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Make a Map (beta)","cells":[{"id":0,"value":"md`# Make a Map (beta)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"rotateMap = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof rotate = {\n rotateMap.value = [0, 0, 0];\n rotateMap.oninput = () => {\n rotateMap.oa.value = `${(rotateMap.value[0] = rotateMap.a.valueAsNumber).toFixed(2)}°`;\n rotateMap.ob.value = `${(rotateMap.value[1] = rotateMap.b.valueAsNumber).toFixed(2)}°`;\n rotateMap.oc.value = `${(rotateMap.value[2] = rotateMap.c.valueAsNumber).toFixed(2)}°`;\n };\n rotateMap.oninput();\n return rotateMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`---\n\n## Map stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"projection = d3.geoMiller().rotate(rotate).translate([width / 2, height / 1.5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"width = 680","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = 370","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"outline = ({type:\"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"mylakes = topojson.feature(lakes, lakes.objects.lakes).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"myfeatures = countries.features.filter(function (d, i) {\n if (d.properties.GID_0 !== 'ATA') { return d }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"lakes = d3.json(\"https://gist.githubusercontent.com/mbrickmaps/1e1977624c04bd2fcf44c4d05864029b/raw/lakes.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"countries = topojson.feature(world, world.objects.World_ADMIN0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"world = d3.json(\"https://gist.githubusercontent.com/mbrickmaps/2d104d78b22b944e8c4c967d0fde1541/raw/world.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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@5\",\"d3-geo-projection\", \"d3-geo\", \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"