31:[] 2f:{"title":"d3-interpolate-curve","cells":[{"id":178,"value":"md`# d3-interpolate-curve\n\nD3 has [d3-interpolate](https://github.com/d3/d3-interpolate) functions, for example \\`d3.interpolateBasis()\\`, for interpolating a series in numbers into a curve using the Basis interpolation algorithm.\n\nD3 also has [d3-curve](https://github.com/d3/d3-shape#curves) functions, like \\`d3.curveCardinal()\\` and \\`d3.curveMonotoneX()\\`, which can be used to quickly generate SVG curve paths.\n\nHowever, interpolate functions like \\`d3.interpolateCardinal()\\` and \\`d3.interpolateMonotoneX()\\` do not currently exist in D3, this limits us to to only be able to generate Cardinal and MonotoneX curves for SVG and not for things like X3D.\n\nThe [d3-interpolate-curve](https://github.com/jamesleesaunders/d3-interpolate-curve) plugin has been written to fill this gap to provide missing interpolation functions like \\`d3.interpolateCardinal()\\` and \\`d3.interpolateMonotoneX()\\` as well as \\`d3.interpolateFromCurve()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"md`## Initial Array of Values\n\nThroughout this notebook I will be using the following simple set of values and interpolate them in different ways.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"values = [2, 4, 6, 10, 12, 10, 5, 7, 3];","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"points = x3dPoints(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"area1 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`## Basis Interpolation\n\n\\`d3.interpolateBasis(values)\\`\n\nUsing d3's native \\`d3.interpolateBasis()\\` function it is fairly trivial to interpolate the initial values with the basis algorithm.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"interpolateBasis = function(values) {\n const valuePolator = d3.interpolateBasis(values);\n return sampler.map((t) => valuePolator(t));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"valuesBasis = interpolateBasis(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"pointsBasis = x3dPoints(valuesBasis);","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"area2 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"md`\nWith the help from a fellow x3dom developer, Andreas Plesch came up with a custom function 'interpolateFromCurve()' which attempts to behave in the same way as \\`d3.interpolateBasis()\\` but as well as values, it is also passed one of the D3 curve functions. The problem is this funtion is considerably inefficient because, under the hood, it has to create an detached SVG element, generate the curve then reverse engineer the SVG curve back to values. The process of converting \\`values\\` -> \\`curve\\` -> \\`svg\\` -> \\`values\\` is a little bit long winded and a little heavy when rendering 3D scenes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"md`## Cardinal Interpolation \n\n\\`interpolateFromCurve(values, d3.curveCardinal)\\`\n\nBecause there is no native \\`d3.interpolateCardinal()\\` function we use a custom \\`interpolateFromCurve()\\` function which is passed the values and the \\`d3.curveCardinal()\\` function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"interpolateCardinal = function(values) {\n const valuePolator = d3.interpolateCardinal(values);\n return sampler.map((t) => valuePolator(t));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"valuesCardinal = interpolateCardinal(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"pointsCardinal = x3dPoints(valuesCardinal);","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"area3 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"md`## Catmull–Rom Interpolation\n\n\\`interpolateCurveCatmullRom(values)\\`\n\nSimilarly we can also pass other curve functions into interpolateCurveCatmullRom, for example \\`d3.curveLinear\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"interpolateCatmullRom = function(values) {\n const valuePolator = d3.interpolateCatmullRom(values);\n return sampler.map((t) => valuePolator(t));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"valuesCatmullRom = interpolateCatmullRom(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"pointsCatmullRom = x3dPoints(valuesCatmullRom);","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"area4 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`## MonotoneX Interpolation\n\n\\`interpolateFromCurve(values, d3.curveMonotoneX)\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"interpolateMonotoneX = function(values) {\n const valuePolator = d3.interpolateMonotoneX(values);\n return sampler.map((t) => valuePolator(t));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"valuesMonotoneX = interpolateMonotoneX(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"pointsMonotoneX = x3dPoints(valuesMonotoneX);","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"area5 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`## Linear Interpolation\n\n\\`interpolateFromCurve(values, d3.curveLinear)\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"interpolateLinear = function(values) {\n const valuePolator = d3.interpolateFromCurve(values, d3.curveLinear);\n return sampler.map((t) => valuePolator(t));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"valuesLinear = interpolateLinear(values);","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"pointsLinear = x3dPoints(valuesLinear);","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"area6 = html`\n\n \n \n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`## Interpolate Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"sampler = d3.range(0, 1, 1 / samples);","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"x3dPoints = function(values) {\n const domain = d3.extent(values.map((d) => d.key));\n \n const xScale = d3.scaleLinear()\n .domain([0, values.length])\n .range([0, 40]);\n \n const yScale = d3.scaleLinear()\n .domain(d3.extent(values))\n .range([0, 40]);\n\n // Convert values into IFS coordinates\n let coords = values.map(function(pointThis, indexThis, array) {\n let indexNext = indexThis + 1;\n if (indexNext >= array.length) {\n return null;\n }\n let pointNext = array[indexNext];\n\n let x1 = xScale(indexThis);\n let x2 = xScale(indexNext);\n let y1 = yScale(pointThis);\n let y2 = yScale(pointNext);\n\n return [x1, 0, 0, x1, y1, 0, x2, y2, 0, x2, 0, 0];\n }).filter(function(d) {\n return d !== null;\n });\n \n let data = {};\n \n data.point = coords.map((d) => d.join(\" \")).join(\" \");\n data.coordIndex = coords.map((d, i) => {\n let offset = i * 4;\n return [offset, offset + 1, offset + 2, offset + 3, -1].join(\" \");\n }).join(\" \");\n\n return data;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`## Variables, Array and Scales\n\nThe following are the base dimentions, scales and data used in the examples above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"color = 'green'","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"transparency = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"width = 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"height = 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"samples = 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`## Load D3 & X3DOM Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-interpolate-curve\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"x3dom = require('https://x3dom.org/download/dev/x3dom-full.js').catch(() => window.x3dom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"reloader1 = { \n x3dom.reload();\n return area1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"reloader2 = { \n x3dom.reload();\n return area2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"reloader3 = { \n x3dom.reload();\n return area4;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"reloader4 = { \n x3dom.reload();\n return area4;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"reloader5 = { \n x3dom.reload();\n return area5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"reloader6 = { \n x3dom.reload();\n return area6;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}