31:T5f6,function Chart(coordinates, { width = 640, height = width / 2, inset = 0, precision = 0.2, graticule = d3.geoGraticule10(), projection = d3.geoEquirectangular().fitExtent([[inset, inset], [width - inset, height - inset]], {type: "Sphere"}) } = {}) { const path = d3.geoPath(projection); const line = {type: "LineString", coordinates}; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); const g = svg.append("g") .attr("fill", "none") .attr("stroke", "#f00") .attr("stroke-width", 1.5); const pathGraticule = g.append("path") .attr("stroke", "#999") .attr("stroke-width", 0.5); const pathLine = g.append("path"); let point = g.append("g") .selectAll("circle"); return Object.assign(svg.node(), { rotate(rotate) { projection.rotate(rotate); // Render the line with the specified precision. projection.precision(precision); pathLine.attr("d", path(line)); // Override the path context to extract the coordinates. const context = new BufferContext(); path.context(context)(line); path.context(null); point = point .data(context.buffer()) .join("circle") .attr("r", 4.5) .attr("transform", (d) => `translate(${d})`); // Render the graticule with the default precision. projection.precision(0.2); pathGraticule.attr("d", path(graticule)); return svg.node(); } }); }32:[] 2f:{"title":"Adaptive sampling","cells":[{"id":17,"value":"# Adaptive sampling\n\nD3’s projections use **adaptive sampling** to increase the accuracy of projected lines and polygons while still performing efficiently.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"c1 = {\n const c = Chart([180, ...d3.range(-90, 180, 90), 180].map((x) => [x, 0]), {precision: 0});\n const div = htl.html`

${c}

No sampling

`;\n while (true) {\n const rotate = [Date.now() * -0.003, 0, 89];\n c.rotate(rotate);\n yield div;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"Without sampling, only the input vertices of polygons are projected. This results in the artifacts (visible above) due to projected lines becoming curves.","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"c2 = {\n const c = Chart([180].concat(d3.range(-176, 180, 4), [180]).map((x) => [x, 0]), {precision: 0, title: \"Uniform sampling\"});\n const div = htl.html`

${c}

Uniform sampling

`;\n while (true) {\n const rotate = [Date.now() * -0.003, 0, 89];\n c.rotate(rotate);\n yield div;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"Uniform sampling improves the appearance by adding interstitial samples between input vertices. It is inefficient because most samples are not needed, and even areas of extreme distortion still exhibit artifacts!","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"c3 = {\n const c = Chart([180, ...d3.range(-90, 180, 90), 180].map((x) => [x, 0]), {title: \"Adaptive sampling\"});\n const div = htl.html`

${c}

Adaptive sampling

`;\n while (true) {\n const rotate = [Date.now() * -0.003, 0, 89];\n c.rotate(rotate);\n yield div;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"Adaptive sampling takes an idea from [line simplification](https://bost.ocks.org/mike/simplify/) and prioritizes samples based on curvature, producing high-quality results with low overhead.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"class BufferContext {\n constructor() { this._ = []; }\n moveTo(x, y) { this._.push([x, y]); }\n lineTo(x, y) { this._.push([x, y]); }\n closePath() {}\n buffer() {const _ = this._; this._ = []; return _;}\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}