2b:null 2c:["$","title",null,{"children":"Breakpoints Algorithm Live Demo | Eugene Wu | Observable"}] 31:T15ad,function BP(spec) { let w = spec.w, h = spec.h, zero = spec.zero, penalty = spec.penalty || ((breaks) => 0), costf = spec.costf || R.identity; let sx = d3.scaleLinear().range([0, w]), sy = d3.scaleLinear().range([0, h]); let cache = {}; // given a subrange of charts, compute its overall beta and then // compute the sum of squared costs when applying beta to each individual chart // // @charts // @s start index // @e end index, inclusive // const getChartsCost = (charts, s, e) => { const key = `getChartsCost-${s}-${e}`; if (cache[key]) return cache[key]; const subset = R.slice(s, e+1, charts); if (!subset) return { cost: Infinity, beta: null }; const config = getAxisConfig(subset); let totalCost = 0; for (let i = s; i <= e; i++) { let cost = getSegsCost(charts[i], config.axis); totalCost += cost; } //console.log(`slice ${[s,e]}, ${subset.length}\tcost: ${totalCost}`); cache[key] = { cost: totalCost, config: config }; return cache[key]; } // compute the cost of a set of line segments given an axis configuration // cost is the same as "epsilon" in the problem definition above. const getSegsCost = (segs, axis) => { axis = axis || getAxisConfig([segs]).axis; const {dx, dy} = dxys([segs], axis); // components of resultant vector const cost = Math.abs((dy / dx) - 1); //console.log(` ${axis}\t${dy.toFixed(3)}\t${cost.toFixed(3)}\t${costf(cost)}`); return costf(cost); } // Compute beta (the scaling factor) const getAxisConfig = (charts) => { const {dx, dy, miny, maxy} = dxys(charts); const beta = Math.max(0, 1/2 * (1 - (w/h) * (dx / dy))), mid = (maxy - miny) / 2 + miny, Δa = (maxy - miny) / (1 - 2*beta); // delta axis (da) if (zero) { var axismin = 0, axismax = Math.max(Δa, maxy); } else { var axismin = Math.min(mid - 1/2*Δa, miny), axismax = Math.max(axismin + Δa, maxy); } console.assert((axismin <= miny && axismax >= maxy), `axis smaller than data: ${axismin.toFixed()} > ${miny.toFixed()} or ${axismax.toFixed()} < ${maxy.toFixed()}`) const config = { beta, Δa, data: [miny, maxy], axis: [axismin, axismax]}; return config; } // // get the ΔX and ΔY values from Array of line segments // since ΔY depends on the y-axis, can optionally pass a the y-axis domain in. // // @segs Array of segments // @ydomain if null, will be set to the min,max of the y values in @segs // const dxys = (charts, ydomain) => { let miny = Infinity, maxy = -Infinity; let dx = 0, dy = 0; let n = 0; charts.forEach((segs) => { const ys = R.concat([segs[0].y0], R.map(R.prop("y1"), segs)); const xs = R.concat([segs[0].x0], R.map(R.prop("x1"), segs)); sx.domain([_.min(xs), _.max(xs)]); let curminy = _.min(ys); let curmaxy = _.max(ys); if (ydomain) sy.domain(ydomain); else sy.domain([curminy, curmaxy]); miny = _.min([miny, curminy]); maxy = _.max([maxy, curmaxy]); dy += R.sum(segs.map((seg) => Math.abs(sy(seg.y1) - sy(seg.y0)))); dx += R.sum(segs.map((seg) => Math.abs(sx(seg.x1) - sx(seg.x0)))); n += segs.length; }); return { dx, dy, miny, maxy, n }; } // compute the best break points for a dataset. // @charts list of charts, where each chart is an Array of line segments // @k number of break points. If !k, then find the best k as well const getBestBreakpoints = (charts, k) => { cache = {}; // reset the cache const ks = (k != null)? [k] : _.times(charts.length); let bestc = Infinity, bestbreaks = null, bestk = 0; ks.forEach((k) => { let {cost, breaks} = _getBestBreakpoints(charts, 0, charts.length-1, k); cost += penalty(breaks); if (cost < bestc) [bestc, bestbreaks, bestk] = [cost, breaks, k]; }) console.log(`Best k: ${bestk}`) return { cost: bestc, breaks: bestbreaks }; } // Runs the dynamic programming algorithm to find the best k breakpoints // for the charts between s and e (inclusive) const _getBestBreakpoints = (charts, s, e, k) => { const key = `${s}-${e}-${k}` if (cache[key] !== undefined) return cache[key]; if (k == 0 || s == e) { const { cost, config } = getChartsCost(charts, s, e); cache[key] = { cost: cost, breaks: [{s: s, e: e, config: config}] }; return cache[key]; } let bestc = Infinity, bestbreaks = []; for (let i = s; i < e; i++) { const { cost:c1, breaks:breaks1 } = _getBestBreakpoints(charts, s, i, 0); const { cost:c2, breaks:breaks2 } = _getBestBreakpoints(charts, i+1, e, k-1); //console.log(`_Cost: k=${k}\tsei: ${[s,i,e]}\tcosts:${[c1.toFixed(2), c2.toFixed(2)]} \tvs \tbest:${bestc.toFixed(2)}`) if (c1 + c2 < bestc) [bestc, bestbreaks] = [ c1+c2, _.concat(breaks1, breaks2) ]; } cache[key] = { cost: bestc, breaks: bestbreaks }; return cache[key]; } const breakpointCosts = (charts, branges) => { cache = {}; let costs = branges.map(([s, e]) => { return getChartsCost(charts, s, e); }) return costs; } function me(charts, k) { return getBestBreakpoints(charts, k); }; me.getChartsCost = getChartsCost; me.getSegsCost = getSegsCost; me.getAxisConfig = getAxisConfig; me.breakpointCosts = breakpointCosts me.dxys = dxys; return me; }32:[{"id":"65445db762172c18db47d11586beed4416b16e9e703fd538213e1f8eb63d6e1decf01857b889c4236a8c8edf22bfd85d50ea90d88035e7d8203e8ae436ac2fa0","href":"https://static.observableusercontent.com/files/65445db762172c18db47d11586beed4416b16e9e703fd538213e1f8eb63d6e1decf01857b889c4236a8c8edf22bfd85d50ea90d88035e7d8203e8ae436ac2fa0","name":"image.png","type":"image/png","lastModified":1588355614820.201,"size":35205},{"id":"909323a413ef808519b5591618f020829fca8f91a4724e42da0176012307a3e7760b592c844be5b5850c24bf1e2a11a80c78630e7f3af216fb456b08500f8d8a","href":"https://static.observableusercontent.com/files/909323a413ef808519b5591618f020829fca8f91a4724e42da0176012307a3e7760b592c844be5b5850c24bf1e2a11a80c78630e7f3af216fb456b08500f8d8a","name":"image@2.png","type":"image/png","lastModified":1588356541894.144,"size":6860},{"id":"9abee108fbd11976753539a105bb6ec91e3b3ade8e06723aecc2dce5962dfaad4ddddf093370dd840c74b609713c9948003de3e49341910b25b1930d41911984","href":"https://static.observableusercontent.com/files/9abee108fbd11976753539a105bb6ec91e3b3ade8e06723aecc2dce5962dfaad4ddddf093370dd840c74b609713c9948003de3e49341910b25b1930d41911984","name":"humidity.json","type":"application/json","lastModified":1597900621819.381,"size":289274},{"id":"8f4cf5833ba60ea9226a61dd176900d835aa0ae554b51607a9566e7ab3cf53f1e61705086fe4cd6ca6457a112a4ffd775f29f2688878192c80ce4e9ac6f3aad0","href":"https://static.observableusercontent.com/files/8f4cf5833ba60ea9226a61dd176900d835aa0ae554b51607a9566e7ab3cf53f1e61705086fe4cd6ca6457a112a4ffd775f29f2688878192c80ce4e9ac6f3aad0","name":"temp@6.json","type":"application/json","lastModified":1597897902821.178,"size":264872},{"id":"598516ab4ae3e991113897ba05eff0326f49d0ba46c695dcdcc46a8e0ed7739ea01842bd666ce923f5008e3c8b192ba4e4d30dc47cb2aed904d66fa8ed227c96","href":"https://static.observableusercontent.com/files/598516ab4ae3e991113897ba05eff0326f49d0ba46c695dcdcc46a8e0ed7739ea01842bd666ce923f5008e3c8b192ba4e4d30dc47cb2aed904d66fa8ed227c96","name":"nox@6.json","type":"application/json","lastModified":1597897909550.778,"size":255117}] 2f:{"id":"b1f550d3bba19837","slug":null,"title":"Breakpoints Algorithm Live Demo","thumbnail":"24699c8e14a3d25ed31f8c51d953a4578340c4dff42fb61d086b16ea1837422d","access_level":"unlisted","create_time":"$D2020-05-01T17:38:24.742Z","update_time":"$D2021-08-08T20:35:26.385Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"88f2d67476099ae0","login":"sirrice","name":"Eugene Wu","avatar_url":"https://avatars-next.observableusercontent.com/5e51004219ca4b9c29e3077d4983cd0c9cdc686d6fc39557a6c1c7d71f95b0fd","tier":"starter_2024","bio":""},"version":949,"publish_version":949,"role":null,"authored":false,"authors":[{"type":"individual","id":"f79f90977ba58e98","login":"sirrice","name":"Eugene Wu","avatar_url":"https://avatars-next.observableusercontent.com/5e51004219ca4b9c29e3077d4983cd0c9cdc686d6fc39557a6c1c7d71f95b0fd","tier":null,"bio":""}],"members":[{"type":"individual","id":"f79f90977ba58e98","login":"sirrice","name":"Eugene Wu","avatar_url":"https://avatars-next.observableusercontent.com/5e51004219ca4b9c29e3077d4983cd0c9cdc686d6fc39557a6c1c7d71f95b0fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Breakpoints Algorithm Live Demo","cells":[{"id":860,"value":"texmd`\n# Breakpoints Algorithm Live Demo\n\nThis is a demo of the breakpoints algorihm, which automatically chooses locations along an interactive widget where the y-axis of the target chart should be updated to better reflect the data.\n\nThe code is lower in the document. There are fancier enhancements, such as ways to augment the interactions to signify the locations of the breakpoints, that are not present in this demo.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"viewof w = slider({\n min: 100,\n max: 600,\n step: 10,\n value: 400,\n title: \"Chart Width\",\n format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"viewof h = slider({\n min: 100,\n max: 600,\n step: 10,\n value: 300,\n title: \"Chart Height\",\n format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"viewof penaltyBase = slider({\n min: 0,\n max: 5,\n step: 0.1,\n value: 2,\n title: \"Penalty (λ)\",\n format: \",\",\n description: \"Base for Penality Function\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"viewof chosenDatasetName = select({\n title: \"Datasets\",\n options: _.keys(datasets),\n value: \"random\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"viewof hasZero = radio({\n title: \"Should Yaxis Contain Zero?\",\n options: [\"yes\", \"no\"],\n value: \"no\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof view = embed(renderChart(chartsData, breaks))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof selectedIdx = slider({\n min: 0,\n max: chartsData.length-1,\n step: 1,\n value: 1,\n title: \"Chart Slider\",\n format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"cost = config.cost;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"breaks = config.breaks;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# BreakPoints Algorithm\n\nA breakpoint is a position along the slider where the y-axis domain is allowed to change. A breakpoint _range_ is the set of positions along the slider where the charts all share a common y-axis domain. Our goal is to design an algorithm that chooses a good set of breakpoints that partitions the x-axis into contiguous breakpoint ranges in a way that maximizes some measure of goodness.\n\nThere are three main questions to this problem:\n\n1. How to pick a good y-axis domain for a single breakpoint range?\n2. Given k, how to pick k good breakpoints \n3. How to automatically pick a good k?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"texmd`\n## Definitions \n\nThe input $I = [C_1, \\ldots]$ is an ordered or unordered set of charts, where each chart $C_i = [v_1,...,v_m]$ is rendered as $m$ marks. The x and y values for the $k^{th}$ point correspond to $k, v_k$. \n\nLet $b = [s_b, e_b]$ be a breakpoint range corresponding to a subset of the charts $\\mathbb{C}_b = \\{ C_i \\in I | i\\in [s_b, e_b) \\}$. Let $d_b = [\\underline{d}, \\bar{d}]$ be the y-axis domain for the breakpoint range $b$, and $\\Delta d = \\bar{d} - \\underline{d}$. \n\nWe are now ready to choose and assess the goodness of $d_b$ for a given breakpoint $b$.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`## 1. Breakpoint Goodness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"texmd`\n\n### Choosing Aspect Ratios\n\n\n\nThe resultant vectors technique[1] is shown to be a simple and robust way to choose a good aspect ratio for a line chart, and has been validated by Wang et al[2]. The main idea is to view the chart $C$ as a set of $m-1$ line segments $S_C = [s_1, ..., s_{m-1}]$ rather than $m$ points. Each segment is defined by its starting values, and the change along the x and y dimensions: $(x, y, \\Delta x, \\Delta y)$.\n\n

\n\nThe overall angle (the resultant vector) of all of the segments is defined as:\n\n$$\\frac{\\sum_{s\\in S} |\\Delta s.y|}{\\sum_{s\\in S} |\\Delta s.x|}$$\n\nand the optimal aspect ratio $\\alpha$ ensures that the slope of the resultant vector is 1:\n\n$$\\alpha = \\frac{\\sum_{s\\in S} |\\Delta s.x|}{\\sum_{s\\in S} |\\Delta s.y|}$$\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"texmd`\n### Choosing the Y-axis Domain for a Chart\n\n

\n\nLet $h, w$ be the chart height and width in pixels; this is fixed by the designer. Let $\\Delta y$ be the difference between the minimum and maximum y values in the chart _data_, while $\\Delta d$ be the domain of the y-axis. For simplicity, $\\Delta d = (1 + \\beta) \\Delta y$ extends the domain of the data by a ratio of $\\beta$. \n\nThe effective aspect ratio for the chart is defined by $\\frac{h'}{w}$, where $h' = (1-2\\beta)h$ is the effective height of the data. Combining this with the above equations gives us:\n\n$$\\frac{h'}{w} = \\frac{(1-2\\beta)h}{w} = \\alpha = \\frac{\\sum_{s\\in S} |\\Delta s.x|}{\\sum_{s\\in S} |\\Delta s.y|}$$\n\nRearranging the equations, we derive $\\beta$:\n\n$$\\beta = \\frac{1}{2} \\left(1 - \\frac{w \\sum_{s\\in S} \\Delta s.x}{h \\sum_{s\\in S} \\Delta s.y} \\right)$$\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"texmd`\n### Choosing the Y-axis Domain for a Breakpoint Range\n\nGiven a breakpoint range $b$ and the charts within it $\\mathbb{C}_b$, we extend the previous definition to derive a good y-axis domain for $b$. Let $\\beta$ be defined over all line segments in the breakpoint range:\n\n$$\\beta = \\frac{1}{2}\\left(1 - \\frac{w \\sum_{C\\in \\mathbb{C}_b}\\sum_{s\\in S_C}h \\Delta s.x}{h \\sum_{C\\in \\mathbb{C}_b}\\sum_{s\\in S_C} \\Delta s.y} \\right)$$\n\n\n### Goodness Definition\n\nThe y-axis domain of a breakpoint range $b$ enforces a specific aspect ratio $\\alpha_C$ for each chart $C \\in \\mathbb{C}_b$ in the range. We quantify the \"goodness\" of the domain based on the squared deviation from the ideal aspect ratio (1). For each chart $C$, we measure the deviation as $\\epsilon_C$:\n\n$$\\epsilon_C = \\left|\\alpha_C \\frac{\\sum_{s\\in S_C} |\\Delta s.y|}{\\sum_{s\\in S_C} |\\Delta s.x|} - 1\\right|$$\n\nThe error of a breakpoint range is thus:\n\n$$\\epsilon_b = \\sum_{C\\in \\mathbb{C}_b} \\epsilon_C^2$$\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"texmd`\n## 2. How to Pick k Good Breakpoints\n\n### Problem Definition\n\nGiven input charts $I$, identify the optimal set of $k\n$ breakpoint ranges $B^* = [b_1, ... b_k]$ such that the ranges partition the set of charts in $I$, where\n\n$$B^* = \\argmin_{B} \\sum_{b\\in B} \\epsilon_b$$\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`\n### Dynamic Programming Algorithm\n\nThe following pseudocode computes the minimum cost (deviation) and the breakpoint ranges. Calling it with \\`Cost(0, n, k)\\` returns the optimal set of breakpoint ranges.\n\n\\`\\`\\`\nCost(s, e, k):\n \"\"\"\n s: start index in charts\n e: end index in list of charts\n k: number of breakpoints to create\n \"\"\"\n if k == 1:\n # epsilon_b as defined in the Goodness Definition\n return (\\epsilon_b, (s, e)) \n if s == e:\n return infinity\n \n bestbreaks, bestc = null, infinity\n for i in s..e:\n c1, breaks1 = Cost(s,i,1) \n c2, breaks2 = Cost(i+1,e,k-1)\n if c1+c2 < bestc:\n bestc, bestbreaks = c, breaks1 + breaks2\n\n return (bestc, bestbreaks)\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`\n## 3. How to pick the optimal number of breakpoints?\n\nA naive approach is to try increasing numbers of k using the previous dynamic programming solution:\n\n\\`\\`\\`\nbestcost, bestbreaks = infinity, null\nfor k in 1...n:\n c, breaks = Cost(0, n, k)\n c = c + lambda * |breaks| # penalize number of breaks\n if c > bestcost: break\n bestcost, bestbreaks = c, breaks\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"texmd`\n## 4. Extension When Y-axis Should Include Zero\n\nIn the case where the y-axis should not be truncated (should contain 0), the minimum of the y-axis domain is always 0. This means $\\Delta d = \\bar{d}$ is defined by the maximum of the y-axis domain, and the effective chart height is given by:\n\n$$h' = \\frac{\\Delta y}{\\hat{d}} h$$\n\nSetting the aspect ratio of the effective chart height with the resultant vector gives:\n\n$$\\frac{h'}{w} = \\frac{\\frac{\\Delta y}{\\bar{d}}h}{w} = \\alpha = \\frac{\\sum_{s\\in S} |\\Delta s.x|}{\\sum_{s\\in S} |\\Delta s.y|}$$\n\nRearranging the terms, we derive $\\bar{d}$ of a chart with:\n\n$$\\bar{d} = h \\Delta y \\frac{\\sum_{s\\in S} |\\Delta s.y|}{\\sum_{s\\in S} |\\Delta s.x|}$$\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`\n# Implementation\n\nThe following BP function is the primary implementation of steps 1-4 described above.\nThe rest are helper function to create the live demo.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"// Given an array of y values, return a list of line segments. \n// Each line segment is an object: { x0, x1, y0, y1 }\npointsToLineSeg = R.curry((w, h, points) => {\n return _.times(points.length-1, (i) => { return {\n x0: i,\n x1: i+1,\n y0: points[i],\n y1: points[i+1] \n }})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"md`\n## Demo Code\nThe following is code used to create the demo at the top\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"texmd`\n### Function to compute Breakpoints\n\nEdit the following code to tune the parameters of the algorithm. \n\n* w/h: the width and height of the chart\n* zero: set to true if axis should always include 0, default: false\n* costf: once we compute $\\epsilon_C$, it is passed to this function if you wish to scale it. default identity function\n* penalty: takes the list of break points as input, and returns a penalty. Defaults to return 0.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"function getOptimalBreakpoints(rawCharts, k) {\n const bp = BP({ \n w: w, h: h, \n zero: hasZero == \"yes\",\n costf: (cost) => { return Math.tan(cost * 1.5); return Math.pow(Math.E, cost)-1;},\n penalty: (breaks) => { return Math.pow(penaltyBase, breaks.length); }\n })\n \n let charts = rawCharts;\n if (typeof(rawCharts[0][0]) == \"number\") {\n charts = R.map(pointsToLineSeg(w, h), rawCharts);\n } \n \n const printCosts = (branges) => {\n let rets = bp.breakpointCosts(charts, branges);\n let costs = R.map(R.prop(\"cost\"), rets);\n let avgcosts = _.map(_.zip(branges, costs), ([[s,e], c]) => c / (e-s+1));\n console.log(costs);\n //console.log(avgcosts);\n console.log(R.sum(costs));\n }\n //printCosts([[0,5], [6,8]]);\n //printCosts([[0,3], [4,8]]);\n //printCosts([[0,6], [7,8]]);\n //printCosts([[0,6], [7,7], [8,8]]);\n return bp(charts, k);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`\n### Datasets\n\nYou can choose from 4 datasets\n\n* randomdata: randomly generated data\n* humiditydata: humidity from an air quality dataset\n* tempdata: temperature data\n* noxdata: nox air quality data\n\nThe variable chartsData contains the data used to render the live demo\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"randomdata = (()=>{\n let genChartData = (v) => _.times(30, () => (1 + Math.random() ) * v);\n let centroids = [5, 5, 5, 10, 20, 100, 100, 10000, 250, 300, 300, 500, 500, 600, 600];\n let data = _.map(centroids, genChartData); \n return data;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"datasets = ({\n random: randomdata,\n humidity: humiditydata,\n temperature: tempdata,\n nox: noxdata\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"chartsData = datasets[chosenDatasetName];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"md`\n### Generate Breakpoints\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"config = getOptimalBreakpoints(chartsData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"renderChart = (chartsData, breaks) => {\n const chartData = chartsData[selectedIdx];\n // turn it into {x, y} points\n let data = null;\n if (typeof(chartData[0]) == \"number\") {\n data = _.map(chartData, (v, i) => { return { x: i, y: v };})\n } else {\n data = R.concat(\n [{ x:chartData[0].x0, y:chartData[0].y0 }],\n chartData.slice(1).map(({x1, y1}) => { return {x: x1, y: y1} }));\n }\n\n // get the axis scale\n var ydomain = null;\n breaks.forEach((b) => {\n if (b.s <= selectedIdx && selectedIdx <= b.e) {\n ydomain = b.config.axis;\n }\n });\n\n var spec = {\n \"datasets\": {\n \"mydata\": data\n },\n height: h,\n width: w,\n \"data\": { name: \"mydata\"},\n \"mark\": \"point\",\n \"encoding\": {\n \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n \"y\": {\n \"field\": \"y\", \n \"type\": \"quantitative\",\n \"scale\": {\"domain\": ydomain},\n }\n }\n }\n return (spec)\n\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`\n## References\n\n[1] Saptarshi and Cleveland. \"Perceptual, mathematical, and statistical properties of judging functional dependence on visual displays\" 2011\n\n[2] Yunhai Wang et al. \"Is There a Robust Technique for Selecting Aspect Ratios in Line Charts?\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`\n# Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function texmd() {\n var string = String.raw.apply(String, arguments);\n \n var display_maths = [];\n string = string.replace(/\\$\\$([^\\$]*)\\$\\$/g, (s, m) => {\n var i = display_maths.push(m) - 1;\n return `\\n\\n

\\n\\n`;\n });\n \n var inline_maths = [];\n string = string.replace(/\\$([^\\$]*)\\$/g, (s, m) => {\n var i = inline_maths.push(m) - 1;\n return ``;\n });\n \n var node = md([string]);\n \n node.querySelectorAll('span.imath').forEach(span => {\n var i = parseInt(span.attributes.n.value);\n if (inline_maths[i] === undefined) throw 'What?';\n span.appendChild(tex`${inline_maths[i]}`);\n span.style['font-size'] = '.95em';\n });\n \n node.querySelectorAll('div.dmath').forEach(div => {\n var i = parseInt(div.attributes.n.value);\n div.appendChild(tex.block`${display_maths[i]}`);\n div.style['font-size'] = '.95em';\n });\n \n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"R = require(\"ramda\"); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"R.concatAll = R.reduce(R.concat, []);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"embed = require.alias({\n \"vega\": \"vega@5\",\n \"vega-lite\": \"vega-lite@3\"\n})(\"vega-embed@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"import {slider, select, radio, dropdown} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"tempdata = FileAttachment(\"temp@6.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"noxdata = FileAttachment(\"nox@6.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"humiditydata = FileAttachment(\"humidity.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"