2e:null 2f:["$","title",null,{"children":"Variable-Thickness Band | Mike Bostock | Observable"}] 34:[] 32:{"id":"3137dc92ecdaff98","slug":"variable-thickness-band","title":"Variable-Thickness Band","thumbnail":"3115bc9a8e7d1cd96fe0649429443fadb0f73d95f90dcb1d4c29249d93fda6e4","access_level":"public","create_time":"$D2019-03-14T16:46:14.709Z","update_time":"$D2019-03-14T18:46:56.886Z","view_time":null,"first_public_time":"$D2019-03-14T17:28:57.554Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Variable-Thickness Band","cells":[{"id":0,"value":"md`# Variable-Thickness Band\n\nRef. [Russell Goldenberg](/@russellgoldenberg/variable-thickness-band), [Bezier.js](/@mbostock/hello-bezier-js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof z2 = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px maximum thickness`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"chart = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"curves = {\n const bottoms = [];\n const tops = [];\n for (let i = 0, n = values.length - 1; i < n; ++i) {\n const x1 = x(i), x2 = x(i + 1);\n const y1 = y(values[i]), y2 = y(values[i + 1]);\n const z1 = z(values[i]), z2 = z(values[i + 1]);\n if (i === 0) {\n bottoms.push(`M ${x1} ${y1 + z1}`);\n tops.push(`Z`);\n }\n if (y1 === y2) { // Bezier.js can’t outline straight lines. :(\n bottoms.push(`H ${x2}`);\n tops.push(`H ${x1}`);\n } else {\n const curve = new Bezier(x1, y1, (x1 + x2) / 2, y1, (x1 + x2) / 2, y2, x2, y2);\n const outlines = curve.outline(z1, z1, z2, z2).curves;\n let j = 1; while (j < outlines.length && !outlines[j]._linear) ++j;\n bottoms.push(...outlines.slice(1, j).map(formatCurve));\n tops.push(...outlines.slice(j + 1).map(formatCurve).reverse());\n }\n if (i === n - 1) {\n bottoms.push(`V ${y2 - z2}`);\n }\n }\n return [...bottoms, ...tops.reverse()];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"function formatCurve(curve) {\n const s = curve.toSVG();\n return s.slice(s.indexOf(\"C\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"values = [0, 0, 0, 0, 0, 0, 0, 2, 374, 526, 255, 557, 889, 935, 835, 563, 327, 521, 550, 656, 565]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"x = d3.scaleLinear([0, values.length - 1], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"y = d3.scaleLinear([0, d3.max(values)], [height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"z = d3.scaleLinear([0, d3.max(values)], [0, z2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"margin = ({top: 40, right: 40, bottom: 40, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Bezier = require(\"bezier-js@2/bezier.js\").catch(() => window.Bezier)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"