2f:T784,# Facet-nating Apply facet filtering to ObservableHQ protests data and also properly update record counts to reflect the filtered data. Counts reflect Below are some example counts for several of the facets in the protest dataset. > **Note**: Only a select few values are included for each facet. Try to stick to these when adding them in to the Facets input box below. * **Date** * ${filterMap?.Date?.find((x)=>x==="2019")?"->":""} 2019 ${filterMap?.Date?.find((x)=>x==="2019")?"<-":""} (${results.counts.Date['2019']}) * ${filterMap?.Date?.find((x)=>x==="2020")?"->":""} 2020 ${filterMap?.Date?.find((x)=>x==="2020")?"<-":""} (${results.counts.Date['2020']}) * ${filterMap?.Date?.find((x)=>x==="2021")?"->":""} 2021 ${filterMap?.Date?.find((x)=>x==="2021")?"<-":""} (${results.counts.Date['2021']}) * **Attendees** * ${filterMap?.Attendees?.find((x)=>x==="0")?"->":""} 0 ${filterMap?.Attendees?.find((x)=>x==="0")?"<-":""} (${results.counts.Attendees['0']}) * ${filterMap?.Attendees?.find((x)=>x==="1")?"->":""} 1 ${filterMap?.Attendees?.find((x)=>x==="1")?"<-":""} (${results.counts.Attendees['1']}) * ${filterMap?.Attendees?.find((x)=>x==="2")?"->":""} 2 ${filterMap?.Attendees?.find((x)=>x==="2")?"<-":""} (${results.counts.Attendees['2']}) * ${filterMap?.Attendees?.find((x)=>x==="3")?"->":""} 3 ${filterMap?.Attendees?.find((x)=>x==="3")?"<-":""} (${results.counts.Attendees['3']}) * **Curated** * ${filterMap?.Curated?.find((x)=>x==="Yes")?"->":""} Yes ${filterMap?.Curated?.find((x)=>x==="Yes")?"<-":""} (${results.counts.Curated['Yes']}) * ${filterMap?.Curated?.find((x)=>x==="No")?"->":""} No ${filterMap?.Curated?.find((x)=>x==="No")?"<-":""} (${results.counts.Curated['No']}) * **Location** * Detroit, MI (${results.counts.Location['Detroit, MI']}) * Carson City, NV (${results.counts.Location['Carson City, NV']}) * Washington, DC (${results.counts.Location['Washington, DC']})30:T8f0,results2 = { const generateMask = (values) => { let mask = 0; for (const index in values) { mask = mask | (1 << index); } return mask; }; const setBit = (mask, position) => { return mask | (1 << position); }; const getBit = (mask, position) => { return (mask & (1 << position)) === 0 ? 0 : 1; }; const unsetBit = (mask, position) => { return mask & ~(1 << position); }; const filteredRows = []; const counts = {}; // O(n * m * f) where n is number of rows, m is number of columns, f is number of filters. // Simplifies to O(n*f) since 'm' is likely constant in the number of facets/columns. for (const row of data) { let keepRow = true; // Assume row is kept by default let countMask = generateMask(columns); // Bit mask based on number of columns/facets // For each row, check each cell against our filters. for (const col of columns) { const values = processValueAsArray(row, col); let tmpKeepRow = true; for (const value of values) { // Do a quick lookup of the filters. When they exist, verify at least 1 matches. if (col in filterMap) { tmpKeepRow = filterMap[col].some((x) => x === value); keepRow = keepRow && tmpKeepRow; } // Early eject if we know the row has been filtered out. if (!tmpKeepRow) break; } // If the current cell's value failed to pass a filter, // we need to unset all of the *other* cells to exclude // them from record counts. for (const ccol in columns) { if (columns[ccol] === col) continue; countMask = tmpKeepRow ? countMask : unsetBit(countMask, ccol); } } // Once a row has been processed we only count cell values towards // their facet counts if the countMask is for (const ccol in columns) { const col = columns[ccol]; if (getBit(countMask, ccol)) { const values = processValueAsArray(row, col); for (const value of values) { if (!(col in counts)) counts[col] = {}; if (!(value in counts[col])) counts[col][value] = 0; counts[col][value] += 1; } } } if (keepRow) filteredRows.push(row); } return { filteredRows, counts }; }31:T66f,results = { const filteredRows = []; const counts = {}; // Synthetic test data for quick console debugging. // let data = [ // { Date: new Date("2019-01-02"), Attendees: "0", Tags: "Baz", Event: "Foo", Curated:"Bar", Location: "Fargo"}, // { Date: new Date("2019-01-02"), Attendees: "0", Tags: "Baz" , Event: "Foo", Curated:"Bar", Location: "Chicago"}, // { Date: new Date("2019-01-02"), Attendees: "1", Tags: "Baz" , Event: "Foo", Curated:"Bar", Location: "Seattle"}, // { Date: new Date("2022-01-02"), Attendees: "0", Tags: "Baz" , Event: "Foo", Curated:"Bar", Location: "Whenever, Whereever"} // ]; for (const row of data) { let keepValue = true; let colMap = {}; for (const col of columns) { colMap[col] = true; } for (const col of columns) { const values = processValueAsArray(row, col); let tmpKeepValue = true; for (const value of values) { if (col in filterMap) { tmpKeepValue = filterMap[col].some((x) => x === value); keepValue = keepValue && tmpKeepValue; } } for (const ccol of columns) { if (ccol === col) continue; colMap[ccol] = colMap[ccol] & tmpKeepValue; } } for (const col of columns) { if (colMap[col]) { const values = processValueAsArray(row, col); for (const value of values) { if (!(col in counts)) counts[col] = {}; if (!(value in counts[col])) counts[col][value] = 0; counts[col][value] += 1; } } } if (keepValue) filteredRows.push(row); } return { filteredRows, counts }; }32:[{"id":"100ba6c9ab25d7a4687eb6bc46809219508a9faf2b7ade6c7034b0490cc7709fcfca7a50f4b76fda051310f6a4898815c53a702418c3d8644f767e3a6e44ac7e","href":"https://static.observableusercontent.com/files/100ba6c9ab25d7a4687eb6bc46809219508a9faf2b7ade6c7034b0490cc7709fcfca7a50f4b76fda051310f6a4898815c53a702418c3d8644f767e3a6e44ac7e","name":"protests(1).csv","type":"text/csv","lastModified":1672778205167.651,"size":8455883}] 2d:{"title":"Facet-nating","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"viewof data = dataInput({\n initialValue: await FileAttachment(\"protests(1).csv\").csv({ typed: true })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof filters = Inputs.textarea({label: \"Filters\", value: \"Date:2019\\nAttendees:0\", placeholder:\"Paste CSV data\",rows:20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"filterMap = {\n const filterMap = {};\n for (const filter of filters.split(\"\\n\")) {\n const col = filter.split(\":\")[0];\n const val = filter.split(\":\")[1];\n\n if (!(col in filterMap)) filterMap[col] = [];\n filterMap[col].push(val);\n }\n return filterMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"// Manually choose a subset of the raw data. Protests is a bit messy so don't use it all.\ncolumns = [\"Date\", \"Location\", \"Attendees\", \"Event\", \"Curated\", \"Tags\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"{\n let mask = 0;\n for(const index in columns){\n mask = mask | (1 << index)\n }\n //mask = mask & ~(1 << 2)\n mask = mask ^ (1 << 2) \n return mask.toString(2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"lodash.isEqual(results,results2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"## Raw Categorical Counts","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"{\n const counts = {};\n\n data.forEach((row)=>{\n columns.forEach((col)=>{\n const values = processValueAsArray(row,col); \n \n for(const value of values){\n \n if(!(col in counts))counts[col] = {};\n if(!(value in counts[col]))counts[col][value] = 0;\n \n counts[col][value]+=1;\n }\n })\n });\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"## Raw Data","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"/** Extract (row,column) cell value from row\n \n @description\n Warning!: This function was designed to work with the ObservableHQ protests.csv \n data. \n\n Process protests.csv rows and return a clean value for filter testing.\n Apply any custom logic here like turning Dates in to year strings or\n splitting delimited fields (e.g. Tags) and turning them in to arrays of values.\n @param row (object) - Row of raw data\n @param column (string) - Column name\n*/\nfunction processValue(row,column){\n let value = (column==='Date')?row[column].getFullYear():row[column];\n value = (column==='Tags')?value.split(';').map(v=>v.trim()):value;\n \n return value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"/** Extract (row,column) cell value from row, return results as an array.\n\n @description\n Warning!: This function was designed to work with the ObservableHQ protests.csv \n data. \n\n Calls `processValue` to return clean data AND ensures those data\n are returned as arrays. This lets us simplify our downstream \n logic by always assuming values are array iterables.\n\n @param row (object) - Row of raw data\n @param column (string) - Column name\n*/\nfunction processValueAsArray(row,column){\n let values = processValue(row,column);\n values = (Array.isArray(values))?values:[values];\n\n values = values.map((v)=>{\n return (v!==null && v!==undefined)?v+'':v; // quick hack to convert everything to a string unless null or undefined\n });\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"lodash = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}