2c:null 2d:["$","title",null,{"children":"LIVE: Brand Architect Insights DB | GfK Displayr Engineering | Observable"}] 32:T4e3,baStyle = html``33:Tc5d,dataMockDisplayr = ({ "pillar":["Brand Attachment"], "kpi":["Brand Attachment"], "data.header":[ { "my name ":"", "Average ":"", "Sample Size ":"", "Lower ":"", "Upper ":"", "30% ":"", "50% ":"", "80% ":"", "90% ":"", "KPI.name":"", "label":"", "Pillar":"", "GROUPING":"", "KPI.weight":"", "formatting":"", "value multiplier*":"", "bar multiplier*":"", "warning*":"0", "filter":"all", "_row":"Brand Choice Score" }, ], "data.pct":[ { "KPI":"Brand Choice Score", "Average":"0.325", "Sample Size":"12345", "Lower":" 11", "Upper":" 0.08416935", "30%":" 0.0325", "50%":" 0.0539", "80%":" 0.1101", "90%":" 0.1633", "KPI.name":"370", "label":"Brand Choice Score", "Pillar":"Brand Performance", "GROUPING":"Brand Strength KPIs", "KPI.weight":"KPI_SAMPLESIZEUNWTED_ALLRESPONDENTS", "formatting":"nnn%", "value multiplier*":"1", "bar multiplier*":"1", "warning*":"1", "filter":"all", "_row":"Brand Choice Score" }, ], "data.pct.filters":["all"], "data.num":[ { "KPI":"Brand Attachment", "Average":"27.26689", "Sample Size":"15506", "Lower Confidence Interval":"26.60124", "Upper Confidence Interval":"27.93255", "30%":"19.22627", "50%":"25.16509", "80%":"37.25783", "90%":"44.22334", "KPI.name":"69", "label":"Brand Attachment", "Pillar":"Brand Attachment", "GROUPING":"Brand Attachment", "KPI.weight":"KPI_SAMPLESIZEUNWTED_TENBRANDSAWARE", "formatting":"nnn.n", "value multiplier*":"100", "bar multiplier*":"1", "warning*":"0", "filter":"all", "_row":"Brand Attachment" }, {"KPI":"Gratification","Average":"28.74792","Sample Size":"15506","Lower Confidence Interval":"28.01921","Upper Confidence Interval":"29.47663","30%":"20.19456","50%":"26.30365","80%":"39.65570","90%":"47.37466","KPI.name":"70","label":"Gratification","Pillar":"Brand Attachment","GROUPING":"Brand Attachment","KPI.weight":"KPI_SAMPLESIZEUNWTED_TENBRANDSAWARE","formatting":"nnn.n","value multiplier*":"100","bar multiplier*":"1","warning*":"0","filter":"all","_row":"Gratification"},{"KPI":"Self-Connection","Average":"26.86268","Sample Size":"15506","Lower Confidence Interval":"26.20463","Upper Confidence Interval":"27.52073","30%":"18.85733","50%":"24.99226","80%":"36.85454","90%":"43.23849","KPI.name":"71","label":"Self-Connection","Pillar":"Brand Attachment","GROUPING":"Brand Attachment","KPI.weight":"KPI_SAMPLESIZEUNWTED_TENBRANDSAWARE","formatting":"nnn.n","value multiplier*":"100","bar multiplier*":"1","warning*":"0","filter":"all","_row":"Self-Connection"},{"KPI":"Self-Projection","Average":"26.19008","Sample Size":"15506","Lower Confidence Interval":"25.53969","Upper Confidence Interval":"26.84048","30%":"18.36082","50%":"24.22313","80%":"35.76824","90%":"43.31857","KPI.name":"72","label":"Self-Projection","Pillar":"Brand Attachment","GROUPING":"Brand Attachment","KPI.weight":"KPI_SAMPLESIZEUNWTED_TENBRANDSAWARE","formatting":"nnn.n","value multiplier*":"100","bar multiplier*":"1","warning*":"0","filter":"all","_row":"Self-Projection"}],"data.num.filters":["all"]}) 34:[{"id":"caac9e30dc4273399ec6757182f71a22b2cfc8c0e693ec1530f8b06c22991bb6abb656a2873caebd6c713abfa958b934b32efccb2be4cabc205c13787b3831ea","href":"https://static.observableusercontent.com/files/caac9e30dc4273399ec6757182f71a22b2cfc8c0e693ec1530f8b06c22991bb6abb656a2873caebd6c713abfa958b934b32efccb2be4cabc205c13787b3831ea","name":"warning_newron.png","type":"image/png","lastModified":1662556493515.522,"size":538}] 30:{"id":"501f195b62d80ee1","slug":null,"title":"LIVE: Brand Architect Insights DB","thumbnail":"c73e4737de858483827519dac554581c52389cbc8e401a9be306fbd1080c41ba","access_level":"public","create_time":"$D2022-09-06T09:25:04.784Z","update_time":"$D2023-03-15T20:24:33.443Z","view_time":null,"first_public_time":"$D2022-10-19T14:22:46.453Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024"},"version":1553,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"LIVE: Brand Architect Insights DB","cells":[{"id":1362,"value":"md`# LIVE: Brand Architect Insights DB`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"This is a fork of Observable Table\n\nA Table displays tabular data. It’s fast: rows are rendered lazily on scroll. It sorts: click a header to sort, and click again to reverse. And it selects: click a checkbox on any row, and the selected rows are exported as a view value. It also has sparklines to to aid visual sorting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"The table component assumes that all values in a given column are the same type,\nand chooses a suitable formatter based on the first non-null value in each\ncolumn.\n\n- Numbers are formatted using\n [_number_.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString);\n- Dates are formatted in [ISO8601](https://en.wikipedia.org/wiki/ISO_8601);\n- undefined and NaN values are empty;\n- everything else is displayed as-is.\n\nTo override the default formatting, pass _format_ options for the desired\ncolumns.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"The _format_ function can return a text string or an HTML element. \nFor example, this can be used to render inline visualizations such as bars or [sparklines](/@mbostock/covid-cases-by-state).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1354,"value":"# Input: Table - Brand Architect Insights DB Prototype\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1414,"value":"pctFilterOptions = Array.isArray(dataMockDisplayr[\"data.pct.filters\"])? dataMockDisplayr[\"data.pct.filters\"]: [dataMockDisplayr[\"data.pct.filters\"]] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"viewof filterData = generateToggleFilter(\"data.pct.filters\", \"Toggle Quadrant:\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"sparkTableBA = generateTable(\"data.pct\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"function baWarning(usedDataKey) { \n return (x,i) => {\n const warning = baMetaDataMap[usedDataKey].get(usedData[usedDataKey][i][\"KPI\"])[0][\"warning*\"]\n return warning == 1? htl.html`

${x}`: htl.html`

${x}` \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"sparkTableBaNum = generateTable(\"data.num\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"generateTable = (type) => dataTableTypesExisting.indexOf(type) != -1? Inputs.table(usedData[type], getBaFormat(usedData[type], type)): htl.html`hide me`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"generateToggleFilter = (filterType, label) => {\n const options = Array.isArray(dataMockDisplayr[filterType])? dataMockDisplayr[filterType]: [dataMockDisplayr[filterType]] \n return Inputs.radio(options, {label: label, value: options[0]}) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"md `Note: the below function needs to be manually amended if we add more radio button filters i.e. a filter above the numeric table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"filterCleanDataRowsColumns = (data, columns, type) => {\n return data.filter(d => type == \"data.pct\"? d.filter == filterData: true).map(o => {\n const newO = {}\n columns.forEach(c => {\n newO[c] = o[c]\n })\n return newO\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"handleNulls = (v) => v == null? NaN: v","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"tempval = getBaFormat(usedData[\"data.pct\"], \"data.pct\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"usedData = { \n const o = {} \n dataTableTypesExisting.forEach(e => { \n o[e] = filterCleanDataRowsColumns(dataMockDisplayr[e], outputColumns, e)\n })\n return o \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"outputColumns = [\"KPI\",\"Average\",\"Sample Size\",\"Lower\",\"Upper\",\"30%\",\"50%\",\"80%\",\"90%\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"function baSparkbar(max, format, color, usedDataKey) { \n return (x,i) => {\n //console.log(x,i)\n //x = handleNulls(x)\n return htl.html`

0? color[0]: color[1]): color};\n width: ${ x > 0? (x*baMetaDataMap[usedDataKey].get(usedData[usedDataKey][i][\"KPI\"])[0][\"bar multiplier*\"]) : ((-1*x*baMetaDataMap[usedDataKey].get(usedData[usedDataKey][i][\"KPI\"])[0][\"bar multiplier*\"]) / (max))}%;\n float: left; \n padding-left: 3px;\n box-sizing: border-box;\n overflow: visible;\n display: flex;\n justify-content: start;\n \">${handleNulls( d3.format(format)(((x*baMetaDataMap[usedDataKey].get(usedData[usedDataKey][i][\"KPI\"])[0][\"value multiplier*\"])/100).toLocaleString(\"en\")) )}` \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"warning_image = FileAttachment(\"warning_newron.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"getBaFormat = (usedData, usedDataKey) => {\n let keys = Object.keys(usedData[0]) \n let o = {\n format: {},\n width: {},\n align: {}\n }\n let valueFormat = usedDataKey == \"data.pct\"? \",.0%\": \",.1f\"\n keys.forEach( (e,i) => {\n if(i != 0) o.format[e] = [\"KPI\",\"Sample Size\"].indexOf(e) == -1? baSparkbar(1, valueFormat, [\"#AFBBDB\", \"#CBA6A8\"], usedDataKey): d3.format(\"0\")\n if(i == 0) {\n o.format[e] = baWarning(usedDataKey)\n o.width[e] = 450\n }\n o.align[e] = \"left\"\n })\n o.layout = \"auto\"\n return o \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"baMetaDataMap = {\n const o = {} \n dataTableTypesExisting.forEach(e => { \n o[e] = d3.group(dataMockDisplayr[e], d => d.KPI)\n })\n return o \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"dataTableTypesExisting = [\"data.pct\", \"data.num\"].filter(o => Array.isArray(dataMockDisplayr[o]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"