31:T590,container = { const cssScoped = 'map' ; const div = html`

Map loading...

`; return div ; }32:T847,svg_map = { d3 .select(container).select("p").remove() ; d3 .select(container).select("svg").remove() ; const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${mapHeight}`); const g = svg.append("g") g.append("path") .attr("fill", "#fafafa") .attr("stroke", "none") .datum(fr_cont) .attr("d", path) ; const gcom = g.append("g") .attr("class", "communes") ; gcom.append("style").text(` path { stroke-width:1; stroke-opacity:1 };`); let selection = gcom .attr("fill", "#eee") .selectAll("path") .data(fr_com2020_gj.features) .join("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", path) //.append("title") //.text(d => d.properties.codgeo); selection.on("mouseover", function(event, d) { d3.select(event.currentTarget) .attr("stroke", "black") .attr("stroke-width", 2) .raise(); }).on("mouseout", ({ currentTarget }) => { d3.select(currentTarget) .attr("stroke", d3.select(currentTarget).attr("fill")) .attr("stroke-width", 1); }) g.append("path") .attr("vector-effect", "non-scaling-stroke") .attr("fill","none") .attr("stroke","#666") .attr("stroke-width","1.5") .datum(fr_cont) .attr("d", path); const btnZoomIn = d3 .select(container) .select("button.zoom-in") .on("click", handleZoomIn); const btnZoomOut = d3 .select(container) .select("button.zoom-out") .on("click", handleZoomOut); function zoomed({ transform }) { g.attr("transform", transform); g.selectAll("g").attr("stroke-width", 1 / transform.k); } function handleZoomIn(event) { svg .transition() .duration(500) .call(zoom.scaleBy, 1.74); } function handleZoomOut(event) { svg .transition() .duration(500) .call(zoom.scaleBy, 0.5); } if (zoomEnabled) svg.call(zoom); return svg; }33:[{"id":"f5c4ea21be19b098c9184573a1dde1b814395b8c65f9ba9f383a7d4f4080fa7c9f86c6d0aeddd88d3ed791100c933fb48e41ba8c6c0803dd93ce74773912f8d8","href":"https://static.observableusercontent.com/files/f5c4ea21be19b098c9184573a1dde1b814395b8c65f9ba9f383a7d4f4080fa7c9f86c6d0aeddd88d3ed791100c933fb48e41ba8c6c0803dd93ce74773912f8d8","name":"a_com2020_topo_3857.json","type":"application/json","lastModified":1606381490344.162,"size":11629810}] 2f:{"title":"Map Coloring - France - 4 colors theorem","cells":[{"id":0,"value":"md`# Map Coloring - France - 4 colors theorem\n\nAn iterative greedy algorithm for [map coloring](https://en.wikipedia.org/wiki/Map_coloring) using [topojson.neighbors](https://github.com/topojson/topojson-client/blob/master/README.md#neighbors) and [Welsh-Powell algorithm](https://www.geeksforgeeks.org/welsh-powell-graph-colouring-algorithm/). 6 colors are used here for 35,000 municipalities.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof replay = html`