31:T525,explication = md`Some years ago i wrote this (with D3js v3) and when i discovered Observable i take the challenge to adapt to D3js v5 and v6/7 and try this tool. After long long long reading of the numerous examples (thanks @all) and lot of test here is the first 'working' draft ... My goal is to approch an (geo...)graphic interface to navigate as best between provinces and counties and finally reach the caves. So for now is more oriented to the navigation than to the visualization and analysis of the data itselfs (maybe next step). * double click on the province will show all district of this province and zoom center to fit as best * the "prefecture division level" will be show according to the zoom factor * click on the district will zoom and center to fit as best * the cave layer is always on the top of the layers * click on the cave will open a popup with a link to the detailed cave data * zoom with wheel + cmd or alt is from 1 to 300 * on the top left and bottom left infos are displayed (Province, County, Cave name) * on the top left and bottom left coordinates (dd) are displayed following the mouse ... * the meridiens and parallels are displayed with a frequence from 20° to 1° according with the zoom factor... So still on progress... Any advice are welcome ... Thanks for reading `32:T4394,zhmap = { var active = d3.select(null); var k = 1; var gra_lon = 20; var gra_la = 20; let rotation = [-100, -40]; var projection = d3 .geoOrthographic() .scale(330) .rotate(rotation) .translate([width / 2, height / 2]) .clipAngle(90); var geoGenerator = d3.geoPath().projection(projection); const svg = d3 .select(DOM.svg(width, height)) .attr("id", "ditu") .style("width", "100%") .style("height", "auto"); const layers = svg.append("g").attr("class", "layers"); const sph = layers.append("g").attr("id", "sph"); const mond = layers.append("g").attr("id", "mond"); const kars = layers.append("g").attr("id", "kars"); const provi = layers.append("g").attr("id", "prov"); const prefe = layers.append("g").attr("id", "pref"); const dis = layers.append("g").attr("id", "dis"); var gra = layers.append("g").attr("id", "gra"); const equa = layers.append("g").attr("id", "equa"); const canc = layers.append("g").attr("id", "canc"); const capr = layers.append("g").attr("id", "capr"); const gro = layers.append("g").attr("id", "gro"); const zoom = d3 .zoom() .filter(event => { if (event.type === "wheel") { const modifierKeyIsPressed = event.metaKey || event.altKey || event.ctrlKey; return modifierKeyIsPressed; } return true; }) .scaleExtent([1, 300]) .translateExtent([[0, 0], [width, height]]) .on("zoom", zoomed) .on("zoom", (event, d) => { k = event.transform.k; if (k <= 2) { gra_lon = 20; gra_la = 20; } else if (k <= 5) { gra_lon = 10; gra_la = 10; } else if (k <= 20) { gra_lon = 5; gra_la = 5; } else if (k <= 50) { gra_lon = 2; gra_la = 2; } else if (k <= 100) { gra_lon = 1; gra_la = 1; } k > 5 ? prefe.selectAll("path").attr("visibility", "visible") : prefe.selectAll("path").attr("visibility", "hidden"); k < 2 ? provi.selectAll("path").attr("stroke-width", 0) : provi.selectAll("path").attr("stroke-width", 0.4 / k); k > 5 ? kars.selectAll("path").attr("visibility", "hidden") : kars.selectAll("path").attr("visibility", "visible"); k < 12 ? dis.selectAll("path").attr("visibility", "hidden") : ""; gro.selectAll("path").attr("d", geoGenerator.pointRadius(1 / k)); d3.select("body") .selectAll(".graticule") .remove(); layers.attr("transform", event.transform); makescalegra(); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.2 / k); d3.select("body") .selectAll(".district") .style("stroke-width", 0.2 / k); console.log(k); return k; }); function zoomed(event) { const { transform } = event; layers.attr("transform", transform); layers.attr("stroke-width", 1 / transform.k); } function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } var divtooltip = d3 .select("body") .append("div") .style("position", "absolute") //.attr("id", "divtooltip") .style("visibility", "hidden") .attr("class", "tooltip bs-tooltip-right") .style("opacity", 1); var popup = d3 .select("body") .append("div") .style("position", "absolute") .attr("id", "popup") .style("visibility", "hidden"); const locator = function(event, d, t) { var latlon = projection.invert(d3.pointer(event)); d3.select("#infocoord").text( latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E " ); d3.select("#coo").text( latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E " ); }; function particle(event, x, y) { svg .append("circle") .attr("transform", event.transform) .attr("cx", x) .attr("cy", y) .attr("r", 1e-3) .style("stroke", "red") .style("stroke-opacity", 1) .style("fill", "none") .style("fill-opacity", 0) .transition() .duration(3000) .ease(Math.sqrt) .attr("r", 100) .style("stroke-opacity", 1e-6) .remove(); } const sphe = function() { sph .append("path") .attr("d", geoGenerator(sphere)) .attr("stroke", "grey") .attr("fill", "rgba( 56, 113, 169, 1.00 )") .attr("fill-opacity", 0.3) .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .on("mouseenter", function(event, d) { d3.select("#infos").text(""); }) .on("mousemove", function(event, d) { locator(event, d, this); divtooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { divtooltip.style("visibility", "hidden"); popup.style("visibility", "hidden"); }); }; const monde = function() { mond .append("path") .datum(topojson.feature(gaia, gaia.objects.land)) .attr("class", "land") .attr("fill", "rgba(240, 240, 240, 1.00)") .attr("fill-opacity", 1) .attr("d", geoGenerator) .on("mouseenter", function(event, d) { d3.select("#infos").text(""); }) .on("mousemove", function(event, d) { locator(event, d, this); divtooltip.style("visibility", "hidden"); }) .on("click", (event, d) => { d3.select("#tooltip").style("visibility", "hidden"); popup.style("visibility", "hidden"); }); }; const karsts = function() { kars .selectAll("path") .data(karst.features) .enter() .append("path") .attr("stroke-width", 0) .attr("class", "kars") .attr("stroke", "purple") .attr("fill", "purple") .attr("fill-opacity", 0.2) .attr("stroke-opacity", 0.2) .attr("d", geoGenerator); }; const prefecture = function() { prefe .selectAll("path") .data(pref.features) .enter() .append("path") .attr("class", "prefect") .attr("visibility", "hidden") .attr("stroke-linejoin", "round") .attr("stroke", "rgba( 130, 58, 76, 1.00 )") .attr("stroke-width", ".05px") .attr("fill", "none") .attr("fill-opacity", 0.3) .attr("d", geoGenerator); }; const province = function() { provi .selectAll("path") .data(prov.features) .enter() .append("path") .attr("stroke-width", 0) .attr("class", "province") .attr("stroke-linejoin", "round") .attr("stroke", "white") //.attr("stroke-width", ".2px") .attr("fill", "grey") .attr("fill-opacity", 0.3) .attr("d", geoGenerator) .on("mouseover", function(event, d) { d3.select(this) .style("fill", "rgba(120,120,120,1)") .attr("fill-opacity", 1); divtooltip .transition() .duration(200) .style("visibility", "visible") .style("opacity", 0.6); divtooltip .html( `

` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mousemove", function(event, d) { d3.select(this); //.style("fill", "rgba(70,70,70,1)") //.attr("fill-opacity", 1); divtooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); locator(event, d, this); d3.select("#infogeo_prov").html( d.properties.NAME_PY + " " + d.properties.NAME_HZ ); d3.select("#infos") .html(d.properties.NAME_PY + " " + d.properties.NAME_HZ) .attr("fill", "rgba(120,120,120,1)") .attr("fill-opacity", 1); d3.select("#infovarious") .html(d.properties.NAME_PY + " " + d.properties.NAME_HZ) .style("color", "rgba(120,120,120,1)"); //.attr("fill-opacity", 1); }) .on("mouseout", function(event, d) { divtooltip.style("visibility", "hidden"); d3.select("#infogeo_prov").html(""); d3.select("#coo").text(""); d3.select("#infovarious").html(""); d3.select(this) .transition() .duration(2000) .delay(100) .attr("fill", "grey") .attr("fill-opacity", 0.3); }) .on("dblclick", (event, d) => { if (dataMap.has(d.id) || !urlMap.has(d.id)) viewcounties(d); else { d3.json(urlMap.get(d.id)).then(val => { dataMap.set(d.id, val); viewcounties(d); }); } divtooltip.style("visibility", "hidden"); popup.style("visibility", "hidden"); }) .on("click", (event, d) => { popup.style("visibility", "hidden"); }); //.append("title") //.text((d, i) => d.properties.NAME_PY + " " + d.properties.NAME_HZ); }; const grotte = function() { gro .selectAll("path") .data(cave.features) .enter() .append("path") .attr("class", "cave") .attr("fill", "red") .attr("stroke", "red") .attr("stroke-width", "0.2px") .attr("d", geoGenerator.pointRadius(0.15)) .on("mouseover", function(event, d) { locator(event, d, this); var x = d3.pointer(event, svg.node())[0]; var y = d3.pointer(event, svg.node())[1]; particle(event, x, y); }) .on("click", clickCave) .on("mouseenter", function(event, d) { d3.select(this).attr("d", geoGenerator.pointRadius(0.2)); //d3.select(this).style('fill', 'none').style("fill-opacity", 0.1); d3.select("#infos").text(`Ω : ` + d.properties.gro_nom); d3.select("#infovarious") .html(`Ω : ` + d.properties.gro_nom) .style("color", "black"); }) .on("mouseleave", function(event, d) { d3.select(this).attr("d", geoGenerator.pointRadius(0.02)); d3.select(this) .attr("class", "cave") .style("fill-opacity", 1); }) .append("title") .text((d, i) => `Ω : ` + d.properties.gro_nom); }; function clickCave(event, d) { popup .transition() .duration(200) .style("visibility", "visible"); popup .attr("class", "") .style("padding", "10px") .style("z-index", "10000") //.style("width", "200px") .style("height", "180px") .style("color", "black") .style("background-color", "rgba(255, 255, 255, 0.8)") .style("border-radius", "5px") .html( `

${d.properties.gro_nom + "
" + d.properties.gro_nom}
Dev. ${d.properties.gro_deve + " m
Den. " + d.properties.gro_prof} m
More infos ...

` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); } const makescalegra = function() { gra .append("path") .datum( d3 .geoGraticule() .extent([[-180, -80 + 1e-6], [180, 80 + 1e-6]]) .step([gra_la, gra_lon]) ) .attr("class", "graticule") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 0.5) .attr("d", geoGenerator); gra .append("path") .datum(d3.geoGraticule().step([0, 66.33])) .attr("class", "graticule polar") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); gra .append("path") .datum( d3 .geoGraticule() .extent([[-180, -23.4369511], [180, 23.4369511]]) .step([0, 23.436951]) ) .attr("class", "graticule tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; const equator = function() { equa .append("path") .datum({ type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]] }) .attr("class", "equator") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.5px") .attr("d", geoGenerator); }; const cancer = function() { canc .append("path") .datum({ type: "LineString", coordinates: tcanc }) .attr("class", "tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; const capricorne = function() { capr .append("path") .datum({ type: "LineString", coordinates: tcapri }) .attr("class", "tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; function viewcounties(d) { d3.select("body") .selectAll(".district") .remove(); //const [[x0, y0], [x1, y1]] = geoGenerator.bounds(d); //event.stopPropagation(); var bounds = geoGenerator.bounds(d), dx = bounds[1][0] - bounds[0][0], dy = bounds[1][1] - bounds[0][1], x = (bounds[0][0] + bounds[1][0]) / 2, y = (bounds[0][1] + bounds[1][1]) / 2, scale = 0.9 / Math.max(dx / width, dy / height), translate = [width / 2 - scale * x, height / 2 - scale * y]; layers .transition() .duration(2050) .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.02); const distri = dataMap.has(d.id) ? dataMap.get(d.id).features : []; dis .append("g") .selectAll("path") .data(distri) .enter() .append("path") .attr("class", "district") .attr("d", geoGenerator) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.01) //.style("fill-opacity", 0.3) .on("mousemove", function(event, d) { locator(event, d, this); }) .on("mouseenter", function(event, d) { d3.select(this) .style("fill", "red") .style("fill-opacity", 0.2); d3.select("#infos") .text(d.properties.Name) .attr("fill", "red") .attr("fill-opacity", 0.2); d3.select("#infovarious") .html(d.properties.Name) .style("color", "red"); //.attr("fill-opacity", 0.2); }) .on("mouseleave", function(event, d) { d3.select(this) .style("fill", "grey") .style("fill-opacity", 0.7); d3.select("#infos").text(""); d3.select("#coo").text(""); d3.select(this) .transition() .duration(2000) .delay(100) .style("fill", "grey") .style("fill-opacity", 0.2); }) .on("click", function(event, d) { var bounds = geoGenerator.bounds(d), dx = bounds[1][0] - bounds[0][0], dy = bounds[1][1] - bounds[0][1], x = (bounds[0][0] + bounds[1][0]) / 2, y = (bounds[0][1] + bounds[1][1]) / 2, scale = 0.9 / Math.max(dx / width, dy / height), translate = [width / 2 - scale * x, height / 2 - scale * y]; layers .transition() .duration(2050) //.style("stroke-width", 0.1 / scale + "px") .attr( "transform", "translate(" + translate + ")scale(" + scale + ")" ); gro.selectAll("path").attr("d", geoGenerator.pointRadius(0.03)); d3.select("body") .selectAll(".district") .style("stroke-width", 0.02); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.01); d3.select("#tooltip").style("visibility", "hidden"); popup.style("visibility", "hidden"); }); gro.selectAll("path").attr("d", geoGenerator.pointRadius(0.03)); } const render = () => { var projection = d3 .geoOrthographic() .scale(330) .rotate(rotation) .translate([width / 2, height / 2]) .clipAngle(90); var geoGenerator = d3.geoPath().projection(projection); monde(); prefecture(); province(); karsts(); makescalegra(); grotte(); sphe(); }; render(); // info text svg .append("text") .attr("x", 24) .attr("y", 36) .append("tspan") .attr("id", "infos") .attr("fill", "rgba(120,120,120,1)") .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("class", "infos"); svg .append("text") .attr("x", 24) .attr("y", 54) .append("tspan") .attr("id", "coo") .attr("font-size", "11"); svg.call(zoom).on("dblclick.zoom", null); return svg.node(); }33:T10a8,urls = [ "https://gist.githubusercontent.com/jipexu/abc48592d29e541dd1d49a3881e7a0f2/raw/59a949a36b7982ec3784ca3abc29c28a08746ef4/ah.json", "https://gist.githubusercontent.com/jipexu/7c1b5612ba0f21434e03b7808423156f/raw/903b3edff1ca23fc6693fb7273cd6baf0c582253/bj.json", "https://gist.githubusercontent.com/jipexu/49e355036cd48e71333b16f8e6236d34/raw/a4762b3da0166f3ed30b9950c847d871c92f6de9/cq.json", "https://gist.githubusercontent.com/jipexu/8e49830ad825c2a28602595366751da4/raw/828ff12114c43fdf7507464f9e7899666dfb28eb/fj.json", "https://gist.githubusercontent.com/jipexu/147e04656e7234f8cc79349d2a4165f2/raw/ad4479001c930b6812e3e2ab813a309c533a0cfb/gd.json", "https://gist.githubusercontent.com/jipexu/eb694e1c409658f4e52e092f44edac79/raw/2d7fe5e5487ea80f94addab5f8fc35f54f0349b0/gs.json", "https://gist.githubusercontent.com/jipexu/2855b77f6237bf51924d5ad2fcd01aed/raw/238688620aca9d8aa3abc0de053b1d705fcaa5ff/gx.json", "https://gist.githubusercontent.com/jipexu/299472303edc02dde77421f8cd83954f/raw/e1e14c2211e8609cd58a94b5822f41537f959eb2/gz.json", "https://gist.githubusercontent.com/jipexu/e70b4045c25b7396349a5193bc641157/raw/a9301d19bde5d84e68769e1d09b6626618b65bf3/hb.json", "https://gist.githubusercontent.com/jipexu/2fb83e586e563e185e88670b2c8a6ab5/raw/99889bf5dd953d13f71c0c7a7e444e684102ece3/heb.json", "https://gist.githubusercontent.com/jipexu/7fdc044313b630f39faca6f081617a88/raw/ae7c8aedb5f37ffad9ffc73f6d746460b245a8f4/hen.json", "https://gist.githubusercontent.com/jipexu/a252d84f6c540ea3858eb943e29372c5/raw/56e6d2629f2ce98e2519cb1ee2749d174c8d840f/hi.json", "https://gist.githubusercontent.com/jipexu/403ed92ce3d97d3e57a84cbbf8232541/raw/90e6c0941ee55f9bd1357a5c8655a8b1c41984d9/hl.json", "https://gist.githubusercontent.com/jipexu/28769dbace7a4049a4a393ea663a98ea/raw/2a32a2cda3e9011263e3f75a9713584c4cfc2dc9/hn.json", "https://gist.githubusercontent.com/jipexu/e72512a16af5be03ec8d093aff94c766/raw/6e5248ecd0867dc39bb76f248b7a7342ad34b47b/ji.json", "https://gist.githubusercontent.com/jipexu/83c27b05611db4fec5d8cf5b96da36c0/raw/6f2a6efe7961e7ded06064f73d550a7b487d133f/js.json", "https://gist.githubusercontent.com/jipexu/b956632127926c7fa18f66749227d1d0/raw/4667c5cfcdcc92097f0dff0b9020de2ec58cea7a/jx.json", "https://gist.githubusercontent.com/jipexu/2bf013573adec68a5c04038c4d45b4f7/raw/adf3ea4fd38fed0340ff767c2ce605841242c9be/ln.json", "https://gist.githubusercontent.com/jipexu/e20931bd4b58527ccc4ec26508c152bf/raw/f9d185f9e5b02fbf1f30f180dec10b5917ee92e5/nm.json", "https://gist.githubusercontent.com/jipexu/e3ed47ddf3dc933ba60651959666c9f3/raw/b529007043ae5f9a733245e6068e2fe85a0e1f4a/nx.json", "https://gist.githubusercontent.com/jipexu/004d120abbcdbf6a4603fe6697fb4716/raw/df31423ad0c94c37d3e20863371a0ab05315fb3e/qh.json", "https://gist.githubusercontent.com/jipexu/6ca266ed851c1a9af18c4c2c1b86fbc4/raw/ba894d062240429d391e0a054f7c57a38b717df0/sc.json", "https://gist.githubusercontent.com/jipexu/d423672185f38b79cde9d30b147603b6/raw/9731410a29985bdb4b16e556ce83a18908181271/sd.json", "https://gist.githubusercontent.com/jipexu/0ff30fd4b43f412dea93fda5209c2bc1/raw/ac21a87d3420a9433b61f9586111f32066cf148a/sh.json", "https://gist.githubusercontent.com/jipexu/6fd28c2da2b0d246a9ec96ca8f930944/raw/ca0a96b622bcffb82f0add2627499d52f169ad48/sn.json", "https://gist.githubusercontent.com/jipexu/fb83f3e035665bc6d13ae6b78d5d5bfb/raw/7a8a96e61feac0611a7a9367e5352bde01170ea4/sx.json", "https://gist.githubusercontent.com/jipexu/27977e17b6125042a8d875a422b0bb46/raw/f10faaa6b272cb3749829789bb68d2df21f7640c/tj.json", "https://gist.githubusercontent.com/jipexu/8c14881388f2e29da770a8e0151a3f79/raw/996f9e06137e966fd9c21edc34d0376027155cba/xj.json", "https://gist.githubusercontent.com/jipexu/3905f10115cf0e08b68925bc28f7c7cd/raw/5c209bac925a9f8bb484435044b0f8476c4ee20e/xz.json", "https://gist.githubusercontent.com/jipexu/78ff0670a00ffb1954d3e32e06057757/raw/ae23f627cb21e5951e885a1dce9c9ed94cc58369/yn.json", "https://gist.githubusercontent.com/jipexu/06b85696dc8c1dd48f27c6b4fa02abaa/raw/d3544be2f5ca813b199e4fc415229ec5a8ab4c11/zj.json", "https://gist.githubusercontent.com/jipexu/8fcf714c9fbe5c25703f8731bfbdf7a0/raw/5d10de849b6b4deaceb6ccae1249ee85eaba4e59/tw.json" ]34:Td77,style = html` `35:[] 2f:{"title":"China cave","cells":[{"id":0,"value":"metatitre = md`# China cave`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"titremap=html`

Caves of China

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"infocoord = html`

rasterize(zhmap), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`# Geo data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"//gaia = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")\ngaia = (await fetch(\"https://unpkg.com/world-atlas@1/world/50m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"import {\n prov,\n pref,\n cave,\n karst,\n tcapri,\n tcanc\n} from \"@jipexu/underground-library\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"shuanghe = d3.json(\"https://gist.githubusercontent.com/jipexu/830d8c790665c8be3bfd0398c79bc51e/raw/159cd4b94dab99c9ed4e33afc7c051a898ddcb02/shuanghe.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"urlMap = new Map(urls.map(url => [url.match(/\\/([a-z]{2,3})\\.json/)[1],url]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"dataMap = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`# Param`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"html`Marge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html `Espacement des graticules de latitude`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof gra_la = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`Espacement des graticules de longitude`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof gra_lon = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"graticule = d3.geoGraticule().step([gra_la, gra_lon])","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"styleformap = md `# Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`# Lib`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v7.min.js\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}