25:null 26:["$","title",null,{"children":"Antarctica - Elevation | JB Barré | Observable"}] 2b:Tcca,chart = { // Create an empty SVG with specified width and height. const heightProfil = 100; const ctx = DOM.svg(width, heightProfil); const svg = d3.select(ctx); const marginTop = 0, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 0, // bottom margin, in pixels marginLeft = 0, // left margin, in pixels xType = d3.scaleLinear, // the x-scale type xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // the y-scale type yRange = [heightProfil - marginBottom, marginTop], // [bottom, top] // Compute default domains. xDomain = [0, 5082654], yDomain = [0, 4100], color = "rgb(23, 69, 87, 1)", // stroke color of line strokeWidth = 1.5; // stroke width of line, in pixels const xScale = d3.scaleLinear().domain(xDomain).range(xRange); const yScale = d3.scaleLinear().domain(yDomain).range(yRange); const line = d3 .line() .x((d) => xScale(d.distance)) .y((d) => yScale(d.elevation)); const lineFlat = d3 .line() .x((d) => xScale(d.distance)) .y((d) => heightProfil); svg .append("path") .datum(elevationprofil) .attr("class", "line") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("fill", "rgba(23, 69, 87,0.5)") .attr("d", line); svg .append("line") .style("stroke", "black") .style("stroke-width", 1.5) .attr("x1", 0) .attr("y1", heightProfil) .attr("x2", 700) .attr("y2", heightProfil); d3.select("#start1").on("click", function () { svg.selectAll(".line").transition().duration(1500).attr("d", lineFlat); }); d3.select("#reset1").on("click", function () { svg.selectAll(".line").transition().duration(1500).attr("d", line); }); const heightBurj = (heightProfil * 24) / 100; const heightEiffel = (heightProfil * 8) / 100; const g = svg.append("g"); g.append("image") .attr("xlink:href", "https://freesvg.org/img/BurjKhalifa.png") .attr("height", heightBurj) .attr("x", 45) .attr("y", heightProfil - heightBurj); g.append("image") .attr("xlink:href", "https://freesvg.org/img/Eiffel-Tower-Silhouette.png") .attr("height", heightEiffel) .attr("x", 40) .attr("y", heightProfil - heightEiffel); d3.select(zoomSlider).on("input", sliderZoom); let zoom = d3 .zoom() .extent([ [0, 0], [width, heightProfil] ]) .translateExtent([ [0, 0], [width, heightProfil] ]) .scaleExtent([0, 12]) .on("zoom", zoomed); function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width, heightProfil]) ); } function zoomed() { const transform = d3.event.transform; } function sliderZoom() { let t = d3.zoomIdentity .translate(width / 2, height / 2) .scale(zoomSlider.value) .translate(-width / 2, -height / 2); svg.call(zoom.transform, t); //svg.attr("transform", transform); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomReset: reset }); }2c:[{"id":"bd9fb65b336c16ec553a5b0cba622824b4be027aa723aa9157d74cf81e15ee4303599b498e0262c792fcf42932c55fd116d7bf297fe6041430355226e83d5d38","href":"https://static.observableusercontent.com/files/bd9fb65b336c16ec553a5b0cba622824b4be027aa723aa9157d74cf81e15ee4303599b498e0262c792fcf42932c55fd116d7bf297fe6041430355226e83d5d38","name":"antarctica_coastlinev7.geojson","type":"application/geo+json","lastModified":1656406144522.648,"size":6514175},{"id":"d99ee857da5f5471188e308dea8852d396bac8a19c60bf1bd2b15e5a33919d657bb87c2dc540265d5ca7055d1d7da73e9829f90fe1917eec896f433bec0f3bed","href":"https://static.observableusercontent.com/files/d99ee857da5f5471188e308dea8852d396bac8a19c60bf1bd2b15e5a33919d657bb87c2dc540265d5ca7055d1d7da73e9829f90fe1917eec896f433bec0f3bed","name":"antarctica_simplified.json","type":"application/json","lastModified":1656406144522.648,"size":41585},{"id":"1c85f227fd59a906d02932ffda59ec7bb09217c43d5ca81f8d35dd4df5673d2976678ac93ce6a372704077a71bc905d7e3f2a4dc9c5e0e8e81c7eeed2a4dcc6a","href":"https://static.observableusercontent.com/files/1c85f227fd59a906d02932ffda59ec7bb09217c43d5ca81f8d35dd4df5673d2976678ac93ce6a372704077a71bc905d7e3f2a4dc9c5e0e8e81c7eeed2a4dcc6a","name":"BurjKhalifa.svg","type":"image/svg+xml","lastModified":1656406144522.648,"size":2243},{"id":"75be5ceafbca6fa3debf1f8f35d644ee736847d23036d0d2d523f0945d137628493088c7688aad1daaec24b4bc18d7287e25d038186d3f4101507857ba80d6e1","href":"https://static.observableusercontent.com/files/75be5ceafbca6fa3debf1f8f35d644ee736847d23036d0d2d523f0945d137628493088c7688aad1daaec24b4bc18d7287e25d038186d3f4101507857ba80d6e1","name":"Eiffel-Tower-Silhouette.svg","type":"image/svg+xml","lastModified":1656406144522.648,"size":6041},{"id":"542b880271e307ade77f4002d2e95620e06a71167f04745c2a2a8b8a8638d774868a5fa5445c05cc62645cf728321a2c6a86d41e44d09169242e7bce8eb036c8","href":"https://static.observableusercontent.com/files/542b880271e307ade77f4002d2e95620e06a71167f04745c2a2a8b8a8638d774868a5fa5445c05cc62645cf728321a2c6a86d41e44d09169242e7bce8eb036c8","name":"elevationProfil.json","type":"application/json","lastModified":1656406144522.648,"size":279732}] 29:{"id":"344add652e24d7ba","slug":"antarctica-elevation/2","title":"Antarctica - Elevation","thumbnail":"0d8a2ac5e1fd17fd41d01fbef04f47051a80f96b5e6001fc3d7d602ecda39aa6","access_level":"public","create_time":"$D2022-06-28T08:49:04.522Z","update_time":"$D2022-06-28T14:22:39.961Z","view_time":null,"first_public_time":"$D2022-06-28T14:23:31.360Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"fa9117f31871f44e","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":"starter_2024"},"version":613,"publish_version":613,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f264b403736fe26","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":null}],"members":[{"type":"individual","id":"1f264b403736fe26","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Antarctica - Elevation","cells":[{"id":0,"value":"# Antarctica - Elevation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"zoomSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"{\n const form = html``;\n form.in.onclick = () => chart.zoomIn();\n form.out.onclick = () => chart.zoomOut();\n form.reset.onclick = () => chart.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"html`\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"{\n const ctx = DOM.svg(width, height);\n const svg = d3.select(ctx);\n const rc = rough.svg(ctx);\n\n const projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([width, height], antarctica_simplified);\n\n const mapPath = d3.geoPath().projection(projection);\n\n antarctica_simplified.features.forEach((feat) =>\n ctx.append(rc.path(mapPath(feat), pencilRough()))\n );\n\n d3.select(\"#start2\").on(\"click\", function () {\n svg\n .selectAll()\n .transition()\n .duration(1500)\n .attr(\"d\", (d) => (d.features[0].geometry.coordinates = [0, 0]));\n });\n\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"function pencilRough(pencilColour = \"rgba(6, 87, 112,0.5)\") {\n return {\n stroke: pencilColour,\n strokeWidth: 1,\n fill: pencilColour,\n fillWeight: 0.3,\n hachureGap: 0.8,\n roughness: 10\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function pencilStyle(pencilColour = \"rgba(120, 120, 120, 0.6)\") {\n return {\n stroke: pencilColour,\n strokeWidth: 2,\n fill: pencilColour,\n fillWeight: 0.3,\n hachureGap: 0.8\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function markerStyle(markerColour = \"rgb(180, 221, 237,0.7)\") {\n return {\n stroke: \"rgb(23, 69, 87,0.7)\",\n strokeWidth: 2.5,\n fill: markerColour,\n fillStyle: \"zigzag\",\n fillWeight: 6,\n hachureGap: 13,\n roughness: 3\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"eiffelTowerSilhouette = FileAttachment(\"Eiffel-Tower-Silhouette.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"burjkhalifa = FileAttachment(\"BurjKhalifa.svg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"elevationprofil = FileAttachment(\"elevationProfil.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"antarctica_simplified = FileAttachment(\"antarctica_simplified.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"antarcticaJson = FileAttachment(\"antarctica_coastlinev7.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"rough = require(\"roughjs@4\").catch(() => window.rough)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"