2d:null 2e:["$","title",null,{"children":"Interval compression | Tom Kristian Tjemsland | Observable"}] 33:[] 31:{"id":"388778f6d19d7a7f","slug":"interval-compression","title":"Interval compression","thumbnail":"c5207f6eceb9e45a3afb19e664d76e23d829bfd9b9750ce80e234f20b1849779","access_level":"public","create_time":"$D2019-09-20T10:20:47.767Z","update_time":"$D2019-11-13T10:34:45.649Z","view_time":null,"first_public_time":"$D2019-09-20T10:54:27.035Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a49ab297471727ef","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":"starter_2024"},"version":197,"publish_version":197,"role":null,"authored":false,"authors":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null}],"members":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interval compression","cells":[{"id":0,"value":"md`# Interval compression`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`Merges overlapping intervals. Intervals have been sorted by start position before processing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## To import:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"GetClipboardNode(\"import { CompressInterval } from '@tomktjemsland/interval-compression'\", 'SteelBlue');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`## Examples:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`First series of intervals **before** compression:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{ \n const barHeight = 15;\n \n const height = barHeight * intervals.length;\n \n const svg = d3.create('svg')\n .attr('width', `${width}px`)\n .attr('height', `${height}px`)\n .style('border', '2px dotted DimGrey')\n .style('padding', '5px')\n \n for (let i = 0; i < intervals.length; i++) {\n const start = intervals[i][0] * width;\n const end = intervals[i][1] * width;\n svg.append('polygon')\n .attr('points', `\n ${start},${barHeight * i} \n ${end},${barHeight * i} \n ${end},${barHeight * (i + 1)} \n ${start},${barHeight * (i + 1)}\n `)\n .attr('fill', d3.interpolateRainbow(i / intervals.length))\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`First series of intervals **after** compression:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"{ \n const barHeight = 15;\n \n const compressed = CompressInterval(intervals);\n \n const height = barHeight * compressed.length;\n \n const svg = d3.create('svg')\n .attr('width', `${width}px`)\n .attr('height', `${height}px`)\n .style('border', '2px dotted DimGrey')\n .style('padding', '5px')\n \n for (let i = 0; i < compressed.length; i++) {\n const start = compressed[i][0] * width;\n const end = compressed[i][1] * width;\n svg.append('polygon')\n .attr('points', `\n ${start},${barHeight * i} \n ${end},${barHeight * i} \n ${end},${barHeight * (i + 1)} \n ${start},${barHeight * (i + 1)}\n `)\n .attr('fill', d3.interpolateRainbow(i / compressed.length))\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`Second series of intervals **before** compression:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"{ \n const barHeight = 15;\n \n const height = barHeight * intervals2.length;\n \n const svg = d3.create('svg')\n .attr('width', `${width}px`)\n .attr('height', `${height}px`)\n .style('border', '2px dotted DimGrey')\n .style('padding', '5px')\n \n for (let i = 0; i < intervals2.length; i++) {\n const start = intervals2[i][0] * width;\n const end = intervals2[i][1] * width;\n svg.append('polygon')\n .attr('points', `\n ${start},${barHeight * i} \n ${end},${barHeight * i} \n ${end},${barHeight * (i + 1)} \n ${start},${barHeight * (i + 1)}\n `)\n .attr('fill', d3.interpolateRainbow(i / intervals2.length))\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`Second series of intervals **after** compression:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"{ \n const barHeight = 15;\n \n const compressed = CompressInterval(intervals2);\n \n const height = barHeight * compressed.length;\n \n const svg = d3.create('svg')\n .attr('width', `${width}px`)\n .attr('height', `${height}px`)\n .style('border', '2px dotted DimGrey')\n .style('padding', '5px')\n \n for (let i = 0; i < compressed.length; i++) {\n const start = compressed[i][0] * width;\n const end = compressed[i][1] * width;\n svg.append('polygon')\n .attr('points', `\n ${start},${barHeight * i} \n ${end},${barHeight * i} \n ${end},${barHeight * (i + 1)} \n ${start},${barHeight * (i + 1)}\n `)\n .attr('fill', d3.interpolateRainbow(i / compressed.length))\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## Example data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"intervals = [\n [0.5038362007755104, 0.5646949758012324],\n [0.5147306063801429, 0.5795326645752564],\n [0.5646949758012324, 0.6349754382877081],\n [0.5795326645752564, 0.6458696193359563],\n [0.6349754382877081, 0.7239945393031167],\n [0.6458696193359563, 0.7348885935177998],\n [0.7239945393031167, 0.8166263611915113],\n [0.7348885935177998, 0.8275210846926794],\n [0.8166263611915113, 0.9089055221583787],\n [0.8275210846926794, 0.9197946911502879],\n [0.9089055221583787, 0.9934476589888107],\n [0.9197946911502879, 1],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"intervals2 = [\n [0.05, 0.1],\n [0.125, 0.25],\n [0.2, 0.3],\n [0.4, 0.45],\n [0.425, 0.5],\n [0.425, 0.5],\n [0.6, 0.85],\n [0.67, 0.72],\n [0.75, 0.81],\n [0.84, 0.91],\n [0.93, 0.99],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`## Function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"CompressInterval = (intervals) => {\n \n const output = [];\n \n // Set previous interval to first\n let prev = [...intervals[0]];\n \n for (let i = 1; i < intervals.length; i++) {\n const cur = [...intervals[i]];\n if(cur[0] < prev[1]) { // If inside\n if(cur[1] > prev[1]) prev[1] = cur[1]; // Consume\n } else { // New interval\n output.push(prev);\n prev = cur;\n }\n }\n \n // Push last\n output.push(prev);\n \n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"import { GetClipboardNode } from '@tomktjemsland/copy-to-clipboard'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"