30:[] 2e:{"title":"Interpolating vs simplyifing lines","cells":[{"id":0,"value":"md`# Interpolating vs simplyifing lines\nThe example below describes a \"spiky\" line that is being interpolated by a variety of methods by using the dropdown menu`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof currentInterpolation = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`The same interpolation is applied to a simplified line using the library [Simplify.js](http://mourner.github.io/simplify-js/) which reduces the number of points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof tolerance = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"tolerance","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"simpleChart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(simpleLineData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", simpleLine);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`As we can see from the example, it **does not seem like reducing the number of points reduces the spikiness of the curve**, and therefore I think we should focus on just smoothing the curves using some form of interpolation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"densityChart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(density)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", densityLine);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"interpolations = ({\"Linear\": d3.curveLinear,\n \"Basis Spline\": d3.curveBasis,\n \"Bundle – 0.25\": d3.curveBundle.beta(0.25),\n \"Bundle – 0.50\": d3.curveBundle.beta(0.50),\n \"Bundle – 0.75\": d3.curveBundle.beta(0.75),\n \"Catmull–Rom – 1\": d3.curveCatmullRom.alpha(1),\n \"Catmull–Rom – 0.75\": d3.curveCatmullRom.alpha(0.75)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"kernelDensityEstimator = function(kernel, X) {\n return function(V) {\n return X.map(function(x) {\n return [x, d3.mean(V, function(v) { return kernel(x - v); })];\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"kernelEpanechnikov = function(k) {\n return function(v) {\n return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"getCounts = function(array) {\n let newArray = []\n array.forEach(d => \n {\n let iterations = d.total;\n for (let i = 0; i < iterations; i++) {\n newArray.push(d.value)\n }\n })\n return newArray\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"distribution = getCounts(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"density = kernelDensityEstimator(kernelEpanechnikov(0.05), x.ticks(20))(distribution);","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`### Misc chart functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"y = d3.scaleLinear()\n .domain([0, 10])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"x = d3.scaleLinear()\n .domain([0,1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"line = d3.line()\n .curve(interpolations[currentInterpolation])\n .x(d => x(d.value))\n .y(d => y(d.total))","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"simpleLine = d3.line()\n .curve(interpolations[currentInterpolation])\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"densityLine = d3.line()\n .curve(interpolations[currentInterpolation])\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"height = 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"margin = ({top: 10, right: 30, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"data = [{\"value\":0.3352304697036743,\"total\":9},{\"value\":0.3566436767578125,\"total\":3},{\"value\":0.3900628089904785,\"total\":5},{\"value\":0.4128035604953766,\"total\":3},{\"value\":0.4430965185165405,\"total\":5},{\"value\":0.502242386341095,\"total\":4},{\"value\":0.5258843898773193,\"total\":1},{\"value\":0.5709661841392517,\"total\":7},{\"value\":0.5917576551437378,\"total\":1},{\"value\":0.5939828157424927,\"total\":3},{\"value\":0.6279350519180298,\"total\":3},{\"value\":0.6773920059204102,\"total\":6},{\"value\":0.6977217793464661,\"total\":1},{\"value\":0.7269864082336426,\"total\":1},{\"value\":0.7767787575721741,\"total\":1}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"newData = [{\"x\":0.3352304697036743,\"y\":9},{\"x\":0.3566436767578125,\"y\":3},{\"x\":0.3900628089904785,\"y\":5},{\"x\":0.4128035604953766,\"y\":3},{\"x\":0.4430965185165405,\"y\":5},{\"x\":0.502242386341095,\"y\":4},{\"x\":0.5258843898773193,\"y\":1},{\"x\":0.5709661841392517,\"y\":7},{\"x\":0.5917576551437378,\"y\":1},{\"x\":0.5939828157424927,\"y\":3},{\"x\":0.6279350519180298,\"y\":3},{\"x\":0.6773920059204102,\"y\":6},{\"x\":0.6977217793464661,\"y\":1},{\"x\":0.7269864082336426,\"y\":1},{\"x\":0.7767787575721741,\"y\":1}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"simpleLineData = simplify(newData, tolerance)","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5.8.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"simplify = require(\"simplify-js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}