2f:Te66,chart = { const svg = d3.create("svg") .classed("bubble-chart", true) .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") .attr("transform", "translate(0,0)"); svg.append("g") .attr("class", "x-axis-label") .call(xAxisLabel); svg.append("g") .attr("class", "y-axis-label") .call(yAxisLabel); svg.append("g") .attr("class", "z-axis-label") .call(zAxisLabel); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); g.append("g") .style("stroke-dasharray", "5") .style("color", `${colors.axis_lines}`) .attr("class", "x axis") .attr("transform", "translate(0," + y(yAvgValue) + ")") .call(d3.axisBottom(x).ticks(0)); g.append("g") .style("stroke-dasharray", "5") .style("color", `${colors.axis_lines}`) .attr("class", "y axis") .attr("transform", "translate(" + x(xAvgValue) + ", 0)") .call(d3.axisLeft(y).ticks(0)); const circle = svg.append("g") .selectAll("circle") .data(dataAt(d3.min(periodNumerics_array)), d => d.item) .join("circle") .sort((a, b) => d3.descending(a.z, b.z)) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => radius(d.z)) .attr("fill", d => colorBubble(d.item, brands_selected, colors)) .style("opacity", 0.8) .style("display", d => `${d.item == avgX? "none":"block"}`) .call(circle => circle.append("title").text(d => [`${unescapeHtml(d.item)}`,`${axisLabels.x}: ${parseFloat(d.x).toFixed(axis_label_decimals["x"])}`, `${axisLabels.y}: ${parseFloat(d.y).toFixed(axis_label_decimals["y"])}`,`${axisLabels.z}: ${parseFloat(d.z).toFixed(axis_label_decimals["z"])}`].join("\n"))) const label = svg.append("g") .classed("circle-label", true) .selectAll("text") .data(dataAt(d3.min(periodNumerics_array)), d => d.item) .join("text") .sort((a, b) => d3.descending(a.z, b.z)) .attr("x", d => x(d.x) - radius(d.z)) .attr("y", d => y(d.y) - (radius(d.z) + 2)) .attr("fill", `${colors.z_labels}`) .attr("class", d => to_css_class(d.item.toLowerCase()) ) .attr("id", d => `${to_css_class(d.item.toLowerCase())}_${to_css_class(d.category.toLowerCase())}` ) .style("display", d => ((d.item == avgX) || isNaN(d.x) || isNaN(d.y))? "none": "block" ) .text(d => `${unescapeHtml(d.item)}`) return Object.assign(svg.node(), { update(data) { circle.data(data, d => d.item) .sort((a, b) => d3.descending(a.z, b.z)) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => radius(d.z)) .style("display", d => `${d.item == avgX? "none":"block"}`) .call(circle => circle.select("title").text(d => [`${unescapeHtml(d.item)}`,`${axisLabels.x}: ${parseFloat(d.x).toFixed(axis_label_decimals["x"])}`, `${axisLabels.y}: ${parseFloat(d.y).toFixed(axis_label_decimals["y"])}`,`${axisLabels.z}: ${parseFloat(d.z).toFixed(axis_label_decimals["z"])}`].join("\n"))) label.data(data, d => d.item) .sort((a, b) => d3.descending(a.z, b.z)) .attr("x", d => x(d.x) - radius(d.z)) .attr("y", d => y(d.y) - (radius(d.z) + 2)) .text(d => `${unescapeHtml(d.item)}`) .style("display", d => ((d.item == avgX) || isNaN(d.x) || isNaN(d.y))? "none": "block" ) } }); }30:T657,dynamicStyles = html`` 31:T21e6,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-Q1":0.3,"2021-Q2":0.4,"2021-Q3":0.4,"2021-Q4":0.5,"2022-Q1":0.4,"2022-Q2":0.3,"2022-Q3":0.3,"_row":"Akai"},{"2021-Q1":0.6,"2021-Q2":0.6,"2021-Q3":0.6,"2021-Q4":0.6,"2022-Q1":0.8,"2022-Q2":0.7,"2022-Q3":0.7,"_row":"Hisense"},{"2021-Q1":1,"2021-Q2":1,"2021-Q3":1.3,"2021-Q4":1.4,"2022-Q1":1.8,"2022-Q2":1.5,"2022-Q3":1.5,"_row":"LG"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":0.6,"2022-Q2":0.5,"2022-Q3":0.8,"_row":"Xiaomi / Mi"},{"2021-Q1":2,"2021-Q2":1.9,"2021-Q3":2.3,"2021-Q4":2.2,"2022-Q1":1.8,"2022-Q2":1.4,"2022-Q3":1.5,"_row":"Panasonic"},{"2021-Q1":1,"2021-Q2":0.9,"2021-Q3":1.2,"2021-Q4":1.1,"2022-Q1":1.5,"2022-Q2":1.7,"2022-Q3":1.7,"_row":"Philips"},{"2021-Q1":0.3,"2021-Q2":0.3,"2021-Q3":0.5,"2021-Q4":0.5,"2022-Q1":0.4,"2022-Q2":0.4,"2022-Q3":0.5,"_row":"Saba"},{"2021-Q1":1.2,"2021-Q2":1.1,"2021-Q3":1.3,"2021-Q4":1.3,"2022-Q1":1.6,"2022-Q2":1.5,"2022-Q3":1.5,"_row":"Samsung"},{"2021-Q1":2.7,"2021-Q2":2.6,"2021-Q3":2.8,"2021-Q4":2.8,"2022-Q1":3.4,"2022-Q2":3.5,"2022-Q3":3.1,"_row":"Sony"},{"2021-Q1":0.6,"2021-Q2":0.7,"2021-Q3":0.7,"2021-Q4":0.8,"2022-Q1":0.5,"2022-Q2":0.9,"2022-Q3":0.8,"_row":"TCL"},{"2021-Q1":0.3,"2021-Q2":0.4,"2021-Q3":0.3,"2021-Q4":0.6,"2022-Q1":0.5,"2022-Q2":0.6,"2022-Q3":0.5,"_row":"Telefunken"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":0.5,"2022-Q2":0.5,"2022-Q3":0.6,"_row":"Toshiba"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.5,"2021-Q4":0.5,"2022-Q1":0.4,"2022-Q2":0.6,"2022-Q3":0.5,"_row":"United"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.4,"2021-Q4":0.4,"2022-Q1":0.4,"2022-Q2":0.3,"2022-Q3":0.5,"_row":"Nordmende"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.6,"2021-Q4":0.4,"2022-Q1":0.4,"2022-Q2":0.5,"2022-Q3":0.6,"_row":"TELE System"}],"y":[{"2021-Q1":4.8,"2021-Q2":5.2,"2021-Q3":2.8,"2021-Q4":2.9,"2022-Q1":2.6,"2022-Q2":2,"2022-Q3":1.6,"_row":"Akai"},{"2021-Q1":5,"2021-Q2":4.4,"2021-Q3":6.7,"2021-Q4":5,"2022-Q1":2.9,"2022-Q2":3.8,"2022-Q3":5.4,"_row":"Hisense"},{"2021-Q1":14.1,"2021-Q2":13.6,"2021-Q3":16.8,"2021-Q4":16.4,"2022-Q1":13.1,"2022-Q2":13.5,"2022-Q3":13.1,"_row":"LG"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":6.7,"2022-Q2":7.1,"2022-Q3":6.8,"_row":"Xiaomi / Mi"},{"2021-Q1":2.5,"2021-Q2":2.5,"2021-Q3":2,"2021-Q4":2.3,"2022-Q1":3.6,"2022-Q2":3.6,"2022-Q3":3.4,"_row":"Panasonic"},{"2021-Q1":5.7,"2021-Q2":5.7,"2021-Q3":5,"2021-Q4":3.8,"2022-Q1":4,"2022-Q2":4.1,"2022-Q3":4,"_row":"Philips"},{"2021-Q1":3.6,"2021-Q2":3.7,"2021-Q3":2.3,"2021-Q4":2.4,"2022-Q1":2.7,"2022-Q2":2.5,"2022-Q3":2.2,"_row":"Saba"},{"2021-Q1":51.1,"2021-Q2":51.3,"2021-Q3":48,"2021-Q4":45.3,"2022-Q1":41.2,"2022-Q2":41,"2022-Q3":42.5,"_row":"Samsung"},{"2021-Q1":6.1,"2021-Q2":6.2,"2021-Q3":3.5,"2021-Q4":5.5,"2022-Q1":6,"2022-Q2":6.1,"2022-Q3":5.2,"_row":"Sony"},{"2021-Q1":1,"2021-Q2":1,"2021-Q3":0.8,"2021-Q4":1.2,"2022-Q1":1,"2022-Q2":1.1,"2022-Q3":1.4,"_row":"TCL"},{"2021-Q1":6.1,"2021-Q2":6.4,"2021-Q3":4,"2021-Q4":6.1,"2022-Q1":4.2,"2022-Q2":4.6,"2022-Q3":2.7,"_row":"Telefunken"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":5.1,"2022-Q2":3.8,"2022-Q3":4.1,"_row":"Toshiba"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":4.7,"2021-Q4":5,"2022-Q1":4.1,"2022-Q2":5.1,"2022-Q3":5.4,"_row":"United"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":2.5,"2021-Q4":3,"2022-Q1":2.2,"2022-Q2":1.1,"2022-Q3":1.6,"_row":"Nordmende"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.9,"2021-Q4":1,"2022-Q1":0.6,"2022-Q2":0.6,"2022-Q3":0.8,"_row":"TELE System"}],"z":[{"2021-Q1":0.1,"2021-Q2":0.2,"2021-Q3":0.1,"2021-Q4":0.2,"2022-Q1":0.1,"2022-Q2":0.1,"2022-Q3":0.1,"_row":"Akai"},{"2021-Q1":0.3,"2021-Q2":0.3,"2021-Q3":0.5,"2021-Q4":0.3,"2022-Q1":0.3,"2022-Q2":0.3,"2022-Q3":0.5,"_row":"Hisense"},{"2021-Q1":1.4,"2021-Q2":1.3,"2021-Q3":2.4,"2021-Q4":2.5,"2022-Q1":2.6,"2022-Q2":2.3,"2022-Q3":2.2,"_row":"LG"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":0.5,"2022-Q2":0.4,"2022-Q3":0.6,"_row":"Xiaomi / Mi"},{"2021-Q1":0.5,"2021-Q2":0.4,"2021-Q3":0.5,"2021-Q4":0.5,"2022-Q1":0.7,"2022-Q2":0.6,"2022-Q3":0.6,"_row":"Panasonic"},{"2021-Q1":0.5,"2021-Q2":0.5,"2021-Q3":0.6,"2021-Q4":0.5,"2022-Q1":0.7,"2022-Q2":0.8,"2022-Q3":0.8,"_row":"Philips"},{"2021-Q1":0.1,"2021-Q2":0.1,"2021-Q3":0.1,"2021-Q4":0.1,"2022-Q1":0.1,"2022-Q2":0.1,"2022-Q3":0.1,"_row":"Saba"},{"2021-Q1":5.4,"2021-Q2":5.4,"2021-Q3":6.9,"2021-Q4":6.3,"2022-Q1":7,"2022-Q2":7,"2022-Q3":7.4,"_row":"Samsung"},{"2021-Q1":1.5,"2021-Q2":1.5,"2021-Q3":1.1,"2021-Q4":1.7,"2022-Q1":2.2,"2022-Q2":2.4,"2022-Q3":1.8,"_row":"Sony"},{"2021-Q1":0.1,"2021-Q2":0.1,"2021-Q3":0.1,"2021-Q4":0.1,"2022-Q1":0.1,"2022-Q2":0.1,"2022-Q3":0.1,"_row":"TCL"},{"2021-Q1":0.2,"2021-Q2":0.3,"2021-Q3":0.1,"2021-Q4":0.4,"2022-Q1":0.2,"2022-Q2":0.3,"2022-Q3":0.1,"_row":"Telefunken"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":"NA","2021-Q4":"NA","2022-Q1":0.3,"2022-Q2":0.2,"2022-Q3":0.3,"_row":"Toshiba"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.3,"2021-Q4":0.2,"2022-Q1":0.2,"2022-Q2":0.3,"2022-Q3":0.3,"_row":"United"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.1,"2021-Q4":0.1,"2022-Q1":0.1,"2022-Q2":0,"2022-Q3":0.1,"_row":"Nordmende"},{"2021-Q1":"NA","2021-Q2":"NA","2021-Q3":0.1,"2021-Q4":0,"2022-Q1":0,"2022-Q2":0,"2022-Q3":0.1,"_row":"TELE System"}]},"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":["2022-Q2"],"periods":["2021-Q1","2021-Q2","2021-Q3","2021-Q4","2022-Q1","2022-Q2","2022-Q3"],"time_frame":["Quarter"]})*/32:T556,periodNumericToReadable = function(value, time_frame){ //let months = {1:"Jan", 2:"Feb", 3: "Mar", 4:"Apr", 5:"May", 6:"Jun", 7: "Jul", 8:"Aug", 9:"Sep", 10:"Oct", 11:"Nov", 12:"Dec"} let months = {1:"01", 2:"02", 3: "03", 4:"04", 5:"05", 6:"06", 7: "07", 8:"08", 9:"09", 10:"10", 11:"11", 12:"12"} let quarters = {1:"Q1", 2:"Q2", 3:"Q3", 4:"Q4"} let halfs = {1:"H1", 2:"H2"} let years = {1:""} let periods_object_index = { "Month": months, "Quarter": quarters, "Half": halfs, "Year": years } let periods_object = periods_object_index[time_frame] let periods_array = Object.keys(periods_object_index[time_frame]) let periods_length = periods_array.length let yearPeriod = Object.fromEntries( periods_array.map(function(e){ return [((1/periods_length)*e).toFixed(2), periods_object[e]] }) ) let yearPeriodSorted = Object.keys(yearPeriod) let fraction = value - Math.floor(value) fraction = Number(fraction.toFixed(2)) yearPeriodSorted.sort((a, b) => { return Math.abs(fraction - a) - Math.abs(fraction - b); }) let closestFraction = yearPeriodSorted[0] return `${Math.floor(value).toFixed(0)}${time_frame == "Year"?"":"-"}${yearPeriod[closestFraction]}` }33:Tbc4,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false, ticks = [] } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "⏸Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); set(viewof playing, true); //need //viewof playing = Inputs.toggle({label: "playing / paused", value: false}) } function stop() { form.b.textContent = "⏵Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; set(viewof playing, false); //need //viewof playing = Inputs.toggle({label: "playing / paused", value: false}) } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:T641,reshape_data = zData.map(function(e,i){ return { "item": brands[i], "category": brands[i], "x": xData[i].map(function(d,t){ let formatted_date = periodToNumeric(data["periods"][t], time_frame) return [formatted_date, d] }), "xPeriodTrace": xData[i].map(function(d,t){ return { axis: "x", item: brands[i], category: brands[i], period: data["periods"][t], data: d } }), "y": yData[i].map(function(d,t){ let formatted_date = periodToNumeric(data["periods"][t], time_frame) return [formatted_date, d] }), "yPeriodTrace": yData[i].map(function(d,t){ return { axis: "y", item: brands[i], category: brands[i], period: data["periods"][t], data: d } }), "z": e.map(function(d,t){ let formatted_date = periodToNumeric(data["periods"][t], time_frame) return [formatted_date, d] }), "zPeriodTrace": zData[i].map(function(d,t){ return { axis: "z", item: brands[i], category: brands[i], period: data["periods"][t], data: d } }) } })35:[] 2d:{"title":"LIVE: Dynamic bubble chart","cells":[{"id":0,"value":"md`# LIVE: Dynamic bubble chart\nThis is my editing and re-purposing of Mike Bostock's recreation of a [Gapminder visualization](http://gapminder.org/world/) made famous by [Hans Rosling](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen). The original showed per-capita income, life expectancy and population of 180 nations over 200+ periods, colored by region.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"md`\n## Future development ideas\n

Think about only allowing 1 brand to be selected, displaying some metrics underneath for that brand in a time-series, try and adapt this code: https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91
Another similar piece of code: chart like https://codepen.io/sonofjack/pen/BQGpLV.

\n`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3718,"value":"viewof playing = Inputs.toggle({label: \"playing / paused\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4353,"value":"viewof periodSlider = Scrubber(sliderRange, {\n format: period => periods.length == 1? periods[0 ]: periodNumericToReadable(sliderScaleInverted(period), time_frame),\n loop: false,\n autoplay: false,\n initial: sliderRange.indexOf(sliderScale(periodToNumeric(initial_period, time_frame))),\n ticks: sliderTicksIndexes\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3377,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":3462,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"md`### Testing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4376,"value":"periodToNumeric(initial_period, time_frame)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4389,"value":"sliderScale(periodToNumeric(initial_period, time_frame))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4391,"value":"sliderScaleInverted(1348167)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4397,"value":"periods.indexOf(initial_period)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"periodNumericToReadable(period, time_frame)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3752,"value":"md`### Data mock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1789,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3756,"value":"md `### Dynamic data (changing with time)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"currentData = dataAt(periodNumeric) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"### Configs / derived from configs","pinned":false,"hidden":false,"mode":"md"},{"id":1798,"value":"brands = data[\"data\"][\"z\"].map(o => o._row)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1802,"value":"brands_selected = Array.isArray(data[\"brands_selected\"])? data[\"brands_selected\"]: []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"periods = data[\"periods\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"periodNumerics_array = data[\"periods\"].map(function(e){ \n return periodToNumeric(e, time_frame)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"time_frame = data[\"time_frame\"][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4282,"value":"initial_period = Array.isArray(data.initial_period) && (periods.indexOf(data.initial_period[0]) > -1)? data.initial_period[0]: periods[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3816,"value":"height = data[\"height\"][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3820,"value":"label_font_size = data[\"label_font_size\"][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"bg_color = data[\"bg_color\"][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"axis_label_decimals = normaliseCofigsObject(data[\"axis_label_decimals\"]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3239,"value":"axisLabels = normaliseCofigsObject(data[\"axis_labels\"]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"maxX = data.axis_params.max[0] == \"fixed\"? getAxisParam(reshape_data, \"max\", \"x\"): data.axis_params.max[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"maxY = data.axis_params.max[0] == \"fixed\"? getAxisParam(reshape_data, \"max\", \"y\")*1.15: data.axis_params.max[0]*1.15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"maxZ = data.axis_params.max[0] == \"fixed\"? getAxisParam(reshape_data, \"max\", \"z\"): data.axis_params.max[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"minX = data.axis_params.min[0] == \"fixed\"? getAxisParam(reshape_data, \"min\", \"x\"):data.axis_params.min[0] == \"zero\"? 0: data.axis_params.min[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"minY = data.axis_params.min[0] == \"fixed\"? getAxisParam(reshape_data, \"min\", \"y\"):data.axis_params.min[0] == \"zero\"? 0: data.axis_params.min[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1960,"value":"minZ = data.axis_params.min[0] == \"fixed\"? getAxisParam(reshape_data, \"min\", \"z\"):data.axis_params.min[0] == \"zero\"? 0: data.axis_params.min[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1963,"value":"avgX = data.axis_params.avg[0] == \"fixed\"? getAxisParam(reshape_data, \"mean\", \"x\"): data.axis_params.avg[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"avgY = data.axis_params.avg[0] == \"fixed\"? getAxisParam(reshape_data, \"mean\", \"y\"): data.axis_params.avg[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"avgZ = data.axis_params.avg[0] == \"fixed\"? getAxisParam(reshape_data, \"mean\", \"z\"): data.axis_params.avg[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"minAxisOptions = [\"zero\",\"fixed\",\"dynamic\"].indexOf(data.axis_params.min[0]) > -1 ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2048,"value":"maxAxisOptions = [\"fixed\",\"dynamic\"].indexOf(data.axis_params.max[0]) > -1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2050,"value":"avgAxisOptions = [\"fixed\",\"dynamic\"].indexOf(data.axis_params.avg[0]) > -1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1972,"value":"exclude_series = [data.axis_params.max[0], data.axis_params.min[0], data.axis_params.avg[0]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"dotSize = data.dot_size[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"axisToggle = data.axis_labels.toggle[0].toLowerCase()","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({top: 20, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"### Data transformation functions","pinned":false,"hidden":false,"mode":"md"},{"id":1864,"value":"convertAxisData = (axisData) => axisData.map(o => {\n const toValues = Object.values(o)\n return toValues.filter((x,i) => i < toValues.length-1).map(d => Number(d))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"normaliseCofigsObject = (object) => Object.fromEntries( Object.entries(object).map(o => [ o[0], o[1][0] ]) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"getPeriodTracedDataMap = (reshape_data) => {\n //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat: could use flat() but its not supported by IE at all\n let flattened = reshape_data.map((o) => [o[\"xPeriodTrace\"], o[\"yPeriodTrace\"], o[\"zPeriodTrace\"]] ) \n .reduce((acc, val) => acc.concat(val), [])\n .reduce((acc, val) => acc.concat(val), [])\n .reduce((acc, val) => acc.concat(val), [])\n //from: https://observablehq.com/@d3/d3-group \n //D3 nested map athletesByNationSport = d3.group(athletes, d => d.nation, d => d.sport)\n //Using it athletesByNationSport.get(\"United States\").get(\"Boxing\")\n //e.g. getPeriodTracedDataMap(reshape_data).get(\"x\",\"Bosch\",\"Bosch\",\"2021 Q1\")\n \n return d3.group(\n flattened,\n d => d.axis,\n d => d.item,\n d => d.category,\n d => d.period\n ) \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"getAxisValueByItem = (data) => {\n return d3.group(\n data,\n d => d.item,\n d => d.category\n ) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4453,"value":"### Slider scale, range ","pinned":false,"hidden":false,"mode":"md"},{"id":4327,"value":"sliderRangeIncrement = 0.0015","pinned":false,"hidden":false,"mode":"ojs"},{"id":4412,"value":"sliderDomain = periods.length == 1? [periodNumerics_array[0]] : d3.range(d3.min(periodNumerics_array), d3.max(periodNumerics_array), sliderRangeIncrement)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4409,"value":"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))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4852,"value":"sliderTicksIndexes = periodNumerics_array.map(v => sliderRange.indexOf(sliderScale(v)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4434,"value":"closestIndex = (num, arr) => {\n let curr = arr[0], diff = Math.abs(num - curr);\n let index = 0;\n for (let val = 0; val < arr.length; val++) {\n let newdiff = Math.abs(num - arr[val]);\n if (newdiff < diff) {\n diff = newdiff;\n curr = arr[val];\n index = val;\n };\n };\n return index;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":4374,"value":"sliderScale = (domainInput) => {\n const index = closestIndex( domainInput, sliderDomain) \n return sliderRange[index]\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4429,"value":"sliderScaleInverted = (rangeInput) => {\n const index = closestIndex( rangeInput, sliderRange )\n return sliderDomain[index]\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"periodNumeric = sliderScaleInverted(periodSlider)/*viewof periodNumeric = Scrubber(periods.length == 1? [periodNumerics_array[0]]: d3.range(d3.min(periodNumerics_array), d3.max(periodNumerics_array), 0.0015), {\n format: period => periodNumericToReadable(period, time_frame),\n loop: false,\n autoplay: false//,\n //initial: periods.indexOf(initial_period)\n //initial: 2022 //d3.min(periodNumerics_array) //periodToNumeric(initial_period, time_frame) \n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":2072,"value":"### Period transformations","pinned":false,"hidden":false,"mode":"md"},{"id":1632,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"periodToNumeric = (period, timeFrame) => {\n let split_date_index = {\n \"Month\": period.split(\"-\"),\n \"Quarter\": period.toLowerCase().split(\"-q\"),\n \"Half\": period.toLowerCase().split(\"-h\"),\n \"Year\": [period] \n }\n let periods_in_year = {\n \"Month\": 12,\n \"Quarter\": 4,\n \"Half\": 2,\n \"Year\": 1 \n }\n let split_date = split_date_index[timeFrame];\n let formatted_date = split_date.length > 1? Number(split_date[0]) + (Number(split_date[1])/periods_in_year[timeFrame]): Number(split_date[0]);\n return formatted_date \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"valueAt = (values, periodNumeric) => {\n\n const i = bisectperiodNumeric(values, periodNumeric, 0, values.length - 1);\n const a = values[i];\n if (i > 0) {\n const b = values[i - 1];\n const c = [false, false]\n //a[0], b[0] are the periodNumeric values, so a[1], b[1] would be the data points\n //if previous value null and current value not, display current\n //if next value null and current value not, display current\n const t = (periodNumeric - a[0]) / (b[0] - a[0]);\n if (i < (values.length - 1)){\n const c = values[i + 1]\n } \n return ((a[1] != null) && ((b[1] == null) || (c[1] == null)))? a[1]: a[1] * (1 - t) + b[1] * t;\n }\n return a[1];\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"dataAt = function(periodNumeric) {\n return reshape_data.map(d => ({\n item: d.item,\n category: d.category,\n y: valueAt(d.y, periodNumeric),\n z: valueAt(d.z, periodNumeric),\n x: valueAt(d.x, periodNumeric)\n }));\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"bisectperiodNumeric = d3.bisector(([periodNumeric]) => periodNumeric).left","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"period = periodNumeric","pinned":false,"hidden":false,"mode":"ojs"},{"id":2021,"value":"### Data validation functions","pinned":false,"hidden":false,"mode":"md"},{"id":2026,"value":"dataPointValidation = (d, period, ifInvalid, ifValid) => { \n const test = [\n periodTracedDataMap\n .get(\"x\")\n .get(d.item)\n .get(d.item)\n .get(period)\n [0].data,\n periodTracedDataMap\n .get(\"y\")\n .get(d.item)\n .get(d.item)\n .get(period)\n [0].data,\n periodTracedDataMap\n .get(\"z\")\n .get(d.item)\n .get(d.item)\n .get(period)\n [0].data\n ].some((x) => x === null) ||\n (exclude_series.indexOf(d.item) > -1)\n //console.log(test)\n return test? ifInvalid: ifValid\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"### UI & helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2033,"value":"to_css_class = (input) => {\n return input.replaceAll(\" \",\"_\").replaceAll(\"&\",\"_\").replaceAll(\":\",\"_\")\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"colorBubble = (itemName, selectedItems, colors) => {\n let colorKey = \"non_selected\"\n if(selectedItems.indexOf(itemName) > -1){\n colorKey = \"selected\"\n }\n return colors[colorKey]\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"unescapeHtml = (unsafe) => {\n return unsafe\n .replace(\"&\", \"&\")\n .replace(\"<\", \"<\")\n .replace(\">\", \">\")\n .replace(\""\",/\"/g)\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"checkNull = (val) => { return val != null; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1935,"value":"getAxisParam = (data, minMaxMean, axis) => {\n return d3[minMaxMean]( data.map((a) => { \n return d3[minMaxMean]( a[axis].filter((b) => { \n return typeof b != \"undefined\"; \n }).map((b) => {\n return b[1]\n }) ) \n }) )\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2153,"value":"### Visualisation functions","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"x = d3.scaleLinear([\n minAxisOptions? minX == \"dynamic\"? d3.min(currentData.map(function(e){ return e.x})): minX: getAxisValueByItem(currentData)\n .get(minX)\n .get(minX)\n [0][\"x\"],\n maxAxisOptions? maxX == \"dynamic\"? d3.max(currentData.map(function(e){ return e.x})): maxX: getAxisValueByItem(currentData)\n .get(maxX)\n .get(maxX)\n [0][\"x\"]\n ], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"y = d3.scaleLinear([\n minAxisOptions? minY == \"dynamic\"? d3.min(currentData.map(function(e){ return e.y})): minY: getAxisValueByItem(currentData)\n .get(minY)\n .get(minY)\n [0][\"y\"],\n maxAxisOptions? maxY == \"dynamic\"? d3.max(currentData.map(function(e){ return e.y})): maxY:getAxisValueByItem(currentData)\n .get(maxY)\n .get(maxY)\n [0][\"y\"]\n ], [height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3434,"value":"xAvgValue = avgAxisOptions? avgX == \"dynamic\"? d3.mean(currentData.map(function(e){ return e.x})): d3.mean(xData.flat()): getAxisValueByItem(currentData)\n .get(avgX)\n .get(avgX)\n [0][\"x\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3441,"value":"yAvgValue = avgAxisOptions? avgY == \"dynamic\"? d3.mean(currentData.map(function(e){ return e.y})): d3.mean(yData.flat()): getAxisValueByItem(currentData)\n .get(avgY)\n .get(avgY)\n [0][\"y\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"radius = d3.scaleSqrt()\n .domain([\n minAxisOptions? minZ == \"dynamic\"? d3.min(currentData.map(function(e){ return e.z})): minZ: getAxisValueByItem(currentData)\n .get(minZ)\n .get(minZ)\n [0][\"z\"],\n maxAxisOptions? maxZ == \"dynamic\"? d3.max(currentData.map(function(e){ return e.z})): maxZ: getAxisValueByItem(currentData)\n .get(maxZ)\n .get(maxZ)\n [0][\"z\"]\n ])\n .range([dotSize == \"variable\"? 2: dotSize, dotSize == \"variable\"? 36: dotSize])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2738,"value":"xAxisLabel = g => g\n .attr(\"transform\", `translate(${-margin.right},${height - margin.bottom})`)\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", colors.axis_labels)\n .attr(\"text-anchor\", \"end\")\n .text(axisLabels.x)\n .classed(\"axis-label\", true) \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2741,"value":"yAxisLabel = g => g\n .attr(\"transform\", `translate(${margin.left},${margin.top - margin.bottom})`)\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 30)\n .attr(\"fill\", colors.axis_labels)\n .attr(\"text-anchor\", \"start\")\n .text(axisLabels.y) \n .classed(\"axis-label\", true) \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2744,"value":"zAxisLabel = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(g => g.append(\"text\")\n .attr(\"x\", margin.left)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", colors.axis_labels)\n .attr(\"text-anchor\", \"start\")\n .text(`${axisLabels.z}`)\n .classed(\"axis-label\", true) \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .selectAll(\".tick text, .tick line\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .selectAll(\".tick text, .tick line\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1991,"value":"colors = normaliseCofigsObject(data.colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"update = chart.update(currentData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2079,"value":"### Transformed data & maps","pinned":false,"hidden":false,"mode":"md"},{"id":1816,"value":"zData = convertAxisData(data[\"data\"][\"z\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"xData = convertAxisData(data[\"data\"][\"x\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"yData = convertAxisData(data[\"data\"][\"y\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"periodTracedDataMap = getPeriodTracedDataMap(reshape_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3721,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}