29:null 2a:["$","title",null,{"children":"Map Coloring - France - 4 colors theorem | Éric Mauvière | Observable"}] 2f:T590,container = { const cssScoped = 'map' ; const div = html`

Map loading...

`; return div ; }30: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; }31:[{"id":"f5c4ea21be19b098c9184573a1dde1b814395b8c65f9ba9f383a7d4f4080fa7c9f86c6d0aeddd88d3ed791100c933fb48e41ba8c6c0803dd93ce74773912f8d8","href":"https://static.observableusercontent.com/files/f5c4ea21be19b098c9184573a1dde1b814395b8c65f9ba9f383a7d4f4080fa7c9f86c6d0aeddd88d3ed791100c933fb48e41ba8c6c0803dd93ce74773912f8d8","name":"a_com2020_topo_3857.json","type":"application/json","lastModified":1606381490344.162,"size":11629810}] 2d:{"id":"a90d1a656ae9a14e","slug":"map-coloring-france-6-colors-for-35-000-municipalities","title":"Map Coloring - France - 4 colors theorem","thumbnail":"0c908f2e8618908be369fd0842115ab237c1cb43bcabc11599f679389ebc87b6","access_level":"public","create_time":"$D2020-11-26T09:00:49.520Z","update_time":"$D2020-12-15T08:53:09.337Z","view_time":null,"first_public_time":"$D2020-11-26T09:43:45.397Z","has_unpublished_edits":null,"fork":{"id":"ea27038cd57e167f","slug":"map-coloring-with-5-colours","title":"Map Coloring with few colors (Welsh-Powell Algorithm)","owner":{"id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière"}},"stars":4,"starred":false,"owner":{"type":"team","id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":"starter_2024"},"version":541,"publish_version":541,"role":null,"authored":false,"authors":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null}],"members":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof replay = html`