2f:Tac1,chart = (houseWidth) => { const path = d3.geoPath(); const contours = d3.tricontour(); const svg = d3 .select(DOM.svg(width, height)) .style("display", "block") .style("margin", "0 -14px") .style("width", "calc(100% + 28px)") .style("height", "auto"); const defs = svg.append("defs"), wrap = svg.append("g"), g = wrap.append("g"), labels_g = wrap.append("g"); for (const threshold of thresholds) { let mask_id = DOM.uid(), mask = defs.append("mask").attr("id", mask_id.id); mask .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "white"); const cont = contours.contour(data, threshold); g.append("path") .attr("id", `fill-${threshold}`) .attr("d", path(cont)) .attr("fill", color(threshold)) .attr('opacity', 1); g.append("path") .attr("id", `stroke-${threshold}`) .attr("d", path(cont)) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-opacity", threshold % 5 === 0 ? 1 : 0.3) .attr("mask", mask_id); if (threshold % 10 === 0) { for (const polygon of cont.coordinates) { for (const [j, ring] of polygon.entries()) { const p = ring.slice(1, Infinity), // best number of steps to divide ring.length possibilities = d3.range(steps, steps * 1.4), scores = possibilities.map((d) => -((p.length - 1) % d)), n = possibilities[d3.scan(scores)], // best starting point: bottom for first rings, top for holes start = 1 + (d3.scan(p.map((xy) => (j === 0 ? -1 : 1) * xy[1])) % n), margin = 2; for (const [i, xy] of p.entries()) { if ( i % n === start && xy[0] > margin && xy[0] < width - margin && xy[1] > margin && xy[1] < height - margin ) { const a = (i - 2 + p.length) % p.length, b = (i + 2) % p.length, dx = p[b][0] - p[a][0], dy = p[b][1] - p[a][1]; if (dx === 0 && dy === 0) return; // add the label's contour to the path stroke clip mask .append("circle") .attr("r", 13) .attr("fill", "black") .attr("transform", `translate(${xy})`); addlabel(labels_g, `${threshold}`, xy, Math.atan2(dy, dx)); } } } } } } svg.on('click', (e) => { const mousePointer = d3.pointer(e); setHouse(svg, houseWidth, mousePointer[0], mousePointer[1]); }) return svg.node(); }30:T79d,setHouse = (svg, houseWidth, cx, cy) => { const strokeWidth = houseWidth/10; const gHouse = svg.selectAll('.house-g') .data([0]) .join('g') .attr('class', 'house-g') .attr('pointer-events', 'none'); // Door gHouse.selectAll('.house-door-up') .data([0]) .join('line') .attr('class', 'house-door-up') .attr('x1', cx - houseWidth/2) .attr('x2', cx + houseWidth/2) .attr('y1', cy + houseWidth/2) .attr('y2', cy - houseWidth/2) .attr('stroke-width', strokeWidth) .attr('stroke', 'black'); gHouse.selectAll('.house-door-down') .data([0]) .join('line') .attr('class', 'house-door-down') .attr('x1', cx - houseWidth/2) .attr('x2', cx + houseWidth/2) .attr('y1', cy - houseWidth/2) .attr('y2', cy + houseWidth/2) .attr('stroke-width', strokeWidth) .attr('stroke', 'black'); // Walls svg.selectAll('.house-walls') .data([0]) .join('rect') .attr('class', 'house-walls') .attr('x', cx - houseWidth/2) .attr('y', cy - houseWidth/2) .attr('width', houseWidth) .attr('height', houseWidth) .attr('stroke-width', strokeWidth) .attr('stroke', 'black') .attr('fill', 'none'); // Roof gHouse.selectAll('.house-roof-up') .data([0]) .join('line') .attr('class', 'house-roof-up') .attr('x1', cx - houseWidth/2) .attr('x2', cx) .attr('y1', cy + houseWidth/2 - houseWidth) .attr('y2', cy - houseWidth) .attr('stroke-width', strokeWidth) .attr('stroke', 'black'); gHouse.selectAll('.house-roof-down') .data([0]) .join('line') .attr('class', 'house-roof-down') .attr('x1', cx) .attr('x2', cx + houseWidth/2) .attr('y1', cy - houseWidth) .attr('y2', cy + houseWidth/2 - houseWidth) .attr('stroke-width', strokeWidth) .attr('stroke', 'black'); }31:T696,function ramp(name) { // Taken from https://observablehq.com/@d3/color-schemes const n = 256; let canvas; let colors; let dark; if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) { colors = d3[`scheme${name}`][n]; dark = d3.lab(colors[0]).l < 50; } else { const interpolate = d3[`interpolate${name}`]; colors = []; dark = d3.lab(interpolate(0)).l < 50; for (let i = 0; i < n; ++i) { colors.push(d3.rgb(interpolate(i / (n - 1))).hex()); } } if (n < 128) { canvas = htl.svg`

${ramp(\"BuPu\")}

${ramp(\"YlOrBr\")}

${ramp(\"YlGn\")}

${ramp(\"Turbo\")}

${ramp(\"Rainbow\")}

${ramp(\"RdYlGn\")}

${ramp(\"Spectral\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":822,"value":"chart(30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"viewof replay = Inputs.button(\"If the terrain looks to impracticable, you can click here to generate a new one\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"As the conflict seems just about to be settled, Rudolph steps through the door with the construction plan in his hooves: \"Actually, I think that my initial calculations were a bit off, and the factory will be much larger than we had originally assumed. Our actual goal should be to find an area of equal height that is as large as possible.\" \nAfter initial expressions of discontent, Santa and the elves agree that this should be the new priority.","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"## The _actual_ solution","pinned":false,"hidden":false,"mode":"md"},{"id":829,"value":"Select a color scale and a location for the factory that meets the new requirement: It should be placed on an area with the same isovalue that is as large as possible. Which color scale allows you to create the most convincing presentation? \nTake a screenshot of your solution and post it on the Miro board for your respective exercise group: \nGroup 1: https://miro.com/app/board/uXjVLGnCaQ8=/?share_link_id=746885112655 \nGroup 2: https://miro.com/app/board/uXjVLGn7HpU=/?share_link_id=441951862348 \nGroup 3: https://miro.com/app/board/uXjVLGn7HrA=/?share_link_id=147432664183 \nGroup 4: https://miro.com/app/board/uXjVLGn7H28=/?share_link_id=346156132315 \nGroup 5: https://miro.com/app/board/uXjVLGmkeho=/?share_link_id=306310064429 ","pinned":false,"hidden":false,"mode":"md"},{"id":971,"value":"

${ramp(\"BuPu\")}

${ramp(\"YlOrBr\")}

${ramp(\"YlGn\")}

${ramp(\"Turbo\")}

${ramp(\"Rainbow\")}

${ramp(\"RdYlGn\")}

${ramp(\"Spectral\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":898,"value":"chart(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"viewof replayNew = Inputs.button(\"If the terrain looks to impracticable, you can click here to generate a new one\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"## Resources","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"This notebook is based on the following two notebooks:\n- https://observablehq.com/@fil/tricontour-labels\n- https://observablehq.com/@d3/color-schemes","pinned":false,"hidden":false,"mode":"md"},{"id":853,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"steps = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"viewof ticks = Inputs.select([10, 20, 40], {\n value: 40,\n label: \"thresholds\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"function addlabel(svg, text, xy, angle) {\n angle += Math.cos(angle) < 0 ? Math.PI : 0;\n\n svg\n .append(\"text\")\n .attr(\"fill\", \"#fff\")\n .attr(\"stroke\", \"none\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dy\", \"0.3em\")\n .attr(\"transform\", `translate(${xy})rotate(${angle * degrees})`)\n .text(text)\n .attr('fill', 'black')\n .style(\"font-size\", \"16px\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 500//700","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"color = d3\n .scaleSequential(getColorInterpolator()) //Spectral, Turbo, YlOrBr\n .domain(d3.extent(data, (d) => d[2]))\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"getColorInterpolator = () => {\n if (interpolatorCurrent == \"Spectral\") return (t) => d3.interpolateSpectral(1-t);\n else if (interpolatorCurrent == \"Turbo\") return (t) => d3.interpolateTurbo(t);\n else if (interpolatorCurrent == \"YlOrBr\") return (t) => d3.interpolateYlOrBr(t);\n else if (interpolatorCurrent == \"BuPu\") return (t) => d3.interpolateBuPu(t);\n else if (interpolatorCurrent == \"RdYlGn\") return (t) => d3.interpolateRdYlGn(1-t);\n else if (interpolatorCurrent == \"YlGn\") return (t) => d3.interpolateYlGn(t);\n else if (interpolatorCurrent == \"Rainbow\") return (t) => d3.interpolateRainbow(t);\n else if (interpolatorCurrent == \"Sinebow\") return (t) => d3.interpolateSinebow(t);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"thresholds = color.ticks(ticks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"data = {\n replay;\n replayNew;\n const noise = new Noise(2);\n const p = 0.003; // freq\n return Array.from({ length: 3000 }, () => {\n const x = Math.random() * width,\n y = Math.random() * height,\n z = 40 + 220 * noise.noise(p * x, p * y);\n return [x, y, z];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"import { Noise } from \"@mbostock/perlin-noise-contours\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@7\", \"d3-tricontour@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"import {degrees} from \"@fil/math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"mutable interpolatorCurrent = \"BuPu\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"image = FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}