Public
Edited
Mar 15, 2023
sparkTableBA = generateTable("data.pct")
sparkTableBaNum = generateTable("data.num")
generateTable = (type) => dataTableTypesExisting.indexOf(type) != -1? Inputs.table(usedData[type], getBaFormat(usedData[type], type)): htl.html`<span class="hide">hide me</span>`
tempval = getBaFormat(usedData["data.pct"], "data.pct")
outputColumns = ["KPI","Average","Sample Size","Lower","Upper","30%","50%","80%","90%"]
warning_image = FileAttachment("warning_newron.png").url()
getBaFormat = (usedData, usedDataKey) => {
let keys = Object.keys(usedData[0])
let o = {
format: {},
width: {},
align: {}
}
let valueFormat = usedDataKey == "data.pct"? ",.0%": ",.1f"
keys.forEach( (e,i) => {
if(i != 0) o.format[e] = ["KPI","Sample Size"].indexOf(e) == -1? baSparkbar(1, valueFormat, ["#AFBBDB", "#CBA6A8"], usedDataKey): d3.format("0")
if(i == 0) {
o.format[e] = baWarning(usedDataKey)
o.width[e] = 450
}
o.align[e] = "left"
})
o.layout = "auto"
return o
}
dataTableTypesExisting = ["data.pct", "data.num"].filter(o => Array.isArray(dataMockDisplayr[o]))
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"]})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
