data = /*({"data":{"x":[{"2022-H2":0.7,"_row":"Sage"},{"2022-H2":0.6,"_row":"Quickbooks/Intuit"},{"2022-H2":0.8,"_row":"Xero"},{"2022-H2":0.9,"_row":"SAP"},{"2022-H2":1,"_row":"Oracle/Oracle NetSuite"},{"2022-H2":0.8,"_row":"Microsoft Dynamics"},{"2022-H2":0.9,"_row":"IRIS"},{"2022-H2":1.2,"_row":"Access"},{"2022-H2":1,"_row":"Brightpay"},{"2022-H2":0.9,"_row":"IFS"},{"2022-H2":1.1,"_row":"Bamboo HR"},{"2022-H2":1.2,"_row":"BreatheHR"},{"2022-H2":1.2,"_row":"HiBob"},{"2022-H2":1.3,"_row":"Infor"},{"2022-H2":1.1,"_row":"Epicor"},{"2022-H2":1.4,"_row":"Personio"}],"y":[{"2022-H2":29.5,"_row":"Sage"},{"2022-H2":17.7,"_row":"Quickbooks/Intuit"},{"2022-H2":15.9,"_row":"Xero"},{"2022-H2":5.5,"_row":"SAP"},{"2022-H2":4.5,"_row":"Oracle/Oracle NetSuite"},{"2022-H2":6.1,"_row":"Microsoft Dynamics"},{"2022-H2":3.5,"_row":"IRIS"},{"2022-H2":2.2,"_row":"Access"},{"2022-H2":2.4,"_row":"Brightpay"},{"2022-H2":2,"_row":"IFS"},{"2022-H2":1.8,"_row":"Bamboo HR"},{"2022-H2":2.5,"_row":"BreatheHR"},{"2022-H2":1.8,"_row":"HiBob"},{"2022-H2":1.8,"_row":"Infor"},{"2022-H2":1.6,"_row":"Epicor"},{"2022-H2":1.3,"_row":"Personio"}],"z":[{"2022-H2":3.9,"_row":"Sage"},{"2022-H2":2.3,"_row":"Quickbooks/Intuit"},{"2022-H2":2.5,"_row":"Xero"},{"2022-H2":1,"_row":"SAP"},{"2022-H2":0.9,"_row":"Oracle/Oracle NetSuite"},{"2022-H2":0.9,"_row":"Microsoft Dynamics"},{"2022-H2":0.6,"_row":"IRIS"},{"2022-H2":0.5,"_row":"Access"},{"2022-H2":0.5,"_row":"Brightpay"},{"2022-H2":0.4,"_row":"IFS"},{"2022-H2":0.4,"_row":"Bamboo HR"},{"2022-H2":0.6,"_row":"BreatheHR"},{"2022-H2":0.4,"_row":"HiBob"},{"2022-H2":0.5,"_row":"Infor"},{"2022-H2":0.4,"_row":"Epicor"},{"2022-H2":0.3,"_row":"Personio"}]},"brands_selected":["Sage","Quickbooks/Intuit","Xero","SAP","Oracle/Oracle NetSuite","Microsoft Dynamics","IRIS","Freshbooks","FreeAgent","Zoho Books","ADP","KASHFLOW","Access","Brightpay","IFS","MoneySoft","Exact","Accounting Seed","Bamboo HR","BreatheHR","HiBob","SYSPRO","Zellis","KeyPay","Unit4","Cegid ","Intacct","Infor","Epicor","Personio","Wolters Kluwer/CCH Tagetik"],"height":[450],"label_font_size":[9],"colors":{"selected":["#4368BD"],"non_selected":["#DDDDDD"],"z_labels":["#3B4145"],"axis_labels":["#3B4145"],"axis_lines":["#A9A9A9"]},"axis_labels":{"x":["Brand Premium Score"],"y":["Brand Choice Score (%)"],"z":["size of bubble = Brand Strength Index"],"toggle":["No"]},"axis_params":{"max":["fixed"],"min":["zero"],"avg":["dynamic"]},"axis_label_decimals":{"x":[1],"y":[0],"z":[1]},"dot_size":["variable"],"bg_color":["#FFFFFF"],"initial_period":["2022-H2"],"periods":["2022-H2"],"time_frame":["Half"]})*/
({"data":{"x":[
{"2021-01":0.3,"2021-02":0.4,"2021-03":0.4,"2021-04":0.5,"2021-05":0.4,"2021-06":0.3,"2021-07":0.3,"_row":"Akai"},
{"2021-01":0.6,"2021-02":0.6,"2021-03":0.6,"2021-04":0.6,"2021-05":0.8,"2021-06":0.7,"2021-07":0.7,"_row":"Hisense"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":"NA","2021-06":"NA","2021-07":1,"_row":"LG"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":0.6,"2021-06":0.5,"2021-07":0.8,"_row":"Xiaomi / Mi"}
],
"y":[
{"2021-01":4.8,"2021-02":5.2,"2021-03":2.8,"2021-04":2.9,"2021-05":2.6,"2021-06":2,"2021-07":1.6,"_row":"Akai"},
{"2021-01":5,"2021-02":4.4,"2021-03":6.7,"2021-04":5,"2021-05":2.9,"2021-06":3.8,"2021-07":5.4,"_row":"Hisense"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":"NA","2021-06":"NA","2021-07":25,"_row":"LG"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":6.7,"2021-06":7.1,"2021-07":6.8,"_row":"Xiaomi / Mi"}
],
"z":[
{"2021-01":0.1,"2021-02":0.2,"2021-03":0.1,"2021-04":0.2,"2021-05":0.1,"2021-06":0.1,"2021-07":0.1,"_row":"Akai"},
{"2021-01":0.3,"2021-02":0.3,"2021-03":0.5,"2021-04":0.3,"2021-05":0.3,"2021-06":0.3,"2021-07":0.5,"_row":"Hisense"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":"NA","2021-06":"NA","2021-07":3,"_row":"LG"},
{"2021-01":"NA","2021-02":"NA","2021-03":"NA","2021-04":"NA","2021-05":0.5,"2021-06":0.4,"2021-07":0.6,"_row":"Xiaomi / Mi"}
]},
"brands_selected":["Akai","Hisense","LG","Majestic","Nordmende","Panasonic","Philips","Saba","Samsung","Smart-Tech","Sony","TCL","TELE System","Telefunken","Toshiba","United","Xiaomi / Mi"],
"height":[450],"label_font_size":[9],"colors":{"selected":["#4368BD"],"non_selected":["#DDDDDD"],"z_labels":["#3B4145"],"axis_labels":["#3B4145"],"axis_lines":["#A9A9A9"]},"axis_labels":{"x":["Brand Premium Score"],"y":["Brand Choice Score (%)"],"z":["size of bubble = Brand Strength Index"],"toggle":["No"]},"axis_params":{"max":["fixed"],"min":["zero"],"avg":["dynamic"]},"axis_label_decimals":{"x":[1],"y":[0],"z":[1]},"dot_size":["variable"],"bg_color":["#FFFFFF"],"initial_period":["2021-01"],
"periods":[
"2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12",
"2022-01","2022-02","2022-03","2022-04","2022-05","2022-06","2022-07","2022-08","2022-09","2022-10","2022-11","2022-12",
"2023-01","2023-02","2023-03","2023-04","2023-05","2023-06","2023-07","2023-08","2023-09","2023-10","2023-11","2023-12"
],"time_frame":["Month"]})
maxY = data.axis_params.max[0] == "fixed"? getAxisParam(reshape_data, "max", "y")*1.15: data.axis_params.max[0]*1.15
sliderRange = periods.length == 1? [parseInt(periodNumerics_array[0]*(1/sliderRangeIncrement))] : d3.range(d3.min(periodNumerics_array), d3.max(periodNumerics_array), sliderRangeIncrement).map(v => parseInt(v*1/sliderRangeIncrement))
sliderTicksIndexes = periodNumerics_array.map(v => sliderRange.indexOf(sliderScale(v))).slice(0,20)
valueAt = (values, periodNumeric) => {
const i = bisectperiodNumeric(values, periodNumeric, 0, values.length - 1);
const a = values[i];
if (i > 0) {
const b = values[i - 1];
const c = [false, false]
//a[0], b[0] are the periodNumeric values, so a[1], b[1] would be the data points
//if previous value null and current value not, display current
//if next value null and current value not, display current
const t = (periodNumeric - a[0]) / (b[0] - a[0]);
if (i < (values.length - 1)){
const c = values[i + 1]
}
return ((a[1] != null) && ((b[1] == null) || (c[1] == null)))? a[1]: a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
bisectperiodNumeric = d3.bisector(([periodNumeric]) => periodNumeric).left
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.
