29:null 2a:["$","title",null,{"children":"Elevation Worldwide with horizon chart | Xavi Giménez | Observable"}] 2f:[] 2d:{"id":"55be06a6efb28789","slug":"elevation-worldwide-with-horizon-chart","title":"Elevation Worldwide with horizon chart","thumbnail":"01e5dbeac8855e8cf6757cb20c357b22bc2ba512870a0f319e17748d16da9531","access_level":"public","create_time":"$D2021-03-24T13:47:22.875Z","update_time":"$D2021-03-24T17:09:09.998Z","view_time":null,"first_public_time":"$D2021-03-24T17:09:15.166Z","has_unpublished_edits":null,"fork":{"id":"e83a0b0572113c04","slug":"elevation","title":"Elevation Scan","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":4,"starred":false,"owner":{"type":"team","id":"3b37baced2fe95b2","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":"starter_2024"},"version":978,"publish_version":978,"role":null,"authored":false,"authors":[{"type":"individual","id":"c659cc48420e349d","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":null}],"members":[{"type":"individual","id":"c659cc48420e349d","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Elevation Worldwide with horizon chart","cells":[{"id":0,"value":"md`# Elevation Worldwide with horizon chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"md `Fork from the notebook [Elevation scan](https://observablehq.com/@neocartocnrs/elevation), here displaying elevation data as an Horizon chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"viewof indicatorRatio = Radio([\"mantain ratio\", \"x2\", \"x3\"], { value: \"x2\", label: \"Map height ratio: \" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"viewof overlap = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} band${form.i.valueAsNumber === 1 ? \"\" : \"s\"}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height*1.4])\n .style(\"font\", \"10px sans-serif\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(\n series.map(serie => {\n serie.clipId = DOM.uid(\"clip\");\n serie.pathId = DOM.uid(\"path\");\n return serie;\n })\n )\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * (step + 1)})`);\n\n g.append(\"clipPath\")\n .attr(\"id\", d => d.clipId.id)\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", step);\n\n g.append(\"defs\").append(\"path\")\n .attr(\"id\", d => d.pathId.id)\n .attr(\"d\", d => area(d));\n\n g.append(\"g\")\n .attr(\"clip-path\", d => d.clipId)\n .selectAll(\"use\")\n .data(d => new Array(overlap).fill(d))\n .join(\"use\")\n .attr(\"fill\", (d, i) => color(i))\n .attr(\"transform\", (d, i) => `translate(0,${(i + 1) * step})`)\n .attr(\"xlink:href\", d => d.pathId.href);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`**1. Data import**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof indicator = Radio([\"mean\", \"max\"], { value: \"max\", label: \"Altitude\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dem = {\n let dem;\n if (indicator == \"mean\") {\n dem = d3\n .csv(\n \"https://nlambert.gitpages.huma-num.fr/resources/datasets/DEM/dem.csv\"\n )\n .then(r => r.filter(d => d.lat > -58).filter(d => d.lat <= 87));\n }\n\n if (indicator == \"max\") {\n dem = d3\n .csv(\n \"https://nlambert.gitpages.huma-num.fr/resources/datasets/DEM/dem2.csv\"\n )\n .then(r => r.filter(d => d.lat > -58).filter(d => d.lat <= 87));\n }\n return dem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"world = d3.json(\n \"https://nlambert.gitpages.huma-num.fr/resources/basemaps/world_countries.topojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`** 2. Data Handling**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"countries = topojson.feature(world, world.objects.world_countries_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"projection = d3\n .geoEquirectangular()\n .scale(160)\n .translate([width / 2, height / 2 + 40])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data = d3.map(dem, d => ({\n x: Math.round(projection([d.lon, d.lat])[0] * 10) / 10,\n y: Math.round(projection([d.lon, d.lat])[1] * 10) / 10,\n z: +d.elevation\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"base_height = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = (indicatorRatio === 'mantain ratio')? base_height : (indicatorRatio === 'x2')? base_height*2 : base_height*3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"radius = d3.scaleSqrt([0, d3.max(data, d => d.z)], [0, 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`**3. Coordinates to Lines**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"rows = Array.from(new Set(data.map(d => d.y)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"columns = Array.from(new Set(data.map(d => d.x)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"series = {\n let linesByAxisValue = _\n .chain(rows)\n .map( (axisValue, i) => data.filter(d => d.y == rows[i] ) )\n .forEach(lineByAxisValue => {\n let ybase = d3.min(lineByAxisValue, d => d.y),\n a = { x: -1.5, y: ybase, z:0 },\n b = { x: 1001.5, y: ybase, z:0 };\n lineByAxisValue.unshift(a);\n lineByAxisValue.push(b);\n })\n .value();\n return linesByAxisValue; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"step = height / series.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"x = d3.scaleLinear()\n .domain([\n d3.min(series, serie => d3.min(serie, d => d.x) ),\n d3.max(series, serie => d3.max(serie, d => d.x) )\n ])\n.range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"y = d3.scaleLinear()\n .domain([\n 0, \n d3.max(series, serie => d3.max(serie, d => d.z) )\n ])\n .range([0, -overlap * step])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .x(d => x(d.x))\n .y0(0)\n .y1(d => y(d.z))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`Related notebooks:\n\n* [Elevation scan](https://observablehq.com/@neocartocnrs/elevation)\n* [Elevation scan with bathymetry](https://observablehq.com/@neocartocnrs/elevation-scan-with-bathymetry)\n* [Ridgeline plot](https://observablehq.com/@d3/ridgeline-plot)\n* [Horizon chart](https://observablehq.com/@d3/horizon-chart)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"import { Radio, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"