2d:null 2e:["$","title",null,{"children":"InfoVis Sketches #3 UpSet chart | T.E. Schouten | Observable"}] 33:T857,formatIntersectionData = (data) => { // compiling solo set data - how many values per set const soloSets = []; // nameStr is for the setName, which makes it easy to compile // each name would be A, then B, so on.. const nameStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.substr(0, data.length); data.forEach((x, i) => { soloSets.push({ name: x.name, setName: nameStr.substr(i, 1), num: x.values.length, values: x.values, }) }); // compiling list of intersection names recursively // ["A", "AB", "ABC", ...] const getIntNames = (start, end, nameStr) => { // eg. BCD const name = nameStr.substring(start, end); // when reaching the last letter if (name.length === 1) { return [name]; } const retArr = getIntNames(start + 1, end, nameStr); // eg. for name = BCD, would return [B] + [BC,BCD,BD] + [C,CD,D] return [name[0]].concat(retArr.map((x) => name[0] + x), retArr); }; let intNames = getIntNames(0, nameStr.length, nameStr); // removing solo names intNames = intNames.filter((x) => x.length !== 1); let intersections = []; // compile intersections of values for each intersection name intNames.forEach((intName) => { // collecting all values: [pub1arr, pub2arr, ...] const values = intName.split('').map((set) => soloSets.find((x) => x.setName === set).values); // getting intersection // https://stackoverflow.com/questions/37320296/how-to-calculate-intersection-of-multiple-arrays-in-javascript-and-what-does-e const result = values.reduce((a, b) => a.filter((c) => b.includes(c))); if (result.length > 0) { intersections.push({ name: intName.split('').map((set) => soloSets.find((x) => x.setName === set).name).join(' + '), setName: intName, num: result.length, values: result, }); }; }); // taking out all 0s intersections = intersections.filter((x) => x.value !== 0); return { intersections, soloSets }; };34:[] 31:{"id":"28f5b494515a8b84","slug":"infovis-sketches-3-upset-chart","title":"InfoVis Sketches #3 UpSet chart","thumbnail":"6bf95c6913cc19ce2fe81f45a5cb9ee4d600e352b2388db833c124367f4aa490","access_level":"public","create_time":"$D2021-03-25T12:24:17.261Z","update_time":"$D2021-03-31T11:24:21.100Z","view_time":null,"first_public_time":"$D2021-03-26T14:20:54.817Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d19a230dabb035d0","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":"starter_2024"},"version":429,"publish_version":429,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null}],"members":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"InfoVis Sketches #3 UpSet chart","cells":[{"id":0,"value":"md`# InfoVis Sketches #3 UpSet chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof r = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 5, \n title: \"Radius\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof sp = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 5, \n title: \"Spacing\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof selectedBeer = Select(beerID)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof selectedFlavors = Checkbox(flavors, {value: flavors.slice(0, 5)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"g = { \n let str = ''\n graphData.forEach(combination => {\n str += `\\n'\n })\n \n return html`${str}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// html`\n// \n// `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"f = formatIntersectionData(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"graphData = insertSoloDataOutersect(f.intersections, f.soloSets);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"insertSoloDataOutersect = (intersections, soloSets) => {\n soloSets.forEach(x => {\n // compile all unique values from other sets except current set\n const otherSets = [...new Set(soloSets.map(y => y.setName === x.setName ? [] : y.values).flat())];\n \n // subtract otherSets values from current set values\n const values = x.values.filter(y => !otherSets.includes(y));\n intersections.push({\n name: x.name,\n setName: x.setName,\n num: values.length,\n values: values,\n })\n \n })\n return intersections;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### Connect to API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"rawdata = (await fetch(`http://localhost:5000/subcategory-allflavors?query=${selectedBeer}`)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"beerID = ((await fetch('http://localhost:5000/beers?query=S5')).json()).then(v => v.map(a => a.beer_id))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"flavors = rawdata.map(a => a.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"data = rawdata.filter(a => selectedFlavors.includes(a.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`\n### Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"import {Checkbox} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"