2b:null 2c:["$","title",null,{"children":"Multicolored Ribbon | Quadbits Studio | Observable"}] 31:[] 2f:{"id":"a85797d001ba16bb","slug":"multicolored-ribbon","title":"Multicolored Ribbon","thumbnail":"1c3cfb492790edc39ce9049a56fbe0c0882f10cadebcf28701c53b71254ccbd6","access_level":"public","create_time":"$D2023-04-29T14:00:01.440Z","update_time":"$D2023-05-20T19:30:01.273Z","view_time":null,"first_public_time":"$D2023-04-29T14:00:01.440Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":65,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Multicolored Ribbon","cells":[{"id":0,"value":"# Multicolored Ribbon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"

\n ${Object.assign(ribbon, { style: \"overflow: visible\" })}\n — Stanko Tadić

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"viewof hue = Inputs.range([0, 360], {\n label: \"Hue\",\n step: 1,\n value: Math.floor(Math.random() * 360)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof numberOfDataPoints = Inputs.range([20, 30], {\n label: \"Number of points\",\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"padding = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"ribbon = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"parallelograms = Array.from({ length: data.length - 1 }, (_, i) => gather(i, i + 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"gather = (current, next) => [\n data[current],\n data[next],\n points[next],\n points[current]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"points = data.map((p) => add(p, offset))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"add = (p1, p2) => ({\n x: p1.x + p2.x,\n y: p1.y + p2.y\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"offset = ({\n x: Math.cos(angle) * r,\n y: Math.sin(angle) * r\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"angle = Math.PI / 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"data = Array.from({ length: numberOfDataPoints }, (_, i) => ({\n x: xStep * i,\n y: yMin + Math.round(Math.random() * (yMax - yMin))\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"yMax = height - yMin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"yMin = Math.round(r)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"xStep = width / numberOfDataPoints","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"r = +(height * 0.1).toFixed(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = Math.min(Math.floor(width / 2), 480)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"