31:T2ccd,//this needs to be the same as what is pasted into Displayr let chart = function() ... with the exception of in Displayr UNCOMMENT //d3.select("body").append(() => svg.node()) chart = { const links = switching_graph.links.map(d => Object.create(d)); const nodes = switching_graph.nodes.map(d => Object.create(d)); var brands_tranches_local = JSON.parse(JSON.stringify(brands_tranches)); let toggle = 0; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links) .id(d => d.id) .distance(d => d.frequency) .strength(d => d.frequency)) .force("charge", d3.forceManyBody().strength(-9000)) .force("x", d3.forceX()) .force("y", d3.forceY()) .force("bounding-circle", () => { //radial bounding circle nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if (distance([node.x, node.y], [x(0.5), y(0.5)]) > bc_radius) { const theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))); node.x = x(0.5) + bc_radius * Math.cos(theta) * (node.x < x(0.5) ? -1 : 1); node.y = y(0.5) + bc_radius * Math.sin(theta) * (node.x < x(0.5) ? -1 : 1); } }) }); const svg = d3.create("svg") .attr("viewBox", [-canvas_param.width / 2, -canvas_param.height / 2, canvas_param.width, canvas_param.height]) .style("font-size", `${font_size}${font_measure}`); /***IMPORTANT: uncomment below for Displayr***/ //d3.select("body").append(() => svg.node()) const link = svg.append("g") .attr("fill", "none") .selectAll("path") .data(links) .join("path") .attr("stroke", d => threat_opportunities == "Threats"? color(d.type) : color(d.impacted)/*color(d.type)*/) .attr("stroke-width", d => normalise.indexOf("links") > -1? linkThicknessScale(d.frequency) : d.frequency ) .attr("class", (d) => `links ${standardise_label(d.source.id)} ${standardise_label(d.target.id)}` ) .attr("marker-end","url(#arrowhead)") //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. const edgepaths = svg.selectAll(".edgepath") .data(links) .enter() .append("path") .attr("class", (d) => `edgepath ${standardise_label(d.source.id)} ${standardise_label(d.target.id)}` ) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .attr("id", function (d, i) {return "edgepath" + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(links) .enter() .append("text") .style("visibility", "hidden") .style("pointer-events", "none") .attr("class", (d) => `edgelabel ${standardise_label(d.source.id)} ${standardise_label(d.target.id)}` ) .attr("id", function (d, i) {return "edgelabel" + i}) .attr("font-size", function (d, i) { return d.frequency > 0? font_size: 0 }) .attr("fill", "#000000") .attr("dy", font_size*1/3); edgelabels.append("textPath") .attr("xlink:href", function (d, i) {return "#edgepath" + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("class", "arrows") .attr("startOffset", "50%") .text(">>"); simulation.on("tick", () => { link.attr("d", linkArc) edgepaths.attr("d", linkArc) edgelabels.attr("d", linkArc) node.attr("transform", d => `translate(${d.x},${d.y})`) }); const node = svg.append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .attr("class", function(d){ let activeBrands = standardise_label( getSelectedBrands(Object.keys(brands_tranches)) ) ; let status = activeBrands.indexOf(standardise_label(d.id)) == -1? "unselected":"" return `node ${standardise_label(d.id)} ${status}` }) //.call(drag(simulation)) .on("click", connectedNodes); node.append("circle") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("fill", d => color(d.id)) .attr("r", d => normalise.indexOf("nodes") > -1? radiusScale(d.frequency): d.frequency); node.append("text") .attr("x", 8) .attr("y", "0.31em") .text(d => d.id) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); drawInputs( svg, brands_tranches ) drawLegend( svg, li, false, threat_opportunities, Object.keys(brands_tranches).filter( (property) => brands_tranches_local[property].checked()) ); //Create an array logging what is connected to what let linkedByIndex = {}; switching_graph.nodes.forEach(function(d, i) { linkedByIndex[i + "," + i] = 1; }); switching_graph.links.forEach(function(d) { linkedByIndex[getNodeIndex(switching_graph.nodes, d.source) + "," + getNodeIndex(switching_graph.nodes, d.target)] = 1; }); function connectedNodes() { let d = d3.select(this).node().__data__; // ...or only as a child of the current DOM element //console.log(this, d, node, link, graph.nodes, graph.links, linkedByIndex); let nodeUI = d3.select(this); let allNodesUI = d3.selectAll(".node"); if(!nodeUI.classed("unselected")) { //node opacity toggle on click: if ((toggle == 0) || !nodeUI.classed("selected")) { //UI let sourceNodes = []; //hide all but the neighbouring nodes //hide edgelabels of nodes, links where target is not the clicked node.style("visibility", function(o) { neighboring(linkedByIndex, d, o) ? sourceNodes.push(o) : ""; return neighboring(linkedByIndex, d, o) ? "visible" : "hidden"; }) link.style("visibility", function(o) { return threat_opportunities == "Threats"? (d.index == o.source.index ? "visible" : "hidden"): (d.index == o.target.index ? "visible" : "hidden"); }) edgelabels.style("visibility", function(o) { return threat_opportunities == "Threats"? (d.index == o.source.index ? "visible" : "hidden"): (d.index == o.target.index ? "visible" : "hidden"); }) drawLegend( svg, li, switching_graph.nodes[d.index].id, threat_opportunities, Object.keys(brands_tranches).filter( (property) => brands_tranches_local[property].checked()) ); //dev nodeUI.classed("selected", true) toggle = 1; } //end if toggle == 0 else {//UI node.style("visibility", "visible") link.style("visibility", "visible") edgelabels.style("visibility", "hidden") drawLegend( svg, li, false, threat_opportunities, Object.keys(brands_tranches).filter( (property) => brands_tranches_local[property].checked()) ); allNodesUI.classed("selected", false) toggle = 0; } } //end if(!nodeUI.classed("unselected")) } // end connectedNodes() function drawInputs(svg, brands_tranches) { let inputs = Object.keys(brands_tranches) let pill_height = 30; let xRight = 200; let xRightLabel = 170; let gIntro = svg.selectAll(".intro") .data(["Filter by:"]) .enter() .append("g") .attr("class", "intro") .attr("transform", function(d, index) { let pill_height = 30; return `translate(${canvas_param.width/2 - xRight},${(-canvas_param.height/2) + pill_height + (index)*pill_height})`; }); gIntro.append("text").classed("legend-text", true) .attr("x", 0) .attr("y", 15) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "black") .attr("font-weight", 300) .text(function(d) { return d; }); let g = svg.selectAll(".tranche") .data(inputs) .enter() .append("g") .attr("class", "tranche") .attr("transform", function(d, index) { let pill_height = 30; return `translate(${canvas_param.width/2 - xRightLabel},${(-canvas_param.height/2) + (pill_height*0.8) + (index + 1)*pill_height})`; }); g.append("text").classed("legend-text", true) .attr("x", 0) .attr("y", 15) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "black") .attr("font-weight", 300) .text(function(d) { return d; }); inputs.forEach(function(property, index) { brands_tranches_local[property] = new d3CheckBox(); }); //Just for demonstration let update = function () { d3.selectAll(".node.selected").dispatch("click"); //need to update the chart let allBrands = switching_graph.nodes.map((node) => standardise_label(node.id) ); let selectedBrands = getSelectedBrands( inputs.filter( (property) => brands_tranches_local[property].checked() ) ).map( (brand) => standardise_label(brand) ); let unselectedBrands = allBrands.filter( (brand) => selectedBrands.indexOf(brand) == -1 ).map( (brand) => standardise_label(brand) ); if(allBrands.length > 0){ d3.selectAll(`.${allBrands.join(", .")}`).classed("unselected", false) } if(unselectedBrands.length > 0){ d3.selectAll(`.${unselectedBrands.join(", .")}`).classed("unselected", true) } }; inputs.forEach(function(property, index) { //Setting up each check box brands_tranches_local[property].x((canvas_param.width/2) - xRight).y((-canvas_param.height/2) + pill_height + (index + 1)*pill_height).rx(5).ry(5).markStrokeWidth(1).boxStrokeWidth(2).color("#808080").checked(true).clickEvent(update); svg.call(brands_tranches_local[property]); }); //starting state is all selected tranche brands return getSelectedBrands( inputs.filter( (property) => brands_tranches_local[property].checked() ) ).map( (brand) => standardise_label(brand) ); } return svg.node(); } 32:T12f9,drawLegend = function(svg, li, selectedNode, threat_opportunities, brands_tranches) { // customised to push calculations into legend //brands_tranches = Object.keys(brands_tranches); let subtitle, filtered_links, g; d3.selectAll(".legend, .legend-title, .legend-title-text").remove(); filtered_links = selectedNode? switching_graph.links.filter(e => e.type == selectedNode).sort(function(a,b){ return b["frequency"] - a["frequency"] }) : switching_graph.links.filter(e => e.source == e.target).sort(function(a,b){ return b["frequency"] - a["frequency"] }); //text above bar chart legend svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${-canvas_param.width/2},${(-canvas_param.height/2) + (li.h + li.s)})`) .append("text").classed("legend-title-text", true) .attr("dy", "0em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(`${selectedNode?selectedNode:""} Brand Choice Score pp. (relative)`); svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${-canvas_param.width/2},${(-canvas_param.height/2) + (li.h + li.s)})`) .append("text").classed("legend-title-text", true) .attr("dy", "1.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(`${threat_opportunities == "Threats"? "decrease": "increase"} from change in market conditions`) // create legend "pills" g = svg.selectAll(".legend") .data(filtered_links) .enter() .append("g") .attr("class", function(d) { let brands = getSelectedBrands(brands_tranches); let status = brands.indexOf(d.impacted) > -1? "selected": "unselected"; return `legend ${standardise_label(d.impacted)} ${status}` }) .attr("transform", function(d, i) { let pill_height = (2*(li.h + li.s)) + ((i)*(li.h + li.s)); return `translate(${-canvas_param.width/2},${(-canvas_param.height/2) + pill_height})`; }); g.append("rect").classed("legend-pills-outer", true) .attr("x", 0) .attr("rx", 0) .attr("ry", 0) .attr("width", li.w) .attr("height", li.h) .style("fill", "#c8c8c8"); g.append("rect").classed("legend-pills-1", true) .attr("x", function(d) { return d["absolute_frequency"] < 0? li.w + (li.w*barScale(d["absolute_frequency"])): 0; }) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return d["absolute_frequency"] > 0? li.w * barScale(d["absolute_frequency"]): (li.w*-1*barScale(d["absolute_frequency"])); }) .attr("height", li.h) .style("fill", function(d) { return d["absolute_frequency"] < 0? delta_colors["negative"]: delta_colors["positive"] }); g.append("text").classed("legend-text", true) .attr("x", li.x) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#fff") .attr("font-weight", 300) .text(function(d) { return `${d.impacted}: ${d["absolute_frequency"]} (${d["relative_frequency"]}%)`; }); //text below legend svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${-canvas_param.width/2},${(-canvas_param.height/2) + (2*(li.h + li.s)) + ((filtered_links.length)*(li.h + li.s))})`) .append("text").classed("legend-title-text", true) .attr("dy", "0.7em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(selectedNode? "Click on a brand to explore": "Click on a brand to explore"); svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${-canvas_param.width/2},${(-canvas_param.height/2) + (2*(li.h + li.s)) + ((filtered_links.length)*(li.h + li.s))})`) .append("text").classed("legend-title-text", true) .attr("dy", "2.05em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(selectedNode? ` ${threat_opportunities.toLowerCase()} / go back to overview ->`: ` ${threat_opportunities.toLowerCase()} ->`); }33:Ta92,d3CheckBox = function() { /* Reusable, pure d3 Checkbox */ var size = 20, x = 0, y = 0, rx = 0, ry = 0, markStrokeWidth = 3, boxStrokeWidth = 3, stroke = "grey", checked = false, clickEvent; function checkBox (selection) { var g = selection.append("g"), box = g.append("rect") .attr("width", size) .attr("height", size) .attr("x", x) .attr("y", y) .attr("rx", rx) .attr("ry", ry) .style("fill-opacity", 0) .style("stroke-width", boxStrokeWidth) .style("stroke", stroke); //Data to represent the check mark var coordinates = [ {x: x + (size / 8), y: y + (size / 3)}, {x: x + (size / 2.2), y: (y + size) - (size / 4)}, {x: (x + size) - (size / 8), y: (y + (size / 10))} ]; var line = d3.line() .x(function(d){ return d.x; }) .y(function(d){ return d.y; }) .curve(d3.curveBasis); //.interpolate("basic"); var mark = g.append("path") .attr("d", line(coordinates)) .style("stroke-width", markStrokeWidth) .style("stroke", stroke) .style("fill", "none") .style("opacity", (checked)? 1 : 0); g.on("click", function () { checked = !checked; mark.style("opacity", (checked)? 1 : 0); if(clickEvent) clickEvent(); //d3.event.stopPropagation(); }); } checkBox.size = function (val) { size = val; return checkBox; } checkBox.x = function (val) { x = val; return checkBox; } checkBox.y = function (val) { y = val; return checkBox; } checkBox.rx = function (val) { rx = val; return checkBox; } checkBox.ry = function (val) { ry = val; return checkBox; } checkBox.markStrokeWidth = function (val) { markStrokeWidth = val; return checkBox; } checkBox.color = function (val) { stroke = val; return checkBox; } checkBox.boxStrokeWidth = function (val) { boxStrokeWidth = val; return checkBox; } checkBox.checked = function (val) { if(val === undefined) { return checked; } else { checked = val; return checkBox; } } checkBox.clickEvent = function (val) { clickEvent = val; return checkBox; } return checkBox; }34:T2153,links_matrix = [["Akai","Akai"," -1.2","-23.5"," 3.9"," 75.0"],["Akai","Telefunken"," 0.4"," 7.8","-1.7","-31.7"],["Akai","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Akai","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Akai","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Akai","Hisense"," 0.2"," 3.2","-0.3"," -5.9"],["Akai","LG"," 0.0"," 0.9","-0.1"," -2.0"],["Akai","Panasonic"," 0.0"," 0.2"," 0.0"," -0.2"],["Akai","Philips"," 0.0"," 0.4"," 0.0"," -0.5"],["Akai","Saba"," 0.3"," 6.5","-1.3","-25.5"],["Akai","Samsung"," 0.2"," 3.6","-0.4"," -7.3"],["Akai","Sony"," 0.0"," 0.1"," 0.0"," -0.3"],["Akai","TCL"," 0.0"," 0.8","-0.1"," -1.6"],["Hisense","Akai"," 0.2"," 4.7","-0.9","-19.5"],["Hisense","Telefunken"," 0.1"," 3.1","-0.7","-14.9"],["Hisense","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Hisense","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Hisense","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Hisense","Hisense"," -1.0","-23.6"," 2.8"," 64.2"],["Hisense","LG"," 0.2"," 4.2","-0.1"," -3.4"],["Hisense","Panasonic"," 0.0"," 0.3"," 0.0"," -0.2"],["Hisense","Philips"," 0.0"," 1.2"," 0.0"," -1.1"],["Hisense","Saba"," 0.1"," 2.2","-0.6","-13.9"],["Hisense","Samsung"," 0.3"," 7.1","-0.4"," -9.5"],["Hisense","Sony"," 0.0"," 0.2"," 0.0"," -0.4"],["Hisense","TCL"," 0.0"," 0.7","-0.1"," -1.3"],["LG","Akai"," 0.0"," 0.4","-0.1"," -0.9"],["LG","Telefunken"," 0.1"," 0.6","-0.2"," -1.2"],["LG","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["LG","United"," 0.0"," 0.0"," 0.0"," 0.0"],["LG","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["LG","Hisense"," 0.2"," 1.1","-0.2"," -1.3"],["LG","LG"," -4.7","-34.5"," 3.3"," 24.2"],["LG","Panasonic"," 0.1"," 0.8"," 0.0"," -0.2"],["LG","Philips"," 0.6"," 4.1","-0.2"," -1.3"],["LG","Saba"," 0.0"," 0.4","-0.2"," -1.1"],["LG","Samsung"," 3.5"," 25.6","-2.4","-17.6"],["LG","Sony"," 0.2"," 1.4","-0.1"," -0.4"],["LG","TCL"," 0.0"," 0.2"," 0.0"," -0.2"],["Nordmende","Akai"," 0.0",null," 0.0",null],["Nordmende","Telefunken"," 0.0",null," 0.0",null],["Nordmende","TELE System"," 0.0",null," 0.0",null],["Nordmende","United"," 0.0",null," 0.0",null],["Nordmende","Nordmende"," 0.0",null," 0.0",null],["Nordmende","Hisense"," 0.0",null," 0.0",null],["Nordmende","LG"," 0.0",null," 0.0",null],["Nordmende","Panasonic"," 0.0",null," 0.0",null],["Nordmende","Philips"," 0.0",null," 0.0",null],["Nordmende","Saba"," 0.0",null," 0.0",null],["Nordmende","Samsung"," 0.0",null," 0.0",null],["Nordmende","Sony"," 0.0",null," 0.0",null],["Nordmende","TCL"," 0.0",null," 0.0",null],["Panasonic","Akai"," 0.0"," 0.3"," 0.0"," -0.7"],["Panasonic","Telefunken"," 0.0"," 0.6"," 0.0"," -0.7"],["Panasonic","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Panasonic","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Panasonic","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Panasonic","Hisense"," 0.0"," 0.5"," 0.0"," -0.5"],["Panasonic","LG"," 0.1"," 3.7"," 0.0"," -1.0"],["Panasonic","Panasonic"," -0.6","-22.3"," 0.2"," 8.8"],["Panasonic","Philips"," 0.1"," 3.8"," 0.0"," -1.1"],["Panasonic","Saba"," 0.0"," 0.2"," 0.0"," -0.3"],["Panasonic","Samsung"," 0.2"," 6.5","-0.1"," -2.9"],["Panasonic","Sony"," 0.2"," 6.4"," 0.0"," -1.4"],["Panasonic","TCL"," 0.0"," 0.2"," 0.0"," -0.2"],["Philips","Akai"," 0.0"," 0.4"," 0.0"," -0.7"],["Philips","Telefunken"," 0.0"," 0.7","-0.1"," -1.3"],["Philips","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Philips","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Philips","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Philips","Hisense"," 0.0"," 0.8"," 0.0"," -0.9"],["Philips","LG"," 0.5"," 8.3","-0.2"," -3.4"],["Philips","Panasonic"," 0.1"," 2.5"," 0.0"," -0.4"],["Philips","Philips"," -2.3","-41.0"," 1.3"," 22.5"],["Philips","Saba"," 0.0"," 0.3"," 0.0"," -0.7"],["Philips","Samsung"," 1.4"," 24.1","-0.8","-14.1"],["Philips","Sony"," 0.2"," 3.7"," 0.0"," -0.8"],["Philips","TCL"," 0.0"," 0.2"," 0.0"," -0.2"],["Saba","Akai"," 0.3"," 7.6","-2.0","-52.2"],["Saba","Telefunken"," 0.3"," 8.3","-1.7","-46.3"],["Saba","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Saba","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Saba","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Saba","Hisense"," 0.1"," 2.0","-0.3"," -7.5"],["Saba","LG"," 0.1"," 1.5","-0.1"," -2.8"],["Saba","Panasonic"," 0.0"," 0.2"," 0.0"," -0.1"],["Saba","Philips"," 0.0"," 0.5"," 0.0"," -0.7"],["Saba","Saba"," -0.9","-25.0"," 4.7","126.6"],["Saba","Samsung"," 0.1"," 4.1","-0.6","-15.1"],["Saba","Sony"," 0.0"," 0.1"," 0.0"," -0.2"],["Saba","TCL"," 0.0"," 0.7","-0.1"," -1.7"],["Samsung","Akai"," 0.2"," 0.4","-0.4"," -0.8"],["Samsung","Telefunken"," 0.5"," 1.1","-0.8"," -1.5"],["Samsung","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Samsung","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Samsung","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Samsung","Hisense"," 0.4"," 0.7","-0.4"," -0.8"],["Samsung","LG"," 7.2"," 14.0","-1.4"," -2.7"],["Samsung","Panasonic"," 0.2"," 0.4"," 0.0"," -0.1"],["Samsung","Philips"," 2.7"," 5.3","-0.5"," -1.0"],["Samsung","Saba"," 0.2"," 0.4","-0.6"," -1.2"],["Samsung","Samsung","-11.9","-23.2"," 4.4"," 8.5"],["Samsung","Sony"," 0.4"," 0.7","-0.1"," -0.2"],["Samsung","TCL"," 0.1"," 0.1","-0.1"," -0.2"],["Sony","Akai"," 0.0"," 0.1"," 0.0"," -0.2"],["Sony","Telefunken"," 0.0"," 0.2"," 0.0"," -0.2"],["Sony","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Sony","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Sony","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Sony","Hisense"," 0.0"," 0.1"," 0.0"," -0.2"],["Sony","LG"," 0.2"," 2.8","-0.1"," -0.9"],["Sony","Panasonic"," 0.2"," 2.6"," 0.0"," -0.5"],["Sony","Philips"," 0.2"," 2.7"," 0.0"," -0.7"],["Sony","Saba"," 0.0"," 0.1"," 0.0"," -0.1"],["Sony","Samsung"," 0.3"," 4.6","-0.1"," -2.1"],["Sony","Sony"," -0.8","-13.2"," 0.3"," 5.1"],["Sony","TCL"," 0.0"," 0.1"," 0.0"," -0.1"],["TCL","Akai"," 0.0"," 3.3","-0.4","-42.4"],["TCL","Telefunken"," 0.0"," 3.7","-0.4","-39.6"],["TCL","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["TCL","United"," 0.0"," 0.0"," 0.0"," 0.0"],["TCL","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["TCL","Hisense"," 0.0"," 2.8","-0.1"," -7.2"],["TCL","LG"," 0.0"," 2.1"," 0.0"," -3.5"],["TCL","Panasonic"," 0.0"," 0.5"," 0.0"," -0.5"],["TCL","Philips"," 0.0"," 1.1"," 0.0"," -0.9"],["TCL","Saba"," 0.0"," 2.2","-0.3","-30.6"],["TCL","Samsung"," 0.0"," 4.9","-0.1","-13.4"],["TCL","Sony"," 0.0"," 0.5"," 0.0"," -0.6"],["TCL","TCL"," -0.2","-21.1"," 1.4","138.8"],["TELE System","Akai"," 0.0",null," 0.0",null],["TELE System","Telefunken"," 0.0",null," 0.0",null],["TELE System","TELE System"," 0.0",null," 0.0",null],["TELE System","United"," 0.0",null," 0.0",null],["TELE System","Nordmende"," 0.0",null," 0.0",null],["TELE System","Hisense"," 0.0",null," 0.0",null],["TELE System","LG"," 0.0",null," 0.0",null],["TELE System","Panasonic"," 0.0",null," 0.0",null],["TELE System","Philips"," 0.0",null," 0.0",null],["TELE System","Saba"," 0.0",null," 0.0",null],["TELE System","Samsung"," 0.0",null," 0.0",null],["TELE System","Sony"," 0.0",null," 0.0",null],["TELE System","TCL"," 0.0",null," 0.0",null],["Telefunken","Akai"," 0.5"," 7.2","-1.9","-30.3"],["Telefunken","Telefunken"," -1.7","-26.3"," 4.5"," 70.4"],["Telefunken","TELE System"," 0.0"," 0.0"," 0.0"," 0.0"],["Telefunken","United"," 0.0"," 0.0"," 0.0"," 0.0"],["Telefunken","Nordmende"," 0.0"," 0.0"," 0.0"," 0.0"],["Telefunken","Hisense"," 0.1"," 2.1","-0.3"," -4.1"],["Telefunken","LG"," 0.1"," 1.5","-0.1"," -1.7"],["Telefunken","Panasonic"," 0.0"," 0.2"," 0.0"," -0.2"],["Telefunken","Philips"," 0.1"," 0.9"," 0.0"," -0.7"],["Telefunken","Saba"," 0.4"," 5.9","-1.4","-22.2"],["Telefunken","Samsung"," 0.5"," 7.5","-0.6"," -9.8"],["Telefunken","Sony"," 0.0"," 0.2"," 0.0"," -0.2"],["Telefunken","TCL"," 0.0"," 0.7","-0.1"," -1.2"],["United","Akai"," 0.0",null," 0.0",null],["United","Telefunken"," 0.0",null," 0.0",null],["United","TELE System"," 0.0",null," 0.0",null],["United","United"," 0.0",null," 0.0",null],["United","Nordmende"," 0.0",null," 0.0",null],["United","Hisense"," 0.0",null," 0.0",null],["United","LG"," 0.0",null," 0.0",null],["United","Panasonic"," 0.0",null," 0.0",null],["United","Philips"," 0.0",null," 0.0",null],["United","Saba"," 0.0",null," 0.0",null],["United","Samsung"," 0.0",null," 0.0",null],["United","Sony"," 0.0",null," 0.0",null],["United","TCL"," 0.0",null," 0.0",null]]35:[] 2f:{"title":"Brands Threats and Opportunities from changing market conditions simulator","cells":[{"id":0,"value":"md`# Brands Threats and Opportunities from changing market conditions simulator\n\n

⬤●Circle size represents Brand Choice Score.

↻ Clockwise links represent threats to the source brand from increasing price, the thicker the link the bigger Brand Choice Score lost to other brands.

↻ Clockwise links represent opportunities to the target brand from decreasing price, the thicker the link the bigger Brand Choice Score gained from other brands.

Closeness of brands is proportional to mutual threat between brands from a price increase / opportunity from price decrease.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"viewof threat_opportunities = Select([\"Threats\",\"Opportunities\"], {label: \"Threats / Opportunities\", value: \"Threats\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof normalise = Inputs.checkbox([\"links\", \"nodes\"], {value: [\"links\", \"nodes\"], label: \"Normalise\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"getSelectedBrands = function(tranches){\n let selectedBrands = [];\n tranches.forEach(function(value){\n selectedBrands = selectedBrands.concat(brands_tranches[value]);\n })\n return selectedBrands\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"chart_param = ({\n width: 0,\n height: 0,\n margin: {\n top: -100,\n right: 10,\n bottom: 10,\n left: 10\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"canvas_param = ({\n width: 1000,\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"li = ({ // Dimensions of legend item: width, height, spacing, radius of rounded rect.\n w: 170,\n h: 20,\n s: 5,\n x:5\n }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"bc_radius = 225;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"font_size = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"font_measure = \"pt\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"//This function looks up whether a pair are neighbours\nneighboring = function(linkedByIndex, a, b) {\n return linkedByIndex[a.index + \",\" + b.index];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"//function to get nodeIndex from id\ngetNodeIndex = function(nodes, id) {\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].id === id) {\n return i;\n }\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.margin.left, chart_param.width - chart_param.margin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.height - chart_param.margin.bottom, chart_param.margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"distance = ([x1, y1], [x2, y2]) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"radiusScale = d3.scaleRadial()\n .domain(\n [\n d3.min(switching_graph.nodes.map(function(e){ return e.frequency })), \n d3.max(switching_graph.nodes.map(function(e){ return e.frequency })) \n ]\n )\n .range([4, 36])","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"barScale = d3.scaleLinear()\n .domain(\n [\n 0, \n d3.max(switching_graph.links.map(function(e){ return e.frequency })) \n ]\n )\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"linkThicknessScale = d3.scaleLinear()\n .domain(\n [\n 0, \n d3.max(switching_graph.links.map(function(e){ return e.frequency })) \n ]\n )\n .range([0, 10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"color = d3.scaleOrdinal(node_list_mapped.map(e => e[\"Brand Name\"]), d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"delta_colors = ({\"positive\": \"#167922\", \"negative\": \"#BC1C0E\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"linkArc = function(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"mapData = function(dataByRow, columnNames){\n return dataByRow.map((d) => {\n const obj = {};\n columnNames.forEach((item, index) => {\n obj[item] = d[index];\n });\n return obj \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"modulus = function(input){\n return Number(input) < 0? -1*Number(input): Number(input)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"standardise_label = function(label){ return String(label).replace(\" \", \"_\").toLowerCase() };","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"node_list = [[\"Akai\",\" 5.2\"],[\"Hisense\",\" 4.4\"],[\"LG\",\"13.6\"],[\"Panasonic\",\" 2.5\"],[\"Philips\",\" 5.7\"],[\"Saba\",\" 3.7\"],[\"Samsung\",\"51.3\"],[\"Sony\",\" 6.2\"],[\"TCL\",\" 1.0\"],[\"Telefunken\",\" 6.4\"],[\"TELE System\",\" 0.0\"],[\"United\",\" 0.0\"],[\"Nordmende\",\" 0.0\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"node_list_columns = [\"Brand Name\",\"Brand Choice Score\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"node_list_mapped = mapData(node_list, node_list_columns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"brands_tranches = ({\"Power brands\":[\"LG\",\"Samsung\"],\"Mainstream brands\":[],\"Premium brands\":[\"Panasonic\",\"Sony\"],\"Small brands\":[\"Akai\",\"Hisense\",\"Philips\",\"Saba\",\"TCL\",\"Telefunken\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"links_matrix_columns = [\"Focus_Brand_Name\",\"Impacted_Brand_Name\",\"Brand Threat Abs\",\"Brand Threat Rel\",\"Brand Opportunity Abs\",\"Brand Opportunity Rel\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"links_matrix_mapped = mapData(links_matrix, links_matrix_columns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"absolute_measure = threat_opportunities == \"Threats\"? \"Brand Threat Abs\" : \"Brand Opportunity Abs\" //threat_opportunities == \"Threats\"? (absolute_relative == \"Relative\"? \"Brand Threat Rel\": \"Brand Threat Abs\") : (absolute_relative == \"Relative\"? \"Brand Opportunity Rel\": \"Brand Opportunity Abs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"relative_measure = threat_opportunities == \"Threats\"? \"Brand Threat Rel\" : \"Brand Opportunity Rel\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"source_node = threat_opportunities == \"Threats\"? \"Focus_Brand_Name\": \"Impacted_Brand_Name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"target_node = threat_opportunities == \"Threats\"? \"Impacted_Brand_Name\": \"Focus_Brand_Name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"//need object with nodes and links vars\nswitching_graph = (\n {links: links_matrix_mapped.map(function(el){ \n return { \n \"source\": el[source_node], \n \"target\": el[target_node], \n \"type\": el[\"Focus_Brand_Name\"],\n \"impacted\": el[\"Impacted_Brand_Name\"],\n \"frequency\": modulus(el[absolute_measure]), \n \"absolute_frequency\": el[absolute_measure], \n \"relative_frequency\": el[relative_measure]\n } \n }),\n nodes: (node_list_mapped\n .sort(function(a,b){\n return b[\"Brand Choice Score\"] - a[\"Brand Choice Score\"];\n }).map(function(el,ind){ \n return {\n \"id\": el[\"Brand Name\"],\n \"frequency\": modulus(el[\"Brand Choice Score\"]),\n \"index\": ind\n }\n })) \n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Search, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}