31:[] 2f:{"title":"Elevation Worldwide with horizon chart","cells":[{"id":0,"value":"md`# Elevation Worldwide with horizon chart`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":917,"value":"viewof indicatorRatio = Radio([\"mantain ratio\", \"x2\", \"x3\"], { value: \"x2\", label: \"Map height ratio: \" })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":808,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`**1. Data import**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"viewof indicator = Radio([\"mean\", \"max\"], { value: \"max\", label: \"Altitude\" })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":17,"value":"md`** 2. Data Handling**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"countries = topojson.feature(world, world.objects.world_countries_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"projection = d3\n .geoEquirectangular()\n .scale(160)\n .translate([width / 2, height / 2 + 40])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":526,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"base_height = 440","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = (indicatorRatio === 'mantain ratio')? base_height : (indicatorRatio === 'x2')? base_height*2 : base_height*3","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"radius = d3.scaleSqrt([0, d3.max(data, d => d.z)], [0, 5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`**3. Coordinates to Lines**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"rows = Array.from(new Set(data.map(d => d.y)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"columns = Array.from(new Set(data.map(d => d.x)))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":802,"value":"step = height / series.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":4,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":754,"value":"import { Radio, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}