2e:null 2f:["$","title",null,{"children":"Interpolating vs simplyifing lines | jotasolano | Observable"}] 34:[] 32:{"id":"02291b3eb380a297","slug":"untitled","title":"Interpolating vs simplyifing lines","thumbnail":"1ce6c7e368facd6cc288fa836b701c7e6c9e8fa048ab4a486c7a058f7fd1eeb9","access_level":"public","create_time":"$D2019-02-08T16:00:11.922Z","update_time":"$D2019-03-05T16:32:48.984Z","view_time":null,"first_public_time":"$D2019-02-08T16:57:49.505Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58e5ac1a3e3ed36a","login":"jotasolano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c656cd1d2cfb4f91cc5a81160e046f44058ea27455d7785396bafb2f7662ba03","tier":"starter_2024"},"version":292,"publish_version":292,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff8a3b770bbe1503","login":"jotasolano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c656cd1d2cfb4f91cc5a81160e046f44058ea27455d7785396bafb2f7662ba03","tier":null}],"members":[{"type":"individual","id":"ff8a3b770bbe1503","login":"jotasolano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c656cd1d2cfb4f91cc5a81160e046f44058ea27455d7785396bafb2f7662ba03","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof currentInterpolation = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"viewof tolerance = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"tolerance","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"distribution = getCounts(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"density = kernelDensityEstimator(kernelEpanechnikov(0.05), x.ticks(20))(distribution);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`### Misc chart functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"y = d3.scaleLinear()\n .domain([0, 10])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"x = d3.scaleLinear()\n .domain([0,1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"height = 280","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"margin = ({top: 10, right: 30, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"simpleLineData = simplify(newData, tolerance)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`### Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"simplify = require(\"simplify-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"