31:T8ac,dynamicStyling = html``32:T1296,chart = { const container = d3.create("div") .style("min-height", "200px"); const root = d3.hierarchy(dataTree); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; //if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = container .append("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "12px Lato") .style("user-select", "none"); const blurb = container .append("div") .attr("id", "blurb") .html(`

${kpiModules[0]}

${dataMockDisplayr[kpiModules[0]].blurb}

`) const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .classed("selectable", /*d => d._children ? false:*/ true) .attr("id", d => `_${d.id}`) //.attr("class", d => stringToClassName(d.data.name)) .on("click", (event, d) => { //console.log(d.id, d3.select(`#_${d.id}`).classed("selected"), !d3.select(`#_${d.id}`).classed("selected")) d.children = d.children ? null : d._children; d3.selectAll(".selectable").classed("selected", false) //single select d3.select(`#_${d.id}`).classed("selected", /*d => d._children ? false:*/!d3.select(`#_${d.id}`).classed("selected")) //update(d); blurb.html(`

${d.data.name}

${dataMockDisplayr[d.data.name]["blurb"]}

`) sessionStorage.setItem("clickedNodeId", `_${d.id}`); sessionStorage.setItem("clickedNodeName", d.data.name); set(viewof kpi, d.data.name) }); nodeEnter.append("circle") .attr("r", 5) .attr("fill", d => d._children ? "#999":"#555" ) .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return container.node(); } 33:Tc38,kpiTable = { try { const format = formats[kpiType] const kpiRows = kpiData["period.kpis"]["item"].map(o => o._row) const data = kpiRows.map((d,i) => { if(comparisonType == "period") { return { kpi: d, rank: kpiData["period.ranks"]["item"].map(o => o.x)[i], period : kpiData["period.kpis"]["item"].map(o => o.x)[i], delta : kpiData["time"]["item"].map(o => o[selectedPeriod] - o[comparisonPeriod])[i], significance : kpiData["period.sigs"].map(o => o.x <= -1*sigThreshold? "▼": o.x >= sigThreshold? "▲": "")[i], demogs: "", "time-series": "" } } else if(comparisonType == "item") { return { kpi: d, rank: kpiData["period.ranks"]["item"].map((o, ind) => -1*(o.x - kpiData["period.ranks"]["vs"][ind].x))[i], period : kpiData["period.kpis"]["item"].map(o => o.x)[i], delta : kpiData["time"]["item"].map((o, ind) => o[selectedPeriod] - kpiData["time"]["vs"][ind][selectedPeriod])[i], significance : kpiData["period.sigs"].map((o, ind) => o.x <= -1*sigThreshold? "▼": o.x >= sigThreshold? "▲": "")[i], demogs: "", "time-series": "" } } }) return Inputs.table(data, { width: { kpi: "18%", rank: "9%", period: "13%", delta: "13%", significance: "5%", demogs: "12%", "time-series": "32%" }, format: { rank: rank(), period: sparkBar(100, format["period"], format["divider"]["period"]), delta: sparkBar(100, format["delta"], format["divider"]["delta"], "bi-directional"), demogs: (comparisonType == "period") && (kpiType != "Average")? (e,i) => SmallStack(standardiseDemogsInRows(kpiRows[i]), format["period"]): (e,i) => SmallCol(standardiseDemogsInRows(kpiRows[i]), format["period"]), "time-series": comparisonType == "period"? (e,i) => sparkArea(kpiRows[i], format, { x: standardiseDatesInRows(kpiRows[i]).map(o => parseDate(o.date)), y: standardiseDatesInRows(kpiRows[i]).map(o => Math.max(0, o.value == null? 0: o.value)), sparkXdomain }): (e,i) => sparkLine(kpiRows[i], format, { x: standardiseDatesInRows(kpiRows[i]).map(o => parseDate(o.date)), y: standardiseDatesInRows(kpiRows[i]).map(o => o.value), sparkXdomain }) }, header: { kpi: `KPI`, rank: `${comparisonType == "period"? "Rank": "Rank delta"}`, period: `${item}`, delta: `${comparisonType == "period"? "v "+ comparisonPeriod: "v " + vs} pp.`, significance: `Sig.`, demogs: `${comparisonType == "period"? selectedPeriod + " by " + demogs: "Delta by " + demogs}`, "time-series": htl.html`${comparisonType == "period"?"Over time:": "Delta over time"}${dateMappedToStrings[date]} (v ${dateMappedToStrings[ comparisonDate ]} pp.)` } }) } catch(err) { return html` insufficient sample size `} }34:T5637,dataMockDisplayr = ({"Brand Tracking":{"data":[false],"blurb":["Click on the tree nodes to start exploring your data."]},"Brand Funnel KPIs":{"type":["Column %"],"data":[true],"blurb":["Consumers aided awareness, consideration and preference for your brand."],"period.kpis":{"item":[{"x":86.2841,"_row":"Awareness"},{"x":45.5568,"_row":"Consideration"},{"x":9.5333,"_row":"Preference"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Awareness"},{"x":4,"_row":"Consideration"},{"x":4,"_row":"Preference"}],"vs":{}},"period.sigs":[{"x":0.3645,"_row":"Awareness"},{"x":-1.7675,"_row":"Consideration"},{"x":-0.1108,"_row":"Preference"}],"period.demogs":{"item":[{"Male":47.6392,"Female":52.3608,"_row":"Awareness"},{"Male":48.946,"Female":51.054,"_row":"Consideration"},{"Male":54.2771,"Female":45.7229,"_row":"Preference"}],"vs":{}},"time":{"item":[{"2021-Q2":86.6931,"2021-Q3":86.0919,"2021-Q4":85.6389,"2022-Q1":86.2841,"NET":86.1702,"_row":"Awareness"},{"2021-Q2":54.4978,"2021-Q3":56.9079,"2021-Q4":50.0559,"2022-Q1":45.5568,"NET":51.7759,"_row":"Consideration"},{"2021-Q2":9.1033,"2021-Q3":10.0147,"2021-Q4":9.5779,"2022-Q1":9.5333,"NET":9.5631,"_row":"Preference"}],"vs":{}}},"Brand Momentum KPIs":{"type":["Average"],"data":[true],"blurb":["Consumers perception of if your brand is on it's way up or down."],"period.kpis":{"item":[{"x":29.5152,"_row":"On its way up"},{"x":-12.4826,"_row":"On its way down"},{"x":17.0327,"_row":"Net"}],"vs":{}},"period.ranks":{"item":[{"x":5,"_row":"On its way up"},{"x":3,"_row":"On its way down"},{"x":5,"_row":"Net"}],"vs":{}},"period.sigs":[{"x":-0.9512,"_row":"On its way up"},{"x":0,"_row":"On its way down"},{"x":-0.9195,"_row":"Net"}],"period.demogs":{"item":[{"Male":37.8338,"Female":26.5455,"_row":"On its way up"},{"Male":-13.2894,"Female":-12.6443,"_row":"On its way down"},{"Male":24.5444,"Female":13.9012,"_row":"Net"}],"vs":{}},"time":{"item":[{"2021-Q2":30.0338,"2021-Q3":33.866,"2021-Q4":31.9232,"2022-Q1":29.5152,"NET":31.3618,"_row":"On its way up"},{"2021-Q2":-15.3893,"2021-Q3":-11.423,"2021-Q4":-12.9516,"2022-Q1":-12.4826,"NET":-13.0417,"_row":"On its way down"},{"2021-Q2":14.6446,"2021-Q3":22.443,"2021-Q4":18.9715,"2022-Q1":17.0327,"NET":18.3201,"_row":"Net"}],"vs":{}}},"Brand Salience KPIs":{"type":["Column %"],"data":[true],"blurb":["This shows how well known and present in consumers’ mind your brand is compared to competitors on all awareness indicators."],"period.kpis":{"item":[{"x":86.2841,"_row":"Aided Awareness"},{"x":38.0769,"_row":"Spontaneous Awareness"},{"x":7.2536,"_row":"Top of Mind Awareness"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Aided Awareness"},{"x":4,"_row":"Spontaneous Awareness"},{"x":4,"_row":"Top of Mind Awareness"}],"vs":{}},"period.sigs":[{"x":0.3645,"_row":"Aided Awareness"},{"x":0.6089,"_row":"Spontaneous Awareness"},{"x":-1.0835,"_row":"Top of Mind Awareness"}],"period.demogs":{"item":[{"Male":47.6392,"Female":52.3608,"_row":"Aided Awareness"},{"Male":50.0515,"Female":49.9485,"_row":"Spontaneous Awareness"},{"Male":55.0748,"Female":44.9252,"_row":"Top of Mind Awareness"}],"vs":{}},"time":{"item":[{"2021-Q2":86.6931,"2021-Q3":86.0919,"2021-Q4":85.6389,"2022-Q1":86.2841,"NET":86.1702,"_row":"Aided Awareness"},{"2021-Q2":45.8724,"2021-Q3":41.9957,"2021-Q4":36.5763,"2022-Q1":38.0769,"NET":40.5914,"_row":"Spontaneous Awareness"},{"2021-Q2":9.5858,"2021-Q3":11.7615,"2021-Q4":8.6834,"2022-Q1":7.2536,"NET":9.3363,"_row":"Top of Mind Awareness"}],"vs":{}}},"Mental Availability KPIs":{"type":["Average"],"data":[true],"blurb":["Share of your brand’s associations with all mental cues. It reflects how easily your brand comes to mind at the moment of purchase."],"period.kpis":{"item":[{"x":7.7815,"_row":"Share of mind"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Share of mind"}],"vs":{}},"period.sigs":[{"x":-6.4232,"_row":"Share of mind"}],"period.demogs":{"item":[{"Male":9.4865,"Female":8.1681,"_row":"Share of mind"}],"vs":{}},"time":{"item":[{"2021-Q2":7.8208,"2021-Q3":10.1688,"2021-Q4":8.7961,"2022-Q1":7.7815,"NET":8.6572,"_row":"Share of mind"}],"vs":{}}},"Brand Attachment KPIs":{"type":["Average"],"data":[true],"blurb":["This represents the emotional connection consumers have to the brand. It comprises three fundamental needs: enabling the self, enriching the self, gratification. It is based on consumers aware of your brand and is expressed in %."],"period.kpis":{"item":[{"x":28.7443,"_row":"Brand Attachment"},{"x":27.8815,"_row":"Self-Connection"},{"x":29.2326,"_row":"Self-Projection"},{"x":29.1188,"_row":"Gratification"},{"x":114.9772,"_row":"SUM"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Brand Attachment"},{"x":4,"_row":"Self-Connection"},{"x":4,"_row":"Self-Projection"},{"x":4,"_row":"Gratification"},{"x":4,"_row":"SUM"}],"vs":{}},"period.sigs":[{"x":0.8603,"_row":"Brand Attachment"},{"x":1.2638,"_row":"Self-Connection"},{"x":0.8763,"_row":"Self-Projection"},{"x":0.4522,"_row":"Gratification"},{"x":0,"_row":"SUM"}],"period.demogs":{"item":[{"Male":31.2643,"Female":22.4348,"_row":"Brand Attachment"},{"Male":29.9718,"Female":20.0652,"_row":"Self-Connection"},{"Male":30.998,"Female":23.4568,"_row":"Self-Projection"},{"Male":32.8232,"Female":23.7824,"_row":"Gratification"},{"Male":125.0573,"Female":89.7393,"_row":"SUM"}],"vs":{}},"time":{"item":[{"2021-Q2":28.7449,"2021-Q3":28.1729,"2021-Q4":26.4642,"2022-Q1":28.7443,"NET":28.0339,"_row":"Brand Attachment"},{"2021-Q2":28.4664,"2021-Q3":27.8301,"2021-Q4":24.5861,"2022-Q1":27.8815,"NET":27.2076,"_row":"Self-Connection"},{"2021-Q2":27.03,"2021-Q3":27.8688,"2021-Q4":26.8982,"2022-Q1":29.2326,"NET":27.7389,"_row":"Self-Projection"},{"2021-Q2":30.7384,"2021-Q3":28.8197,"2021-Q4":27.9082,"2022-Q1":29.1188,"NET":29.1552,"_row":"Gratification"},{"2021-Q2":114.9796,"2021-Q3":112.6914,"2021-Q4":105.8566,"2022-Q1":114.9772,"NET":112.1356,"_row":"SUM"}],"vs":{}}},"Brand Imagery KPIs":{"type":["Column %"],"data":[true],"blurb":["Consumers perception of aspects of your brand, such as its values, differentiation, relevance, trust etc. It is based on consumers aware of your brand."],"period.kpis":{"item":[{"x":39.2423,"_row":"Brand I trust"},{"x":31.3345,"_row":"Easy to identify"},{"x":13.253,"_row":"Endorsed"},{"x":38.5974,"_row":"Expert in the category"},{"x":16.077,"_row":"Has something unique"},{"x":38.7528,"_row":"Meets my needs"},{"x":29.897,"_row":"Modern"},{"x":11.0978,"_row":"Promotes society changes"},{"x":38.2017,"_row":"Proud to own"},{"x":25.3709,"_row":"Sets standards"},{"x":27.8479,"_row":"Talk positively about"},{"x":18.348,"_row":"Values I identify with"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Brand I trust"},{"x":5,"_row":"Easy to identify"},{"x":5,"_row":"Endorsed"},{"x":4,"_row":"Expert in the category"},{"x":5,"_row":"Has something unique"},{"x":4,"_row":"Meets my needs"},{"x":5,"_row":"Modern"},{"x":6,"_row":"Promotes society changes"},{"x":4,"_row":"Proud to own"},{"x":4,"_row":"Sets standards"},{"x":5,"_row":"Talk positively about"},{"x":4,"_row":"Values I identify with"}],"vs":{}},"period.sigs":[{"x":-0.665,"_row":"Brand I trust"},{"x":0.5738,"_row":"Easy to identify"},{"x":1.6705,"_row":"Endorsed"},{"x":-0.3236,"_row":"Expert in the category"},{"x":-0.0662,"_row":"Has something unique"},{"x":-0.3176,"_row":"Meets my needs"},{"x":0.8386,"_row":"Modern"},{"x":-0.3448,"_row":"Promotes society changes"},{"x":-0.7081,"_row":"Proud to own"},{"x":0.1038,"_row":"Sets standards"},{"x":-0.4051,"_row":"Talk positively about"},{"x":-0.4668,"_row":"Values I identify with"}],"period.demogs":{"item":[{"Male":48.3109,"Female":51.6891,"_row":"Brand I trust"},{"Male":48.4065,"Female":51.5935,"_row":"Easy to identify"},{"Male":44.0485,"Female":55.9515,"_row":"Endorsed"},{"Male":49.5484,"Female":50.4516,"_row":"Expert in the category"},{"Male":57.8821,"Female":42.1179,"_row":"Has something unique"},{"Male":51.7945,"Female":48.2055,"_row":"Meets my needs"},{"Male":60.5953,"Female":39.4047,"_row":"Modern"},{"Male":58.4796,"Female":41.5204,"_row":"Promotes society changes"},{"Male":56.2623,"Female":43.7377,"_row":"Proud to own"},{"Male":50.7983,"Female":49.2017,"_row":"Sets standards"},{"Male":49.8637,"Female":50.1363,"_row":"Talk positively about"},{"Male":54.1782,"Female":45.8218,"_row":"Values I identify with"}],"vs":{}},"time":{"item":[{"2021-Q2":47.859,"2021-Q3":39.7366,"2021-Q4":41.1761,"2022-Q1":39.2423,"NET":42.0421,"_row":"Brand I trust"},{"2021-Q2":30.7273,"2021-Q3":37.5986,"2021-Q4":29.7673,"2022-Q1":31.3345,"NET":32.4455,"_row":"Easy to identify"},{"2021-Q2":17.8692,"2021-Q3":13.138,"2021-Q4":10.0773,"2022-Q1":13.253,"NET":13.6185,"_row":"Endorsed"},{"2021-Q2":47.9213,"2021-Q3":38.9746,"2021-Q4":39.5338,"2022-Q1":38.5974,"NET":41.3015,"_row":"Expert in the category"},{"2021-Q2":19.6204,"2021-Q3":18.4942,"2021-Q4":16.2214,"2022-Q1":16.077,"NET":17.6518,"_row":"Has something unique"},{"2021-Q2":43.4443,"2021-Q3":41.9775,"2021-Q4":39.6723,"2022-Q1":38.7528,"NET":41.0232,"_row":"Meets my needs"},{"2021-Q2":37.0901,"2021-Q3":35.8255,"2021-Q4":27.6463,"2022-Q1":29.897,"NET":32.7384,"_row":"Modern"},{"2021-Q2":13.7605,"2021-Q3":11.9938,"2021-Q4":11.7483,"2022-Q1":11.0978,"NET":12.1718,"_row":"Promotes society changes"},{"2021-Q2":41.3861,"2021-Q3":35.9317,"2021-Q4":40.2522,"2022-Q1":38.2017,"NET":38.9182,"_row":"Proud to own"},{"2021-Q2":23.1308,"2021-Q3":27.5684,"2021-Q4":25.1035,"2022-Q1":25.3709,"NET":25.756,"_row":"Sets standards"},{"2021-Q2":"NaN","2021-Q3":25.2493,"2021-Q4":28.9312,"2022-Q1":27.8479,"NET":27.9391,"_row":"Talk positively about"},{"2021-Q2":16.8035,"2021-Q3":17.9026,"2021-Q4":19.4319,"2022-Q1":18.348,"NET":18.1035,"_row":"Values I identify with"}],"vs":{}}},"Product Imagery KPIs":{"type":["Column %"],"data":[true],"blurb":["Consumers perception of aspects of the products of your brand, such as quality, design, range, price etc. It is based on consumers aware of your brand."],"period.kpis":{"item":[{"x":23.5202,"_row":"Affordably priced"},{"x":30.5204,"_row":"Best quality"},{"x":41.7074,"_row":"Easy to use"},{"x":29.0433,"_row":"Features important to me"},{"x":31.5739,"_row":"Good warranty & servicing"},{"x":51.5867,"_row":"Good quality"},{"x":24.2254,"_row":"Latest innovations"},{"x":35.6272,"_row":"Long-lasting"},{"x":13.6159,"_row":"Often on promotion"},{"x":37.1138,"_row":"Stylish/ good looking"}],"vs":{}},"period.ranks":{"item":[{"x":10,"_row":"Affordably priced"},{"x":4,"_row":"Best quality"},{"x":4,"_row":"Easy to use"},{"x":4,"_row":"Features important to me"},{"x":4,"_row":"Good warranty & servicing"},{"x":4,"_row":"Good quality"},{"x":5,"_row":"Latest innovations"},{"x":4,"_row":"Long-lasting"},{"x":11,"_row":"Often on promotion"},{"x":4,"_row":"Stylish/ good looking"}],"vs":{}},"period.sigs":[{"x":-0.665,"_row":"Brand I trust"},{"x":0.5738,"_row":"Easy to identify"},{"x":1.6705,"_row":"Endorsed"},{"x":-0.3236,"_row":"Expert in the category"},{"x":-0.0662,"_row":"Has something unique"},{"x":-0.3176,"_row":"Meets my needs"},{"x":0.8386,"_row":"Modern"},{"x":-0.3448,"_row":"Promotes society changes"},{"x":-0.7081,"_row":"Proud to own"},{"x":0.1038,"_row":"Sets standards"},{"x":-0.4051,"_row":"Talk positively about"},{"x":-0.4668,"_row":"Values I identify with"}],"period.demogs":{"item":[{"Male":57.7622,"Female":42.2378,"_row":"Affordably priced"},{"Male":55.2719,"Female":44.7281,"_row":"Best quality"},{"Male":53.7871,"Female":46.2129,"_row":"Easy to use"},{"Male":56.7103,"Female":43.2897,"_row":"Features important to me"},{"Male":55.2209,"Female":44.7791,"_row":"Good warranty & servicing"},{"Male":52.0747,"Female":47.9253,"_row":"Good quality"},{"Male":54.5504,"Female":45.4496,"_row":"Latest innovations"},{"Male":52.7649,"Female":47.2351,"_row":"Long-lasting"},{"Male":46.1392,"Female":53.8608,"_row":"Often on promotion"},{"Male":51.8871,"Female":48.1129,"_row":"Stylish/ good looking"}],"vs":{}},"time":{"item":[{"2021-Q2":28.5473,"2021-Q3":29.5774,"2021-Q4":24.6033,"2022-Q1":23.5202,"NET":26.6626,"_row":"Affordably priced"},{"2021-Q2":28.0816,"2021-Q3":31.012,"2021-Q4":29.0725,"2022-Q1":30.5204,"NET":29.6732,"_row":"Best quality"},{"2021-Q2":40.3577,"2021-Q3":40.729,"2021-Q4":41.309,"2022-Q1":41.7074,"NET":41.008,"_row":"Easy to use"},{"2021-Q2":30.4016,"2021-Q3":32.8637,"2021-Q4":30.3488,"2022-Q1":29.0433,"NET":30.7165,"_row":"Features important to me"},{"2021-Q2":33.4941,"2021-Q3":30.7527,"2021-Q4":31.1087,"2022-Q1":31.5739,"NET":31.7323,"_row":"Good warranty & servicing"},{"2021-Q2":47.083,"2021-Q3":47.2665,"2021-Q4":49.0985,"2022-Q1":51.5867,"NET":48.6903,"_row":"Good quality"},{"2021-Q2":32.391,"2021-Q3":28.7628,"2021-Q4":29.744,"2022-Q1":24.2254,"NET":28.856,"_row":"Latest innovations"},{"2021-Q2":41.0134,"2021-Q3":34.8568,"2021-Q4":38.6961,"2022-Q1":35.6272,"NET":37.5497,"_row":"Long-lasting"},{"2021-Q2":16.2901,"2021-Q3":14.429,"2021-Q4":13.9633,"2022-Q1":13.6159,"NET":14.5966,"_row":"Often on promotion"},{"2021-Q2":38.9652,"2021-Q3":39.5038,"2021-Q4":36.5634,"2022-Q1":37.1138,"NET":38.0799,"_row":"Stylish/ good looking"}],"vs":{}}},"Recent Brand Experience KPIs":{"type":["Column %"],"data":[true],"blurb":["Share of your brand’s associations with all mental cues. It reflects how easily your brand comes to mind at the moment of purchase."],"period.kpis":{"item":[{"x":12.9696,"_row":"Recent Brand Experience - Contact"}],"vs":{}},"period.ranks":{"item":[{"x":5,"_row":"Recent Brand Experience - Contact"}],"vs":{}},"period.sigs":[{"x":-0.1953,"_row":"Recent Brand Experience - Contact"}],"period.demogs":{"item":[{"Male":16.921,"Female":9.7476,"_row":"Recent Brand Experience - Contact"}],"vs":{}},"time":{"item":[{"2021-Q2":12.1471,"2021-Q3":12.332,"2021-Q4":13.3058,"2022-Q1":12.9696,"NET":12.6923,"_row":"Recent Brand Experience - Contact"}],"vs":{}}},"Touchpoint Exposure KPIs":{"type":["Column %"],"data":[true],"blurb":["This shows the recent exposure in the past 3 months to your brand across touchpoints. It is based on consumers aware of your brand."],"period.kpis":{"item":[{"x":19.0011,"_row":"TV/cinema ad"},{"x":18.3125,"_row":"Print ad"},{"x":20.3202,"_row":"Online ad"},{"x":7.6656,"_row":"Outdoor ad"},{"x":6.813,"_row":"Radio ad"},{"x":12.5618,"_row":"Sponsorship"},{"x":12.0223,"_row":"Leaflet"},{"x":11.0871,"_row":"Social media"},{"x":18.3524,"_row":"Online search"},{"x":19.7512,"_row":"Customers product review"},{"x":24.6192,"_row":"Experts product review"},{"x":29.4062,"_row":"Word of mouth"},{"x":20.1329,"_row":"News article"},{"x":14.2877,"_row":"Store staff"},{"x":21.9654,"_row":"Brand's website"},{"x":22.8376,"_row":"In-store"},{"x":22.477,"_row":"Retailer's website"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"TV/cinema ad"},{"x":4,"_row":"Print ad"},{"x":5,"_row":"Online ad"},{"x":10,"_row":"Outdoor ad"},{"x":9,"_row":"Radio ad"},{"x":5,"_row":"Sponsorship"},{"x":8,"_row":"Leaflet"},{"x":8,"_row":"Social media"},{"x":5,"_row":"Online search"},{"x":5,"_row":"Customers product review"},{"x":4,"_row":"Experts product review"},{"x":4,"_row":"Word of mouth"},{"x":3,"_row":"News article"},{"x":6,"_row":"Store staff"},{"x":5,"_row":"Brand's website"},{"x":5,"_row":"In-store"},{"x":7,"_row":"Retailer's website"}],"vs":{}},"period.sigs":[{"x":-0.665,"_row":"Brand I trust"},{"x":0.5738,"_row":"Easy to identify"},{"x":1.6705,"_row":"Endorsed"},{"x":-0.3236,"_row":"Expert in the category"},{"x":-0.0662,"_row":"Has something unique"},{"x":-0.3176,"_row":"Meets my needs"},{"x":0.8386,"_row":"Modern"},{"x":-0.3448,"_row":"Promotes society changes"},{"x":-0.7081,"_row":"Proud to own"},{"x":0.1038,"_row":"Sets standards"},{"x":-0.4051,"_row":"Talk positively about"},{"x":-0.4668,"_row":"Values I identify with"}],"period.demogs":{"item":[{"Male":"NaN","Female":"NaN","_row":"TV/cinema ad"},{"Male":"NaN","Female":"NaN","_row":"Print ad"},{"Male":"NaN","Female":"NaN","_row":"Online ad"},{"Male":"NaN","Female":"NaN","_row":"Outdoor ad"},{"Male":"NaN","Female":"NaN","_row":"Radio ad"},{"Male":"NaN","Female":"NaN","_row":"Sponsorship"},{"Male":"NaN","Female":"NaN","_row":"Leaflet"},{"Male":"NaN","Female":"NaN","_row":"Social media"},{"Male":"NaN","Female":"NaN","_row":"Online search"},{"Male":"NaN","Female":"NaN","_row":"Customers product review"},{"Male":"NaN","Female":"NaN","_row":"Experts product review"},{"Male":"NaN","Female":"NaN","_row":"Word of mouth"},{"Male":"NaN","Female":"NaN","_row":"News article"},{"Male":"NaN","Female":"NaN","_row":"Store staff"},{"Male":"NaN","Female":"NaN","_row":"Brand's website"},{"Male":"NaN","Female":"NaN","_row":"In-store"},{"Male":"NaN","Female":"NaN","_row":"Retailer's website"}],"vs":{}},"time":{"item":[{"2021-Q2":11.7016,"2021-Q3":6.8723,"2021-Q4":13.3607,"2022-Q1":19.0011,"NET":12.826,"_row":"TV/cinema ad"},{"2021-Q2":8.3058,"2021-Q3":12.1348,"2021-Q4":20.468,"2022-Q1":18.3125,"NET":15.1475,"_row":"Print ad"},{"2021-Q2":8.3864,"2021-Q3":14.7837,"2021-Q4":15.4584,"2022-Q1":20.3202,"NET":15.0079,"_row":"Online ad"},{"2021-Q2":4.9123,"2021-Q3":14.6484,"2021-Q4":13.6906,"2022-Q1":7.6656,"NET":10.4497,"_row":"Outdoor ad"},{"2021-Q2":13.9834,"2021-Q3":10.8716,"2021-Q4":13.1583,"2022-Q1":6.813,"NET":11.1113,"_row":"Radio ad"},{"2021-Q2":6.0643,"2021-Q3":13.175,"2021-Q4":14.7905,"2022-Q1":12.5618,"NET":11.8979,"_row":"Sponsorship"},{"2021-Q2":12.9195,"2021-Q3":20.4996,"2021-Q4":16.5084,"2022-Q1":12.0223,"NET":15.5667,"_row":"Leaflet"},{"2021-Q2":10.3269,"2021-Q3":11.1729,"2021-Q4":13.2348,"2022-Q1":11.0871,"NET":11.5208,"_row":"Social media"},{"2021-Q2":13.9089,"2021-Q3":28.185,"2021-Q4":31.0463,"2022-Q1":18.3524,"NET":23.282,"_row":"Online search"},{"2021-Q2":12.7419,"2021-Q3":19.0518,"2021-Q4":21.0585,"2022-Q1":19.7512,"NET":18.3961,"_row":"Customers product review"},{"2021-Q2":9.4552,"2021-Q3":12.0895,"2021-Q4":21.197,"2022-Q1":24.6192,"NET":17.2228,"_row":"Experts product review"},{"2021-Q2":19.0323,"2021-Q3":28.4476,"2021-Q4":25.563,"2022-Q1":29.4062,"NET":25.8649,"_row":"Word of mouth"},{"2021-Q2":13.4377,"2021-Q3":9.0231,"2021-Q4":10.4973,"2022-Q1":20.1329,"NET":13.2719,"_row":"News article"},{"2021-Q2":5.8026,"2021-Q3":13.1393,"2021-Q4":23.4688,"2022-Q1":14.2877,"NET":14.6159,"_row":"Store staff"},{"2021-Q2":14.3807,"2021-Q3":16.5343,"2021-Q4":26.4444,"2022-Q1":21.9654,"NET":20.143,"_row":"Brand's website"},{"2021-Q2":12.8379,"2021-Q3":32.7936,"2021-Q4":30.5247,"2022-Q1":22.8376,"NET":25.2379,"_row":"In-store"},{"2021-Q2":17.8194,"2021-Q3":26.0674,"2021-Q4":37.497,"2022-Q1":22.477,"NET":26.4092,"_row":"Retailer's website"}],"vs":{}}},"Brand Consistency KPIs":{"type":["Column %"],"data":[true],"blurb":["How consistent is consumers' experience with your brand."],"period.kpis":{"item":[{"x":0,"_row":"Not at all"},{"x":6.9403,"_row":"Very little"},{"x":38.5391,"_row":"Somewhat"},{"x":34.4953,"_row":"A lot"},{"x":20.0253,"_row":"Completely"},{"x":100,"_row":"NET"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Not at all"},{"x":2,"_row":"Very little"},{"x":2,"_row":"Somewhat"},{"x":5,"_row":"A lot"},{"x":4,"_row":"Completely"}],"vs":{}},"period.sigs":[{"x":0,"_row":"Not at all"},{"x":1.0819,"_row":"Very little"},{"x":-0.5548,"_row":"Somewhat"},{"x":0.5183,"_row":"A lot"},{"x":-0.6669,"_row":"Completely"},{"x":-0.0704,"_row":"NET"}],"period.demogs":{"item":[{"Male":0,"Female":0,"_row":"Not at all"},{"Male":4.1825,"Female":0,"_row":"Very little"},{"Male":41.3226,"Female":44.1695,"_row":"Somewhat"},{"Male":29.4103,"Female":33.9093,"_row":"A lot"},{"Male":25.0846,"Female":21.9212,"_row":"Completely"},{"Male":100,"Female":100,"_row":"NET"}],"vs":{}},"time":{"item":[{"2021-Q2":6.6647,"2021-Q3":2.2323,"2021-Q4":2.6383,"2022-Q1":6.9403,"NET":4.5595,"_row":"Very little"},{"2021-Q2":36.078,"2021-Q3":29.4419,"2021-Q4":42.3737,"2022-Q1":38.5391,"NET":36.7313,"_row":"Somewhat"},{"2021-Q2":31.556,"2021-Q3":44.2826,"2021-Q4":31.0713,"2022-Q1":34.4953,"NET":35.3274,"_row":"A lot"},{"2021-Q2":25.7013,"2021-Q3":24.0433,"2021-Q4":23.9167,"2022-Q1":20.0253,"NET":23.3818,"_row":"Completely"},{"2021-Q2":100,"2021-Q3":100,"2021-Q4":100,"2022-Q1":100,"NET":100,"_row":"NET"}],"vs":{}}},"Net Promoter Score KPIs":{"type":["Average"],"data":[true],"blurb":["Consumers' willingness to recommend your brand, measured by: promoters (8 to 10 out of 10) - detractors (6 out of 10 or below)."],"period.kpis":{"item":[{"x":35.1588,"_row":"Net Promoter Score"}],"vs":{}},"period.ranks":{"item":[{"x":4,"_row":"Net Promoter Score"}],"vs":{}},"period.sigs":[{"x":0.1993,"_row":"Net Promoter Score"}],"period.demogs":{"item":[{"Male":34.8591,"Female":31.6778,"_row":"Net Promoter Score"}],"vs":{}},"time":{"item":[{"2021-Q2":33.3097,"2021-Q3":10.725,"2021-Q4":33.5394,"2022-Q1":35.1588,"NET":26.1401,"_row":"Net Promoter Score"}],"vs":{}}},"configs":{"kpi":["Column %"],"periodicity":["Quarter"],"period":["2022-Q1"],"periods":["2021-Q2","2021-Q3","2021-Q4","2022-Q1"],"comparison.period":["2021-Q4"],"period.comparison.vs":[1],"comparison.type":["period"],"demogs":{"demog":["Gender"],"demog.options":["Male","Female"]},"item":["Audio-Technica "],"vs":["Comparison period"],"sig.threshold":["1.65"],"tree.source":["Brand Tracking*n*n *tab*Brand Performance*n*n *tab**tab**tab*Brand Momentum KPIs*n*n *tab**tab**tab*Brand Funnel KPIs*n*n *tab*Brand Diagnostics*n*n *tab**tab*Mental Availability KPIs*n*n *tab**tab**tab*Brand Salience KPIs*n*n *tab**tab**tab*Mental Availability KPIs*n*n *tab**tab*Brand Attachment*n*n *tab**tab**tab*Brand Attachment KPIs*n*n *tab**tab*Brand Knowledge KPIs*n*n *tab**tab**tab*Brand Imagery KPIs*n*n *tab**tab**tab*Product Imagery KPIs*n*n *tab**tab*Brand Experience*n*n *tab**tab**tab*Recent Brand Experience KPIs*n*n *tab**tab**tab*Touchpoint Exposure KPIs*n*n *tab**tab**tab*Brand Consistency KPIs*n*n *tab**tab**tab*Net Promoter Score KPIs*n*n "]}})35:T50f,kpiTableDataTest = { const format = formats[kpiType] const kpiRows = kpiData["period.kpis"]["item"].map(o => o._row) const data = kpiRows.map((d,i) => { if(comparisonType == "period") { return { kpi: d, rank: kpiData["period.ranks"]["item"].map(o => o.x)[i], period : kpiData["period.kpis"]["item"].map(o => o.x)[i], delta : kpiData["time"]["item"].map(o => o[selectedPeriod] - o[comparisonPeriod])[i], significance : kpiData["period.sigs"].map(o => o.x <= -1*sigThreshold? "▼": o.x >= sigThreshold? "▲": "")[i], demogs: "", "time-series": "" } } else if(comparisonType == "item") { return { kpi: d, rank: kpiData["period.ranks"]["item"].map((o, ind) => o.x - kpiData["period.ranks"]["vs"][ind].x)[i], period : kpiData["period.kpis"]["item"].map(o => o.x)[i], delta : kpiData["time"]["item"].map((o, ind) => o[selectedPeriod] - kpiData["time"]["vs"][ind][selectedPeriod])[i], significance : kpiData["period.sigs"].map((o, ind) => o.x <= -1*sigThreshold? "▼": o.x >= sigThreshold? "▲": "")[i], demogs: standardiseDemogsInRows(kpiRows[i]), "time-series": standardiseDatesInRows(kpiRows[i]) } } }) return data }36:Ta86,//Tweaked from https://observablehq.com/@mbostock/covid-cases-by-state function sparkArea(kpi, format, { x: X, y: Y, xdomain = d3.extent(X), ydomain = (comparisonType == "period") & (kpiType != "Average")? [0,Math.max(60,d3.extent(Y)[1])]: (kpiType == "Average")?[Math.min(-100,d3.extent(Y)[0]),Math.max(100,d3.extent(Y)[1])]: [Math.min(-35,d3.extent(Y)[0]),Math.max(35,d3.extent(Y)[1])], width = 200, height = barHeightStandard }) { const kpiMapped = d3.group(standardiseDatesInRows(kpi), o => o.date) const x = d3.scaleUtc(xdomain, [0, width]); const y = d3.scaleLinear(ydomain, [height, 0]); const labelSpace = 55 const area = d3.area() .x((d, i) => x(X[i])) .y1((d, i) => y(Y[i])) .y0(height) .defined((d, i) => { return !isNaN(X[i]) && !isNaN(Y[i]) }); let el = d3.create("svg") el .attr("width", width + labelSpace) .attr("height", height) .style("vertical-align", "middle") .call(g => g.append("path") .attr("fill", comparisonType == "period"? "#e1e1e1": "transparent") .attr("d", area(standardiseDatesInRows(kpi)))) .call(g => g.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("d", area.lineY1()(standardiseDatesInRows(kpi)))) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date)])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date)])) .attr("y2", y(ydomain[0])) .attr("stroke", "#000") ) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date) - comparison.shift])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date) - comparison.shift])) .attr("y2", y(ydomain[0])) .attr("stroke", "black") ) .call(g => g.append("rect") .attr("x", x(X[dates.indexOf(date) - comparison.shift])) .attr("y", y(ydomain[1])) .attr("width", x(X[dates.indexOf(date)]) - x(X[dates.indexOf(date) - comparison.shift])) .attr("height", y(ydomain[0]) - y(ydomain[1])) .attr("fill", "#CF4800") .attr("fill-opacity", 0.4) .attr("stroke-width", 0) ) el.append("text") .attr("x", width + 5) .attr("y", height/1.5) .text((o) => { let deltas = ((typeof kpiMapped.get(date) != "undefined") && (typeof kpiMapped.get(comparisonDate) != "undefined"))? kpiMapped.get(date)[0].value - kpiMapped.get(comparisonDate)[0].value : "" return `(${d3.format(format["delta"])(deltas/format["divider"]["delta"])})` }) .attr("fill", "black") return el .node() ; }37:Tafa,//Tweaked from https://observablehq.com/@mbostock/covid-cases-by-state function sparkLine(kpi, format, { x: X, y: Y, xdomain = d3.extent(X), ydomain = kpiType == "Average"? [Math.min(-100,d3.extent(Y)[0]),Math.max(100,d3.extent(Y)[1])]: [Math.min(-35,d3.extent(Y)[0]),Math.max(35,d3.extent(Y)[1])], width = 200, height = barHeightStandard }) { const kpiMapped = d3.group(standardiseDatesInRows(kpi), o => o.date) const x = d3.scaleUtc(xdomain, [0, width]); const y = d3.scaleLinear(ydomain, [height, 0]); const labelSpace = 55 const area = d3.area() .x((d, i) => x(X[i])) .y1((d, i) => y(Y[i])) .y0(height) .defined((d, i) => { return !isNaN(X[i]) && !isNaN(Y[i]) }); let el = d3.create("svg") el .attr("width", width + labelSpace) .attr("height", height) .style("vertical-align", "middle") .call(g => g.append("path") .attr("fill", "transparent") .attr("d", area(standardiseDatesInRows(kpi)))) .call(g => g.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("d", area.lineY1()(standardiseDatesInRows(kpi)))) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date)])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date)])) .attr("y2", y(ydomain[0])) .attr("stroke", "#000") ) .call(g => g.append("line") .attr("x1",x(X[dates.indexOf(date) - comparison.shift])) .attr("y1", y(ydomain[1])) .attr("x2",x(X[dates.indexOf(date) - comparison.shift])) .attr("y2", y(ydomain[0])) .attr("stroke", "black") ) .call(g => g.append("line") .attr("x1",x(X[dates.length -1])) .attr("y1", y(0)) .attr("x2",x(X[0])) .attr("y2", y(0)) .attr("stroke", "grey") .attr("stroke-width", "0.3px") ) .call(g => g.append("rect") .attr("x", x(X[dates.indexOf(date) - comparison.shift])) .attr("y", y(ydomain[1])) .attr("width", x(X[dates.indexOf(date)]) - x(X[dates.indexOf(date) - comparison.shift])) .attr("height", y(ydomain[0]) - y(ydomain[1])) .attr("fill", "#CF4800") .attr("fill-opacity", 0.4) .attr("stroke-width", 0) ) el.append("text") .attr("x", width + 5) .attr("y", height/1.5) .text((o) => { let deltas = ((typeof kpiMapped.get(date) != "undefined") && (typeof kpiMapped.get(comparisonDate) != "undefined"))? kpiMapped.get(date)[0].value - kpiMapped.get(comparisonDate)[0].value : "" return `(${d3.format(format["delta"])(deltas/format["divider"]["delta"])})` }) .attr("fill", "black") return el .node() ; }38:T64f,//adaptation of @observablehq/summary-table {SmallStack} SmallCol = (categoryData, format, maxCategories = 100) => { // Get a col chart for the demogs let chartData = categoryData; let allDataNaN = categoryData.map(o => o.count).every(o => isNaN(o)) let categories = 0; if (chartData.length > maxCategories) { chartData = categoryData.filter((d, i) => i < maxCategories); const total = d3.sum(categoryData, (d) => d.count); const otherCount = total - d3.sum(chartData, (d) => d.count); let other = {}; other[demogs] = "Other categories..."; other.count = otherCount; other.pct = other.count / total; chartData.push(other); } return addTooltips( Plot.barY(chartData, { x: demogs, fill: demogs, y: "count", title: (d) => { return d[demogs] + "\n" + d3.format(format)(d.pct) } }).plot({ color: { scheme: "blues" }, marks: [ /*Plot.text([0, 0], { x: 0, dy: 0 }),*/ Plot.ruleY([0], {stroke: "grey"}) ], style: { paddingTop: "25px", paddingBottom: "0px", textAnchor: "start", overflow: "visible", backgroundColor: "transparent" }, x: { axis: null }, color: { domain: chartData.map((d) => d[demogs]), scheme: "blues", reverse: true }, height: allDataNaN? 0: barHeightStandard, width: 100, y: { axis: null, range: [barHeightStandard, 0], domain: kpiType == "Average"? [-100,100]: [-0.35,0.35] } }), { fill: "darkblue" } ); }39:T675,SmallStack = (categoryData, format, maxCategories = 100) => { // Get a horizontal stacked bar const label = categoryData.length === 1 ? " category" : " categories"; let chartData = categoryData; let allDataNaN = categoryData.map(o => o.count).every(o => isNaN(o)) let categories = 0; if (chartData.length > maxCategories) { chartData = categoryData.filter((d, i) => i < maxCategories); const total = d3.sum(categoryData, (d) => d.count); const otherCount = total - d3.sum(chartData, (d) => d.count); let other = {}; other[demogs] = "Other categories..."; other.count = otherCount; other.pct = other.count / total; chartData.push(other); } return addTooltips( Plot.barX(chartData, { x: "count", fill: demogs, y: 0, title: (d) => d[demogs] + "\n" + d3.format(format)(d.pct) }).plot({ color: { scheme: "blues" }, marks: [ /*Plot.text([0, 0], { x: 0, dy: 100, text: (d) => d3.format(",.0f")(categoryData.length) + `${label}` })*/ //Plot.ruleX([0]) ], style: { paddingTop: "12px", paddingBottom: "3px !important", textAnchor: "start", overflow: "visible", backgroundColor: "transparent", fontSize: "10px !important" }, x: { axis: null }, color: { domain: chartData.map((d) => d[demogs]), scheme: "blues", reverse: true }, height: allDataNaN? 0:barHeightStandard, width: 205, y: { axis: null, range: [barHeightStandard, 0] } }), { fill: "darkblue" } ); }3a:T481,demogsGroupByRow = { const format = formats[kpiType] const output = d3.group(kpiData["period.demogs"]["item"].map( (o, ind) => { const z = [] const keysToDemog = Object.keys(o).filter(o => o != "_row") const values = Object.values(o) const row = values[values.length - 1] const v = kpiData["period.demogs"]["vs"][ind] const vKeysToDemog = typeof v != "undefined"? Object.keys(v).filter(v => v != "_row"): null const vValues = typeof v != "undefined"? Object.values(v): null keysToDemog.forEach((k,i) => { const x = {} x[demogs] = k x["count"] = values[i]/format["divider"]["period"] x["pct"] = values[i]/format["divider"]["period"] x["id"] = row x["type"] = "item" z.push(x) if((typeof v != "undefined") && (k == vKeysToDemog[i])) { const y = {} y[demogs] = k y["count"] = vValues[i]/format["divider"]["period"] y["pct"] = vValues[i]/format["divider"]["period"] y["id"] = row y["type"] = "vs" z.push(y) } }) return z }).flat(), o => o.type , o => o.id) return output }3b:T46a,standardiseDemogsInRows = function(rowFromMap) { return demogOptions.map( (o,i) => { const output = {} if( ((comparisonType == "period") && (typeof demogsGroupByRow.get("item").get(rowFromMap) == "undefined")) || ((comparisonType == "item") && ((typeof demogsGroupByRow.get("item").get(rowFromMap) == "undefined") || (typeof demogsGroupByRow.get("vs").get(rowFromMap) == "undefined")) ) ) { output[demogs] = o output["count"] = null output["pct"] = null output["id"] = rowFromMap } else { output[demogs] = o output["count"] = comparisonType == "period"? demogsGroupByRow.get("item").get(rowFromMap)[i]["count"]: demogsGroupByRow.get("item").get(rowFromMap)[i]["count"] - demogsGroupByRow.get("vs").get(rowFromMap)[i]["count"] output["pct"] = comparisonType == "period"? demogsGroupByRow.get("item").get(rowFromMap)[i]["pct"]: demogsGroupByRow.get("item").get(rowFromMap)[i]["pct"] - demogsGroupByRow.get("vs").get(rowFromMap)[i]["pct"] output["id"] = rowFromMap } return output }) }3c:T60a,toParseableDate = function(value){ const periods_object_index = { Month: { split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["01","02","03","04","05","06","07","08","09","10","11","12"].map(o => { return [o,o] }) ) }, Quarter: {split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["Q1","Q2","Q3","Q4"].map(o => { return o == "Q1"? [o, "01"]: o == "Q2"? [o, "04"]: o == "Q3"? [o, "07"]: o == "Q4"? [o, "10"]: null }) ) }, Half: {split: "-", yearPart: 0, toMapPart: 1, mapping: Object.fromEntries( ["H1","H2"].map(o => { const output = {} output[o] = o == "H1"? [o, "01"]: o == "H2"? [o, "07"]: null return output }) ) }, Year: {split: "Y", yearPart: 0, toMapPart: null} } const splitValue = value.split(periods_object_index[periodicity]["split"]) //datecheck if you need it //Object.prototype.toString.call(date) === '[object Date]' const year = Number(splitValue[periods_object_index[periodicity].yearPart]) const month = periods_object_index[periodicity].mapping [ splitValue[periods_object_index[periodicity].toMapPart] ] const day = "01" return typeof month != "undefined"? `${year}-${month}-${day}`: null }3d:[] 2f:{"title":"LIVE: Advanced Summary, A/B Comparison - Collapsible Tree","cells":[{"id":0,"value":"md`# LIVE: Advanced Summary, A/B Comparison - Collapsible Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"viewof kpi = Inputs.select(kpiModules, {label: \"kpi\", value: kpiModules[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2075,"value":"sessionStorageClick = {\n let id = sessionStorage.getItem(\"clickedNodeId\")\n //console.log(id, d3.select(`#${id}`))\n d3.select(`#${id}`).dispatch(\"click\")\n return id\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"legend = {\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 30])\n .style(\"font\", \"12px Lato\")\n .style(\"user-select\", \"none\");\n const radius = 5\n \n // Handmade legend\n svg.append(\"text\").attr(\"x\", 12 + radius).attr(\"y\", 20).text(\"Contains:\").style(\"font-size\", \"12px\").attr(\"alignment-baseline\",\"middle\")\n svg.append(\"circle\").attr(\"cx\",100 + radius).attr(\"cy\",20).attr(\"r\", radius).style(\"fill\", \"#999\")\n svg.append(\"text\").attr(\"x\", 112 + radius).attr(\"y\", 20).text(\"Description only\").style(\"font-size\", \"12px\").attr(\"alignment-baseline\",\"middle\")\n svg.append(\"circle\").attr(\"cx\",250 + radius).attr(\"cy\",20).attr(\"r\", radius).style(\"fill\", \"#555\")\n svg.append(\"text\").attr(\"x\", 262 + radius).attr(\"y\", 20).text(\"Description + KPI data\").style(\"font-size\", \"12px\").attr(\"alignment-baseline\",\"middle\")\n \n return svg.node();\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"viewof date = Scrubber(dates, {\n initial: dates.length - 1,\n delay: 100,\n loop: false,\n autoplay: false,\n format: date => dateMappedToStrings[date]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"kpiModules = Object.keys(dataMockDisplayr).filter((o) => o != \"configs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"dates = periods.map(s => toParseableDate(s))","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"dateMappedToStrings = {\n return Object.fromEntries( dates.map((o,i) => [o, periods[i]]) )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"comparisonDate = dates[dates.indexOf(date) - comparison.shift]","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"sparkXdomain = d3.extent(dates.map(d => new Date(d.slice(0,4), d.slice(5,7), d.slice(9,10))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"kpis = Object.keys(dataMockDisplayr).filter(o => o != \"configs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"comparison = ({\n shift: configs[\"period.comparison.vs\"][0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"kpiType = kpiData[\"type\"][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1458,"value":"comparisonType = configs[\"comparison.type\"][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"periodicity = configs[\"periodicity\"][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1477,"value":"item = configs[\"item\"][0]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"vs = configs[\"vs\"][0]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1481,"value":"selectedPeriod = configs[\"period\"][0]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1483,"value":"comparisonPeriod = configs[\"comparison.period\"][0]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1485,"value":"sigThreshold = configs[\"sig.threshold\"][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1494,"value":"demogs = configs[\"demogs\"][\"demog\"][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1730,"value":"periods = configs[\"periods\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1499,"value":"demogOptions = configs[\"demogs\"][\"demog.options\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1578,"value":"kpiRows = kpiData[\"period.kpis\"][\"item\"].map(o => o._row)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"configs = dataMockDisplayr[\"configs\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":" kpiData = dataMockDisplayr[kpi]","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"formats = ({\n \"Column %\": {period:\",.0%\", delta:\"+.1f\", divider: {period: 100, delta: 1} },\n \"Average\": {period:\".1f\", delta:\"+.1f\", divider: {period: 1, delta: 1} }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1167,"value":"barHeightStandard = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"function rank() { \n function background(x){\n if (x == 1) return \"#ffd700\" \n if (x == 2) return \"#c0c0c0\"\n if (x == 3) return \"#cd7f32\"\n else return \"#ffffff\"\n }\n return x => htl.html`${d3.format(comparisonType == \"period\"? \".0f\": \"+,.0f\")((x).toLocaleString(\"en\"))}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1913,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"//import {sparkBar} from \"19ece2e2ef3b037b\" //\"@observablehq/input-table\"\nfunction sparkBar(max, format, divider, color) {\n return x => htl.html`

0? color == \"bi-directional\"? \"#BDE5BD\" /*green*/ : \"#AFBBDB\" /*purple*/: \"#CBA6A8\" /*red*/};\n width: ${100 * x > 0? x : (-100*x) / max}%;\n height: ${barHeightStandard}px;\n float: left; \n padding-left: 3px;\n padding-top: ${barHeightStandard/4}px;\n box-sizing: border-box;\n overflow: visible;\n display: flex;\n justify-content: start;\n\">${d3.format(format)((x/divider).toLocaleString(\"en\"))}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1849,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"timeGroupByRowDate = {\n \n const item = kpiData[\"time\"][\"item\"].map(o => {\n return Object.entries(o)\n }).map(o => {\n const i = []\n o.filter(o => periods.indexOf(o[0]) > -1).forEach(e => { \n const x = {}\n x[\"type\"] = \"item\"\n x[\"date\"] = e[0]\n x[\"value\"] = e[1]\n x[\"id\"] = o[o.length - 1][1]\n i.push(x)\n })\n return i\n })\n \n const vs = Array.isArray(kpiData[\"time\"][\"vs\"])? kpiData[\"time\"][\"vs\"].map(o => {\n return Object.entries(o)\n }).map(o => {\n const i = []\n o.filter(o => periods.indexOf(o[0]) > -1).forEach(e => { \n const x = {}\n x[\"type\"] = \"vs\"\n x[\"date\"] = e[0]\n x[\"value\"] = e[1]\n x[\"id\"] = o[o.length - 1][1]\n i.push(x)\n })\n return i\n }): []\n return d3.group(item.concat(vs).flat(), o => o.type, o => o.id, o => o.date)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":903,"value":"standardiseDatesInRows = function(rowFromMap) {\n return periods.map( (o,i) => {\n const output = {}\n let value = NaN\n if(\n (comparisonType == \"period\") && \n (typeof timeGroupByRowDate.get(\"item\").get(rowFromMap).get(o) != \"undefined\")\n ) {\n value = timeGroupByRowDate.get(\"item\").get(rowFromMap).get(o)[0].value\n } else if (\n (comparisonType == \"item\") && \n (typeof timeGroupByRowDate.get(\"item\").get(rowFromMap).get(o) != \"undefined\") && \n (typeof timeGroupByRowDate.get(\"vs\").get(rowFromMap).get(o) != \"undefined\")\n ) {\n value = timeGroupByRowDate.get(\"item\").get(rowFromMap).get(o)[0].value - timeGroupByRowDate.get(\"vs\").get(rowFromMap).get(o)[0].value\n }\n output[\"date\"] = toParseableDate(o)\n output[\"value\"] = value\n output[\"id\"] = rowFromMap\n return output \n }) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"dx = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"dy = width / 7","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 120})","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"parseDateShort = function(d) {\n return parseDate(d).toLocaleString(\"en\", {month: \"short\", year: \"numeric\"}) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"dataTree = cstParseRows(source, ([name, value, color = \"#ddd\"]) => ({\n name, \n value: value === undefined ? undefined : +value, \n color\n}))//cstParseRows(source)//FileAttachment(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"source = dataMockDisplayr.configs[\"tree.source\"][0].replaceAll(\"*tab*\", \"\\t\").replaceAll(\"*n*n\", \"\\n\")/*viewof source = editor(`GfK Brand Architect\n\tBrand Performance\n\t\tConsumers' view\n\t\t\tBrand Strength KPIs\n\t\t\tBrand Funnel KPIs\n\t\t\tBrand Momentum KPIs\n\t\tStated Brand Funnel KPIs\n\t\tBrand Momentum KPIs\n\t\tMarket's view\n\t\t\tSales KPIs\n\t\t\tMarket Share KPIs\n\tBrand Diagnostics\n\t\tMental Availability\n\t\t\tBrand Salience KPIs\n\t\t\tMental Availability KPIs\t\n\t\tBrand Attachment\n\t\t\tBrand Attachment KPIs\n\t\tBrand Knowledge\n\t\t\tBrand Imagery\n\t\t\tProduct Imagery\n\t\t\tRelative Strengths and Weaknesses\n\t\tBrand Experience\n\t\t\tRecent Brand Experience\n\t\t\tTouchpoint Exposure\n\tMarketing Activation\n\t\tDrivers of Brand Strategy\n\t\t\tBrand Positioning Activation\n\t\t\tTouchpoint Activation\n`)*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"import {editor, cstParseRows} from \"@mbostock/comma-separated-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"import {clearableRadio} from \"@saneef/is-observable-inputs-style-able\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"import {Scrubber} from \"@mtsvelik/styled-scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1127,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1221,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}