31:T434b,//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()) //Displayr //function chart(){ chart = { const links = switching_graph.links.map(d => Object.create(d)) const nodes = switching_graph.nodes.map(d => Object.create(d)) const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links) .id(d => d.id) .distance(d => overview ? d["combined frequency"] : d.frequency) .strength(d => overview ? d["combined frequency"] : d.frequency)) .force("charge", d3.forceManyBody().strength(-9000)) .force("x", d3.forceX()) .force("y", d3.forceY()) //.force("collide", d3.forceCollide().radius(d => 1.2*d.frequency).iterations(10)) .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); } }) }) //.alphaMin(0) const svg = d3.create("svg") .attr("viewBox", [-canvas_param.width / 4, -canvas_param.height / 2 - li.h, canvas_param.width, canvas_param.height]) .style("font-size", `${font_size}${font_measure}`) .classed(standardise_label(threat_opportunities), true) .classed(standardise_label(overview), true) .classed("main", true) .classed("sortableTable", sortableTable) /***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 => color(d.source.id)/*color(d.type)*/) .attr("stroke-width", d => normalise.indexOf("links") > -1 ? linkThicknessScale(modulus(d.frequency)) /*+ altLinkThicknessScale(modulus(d["alt frequency"]))*/ : d.frequency /*+ d["alt frequency"]*/ ) .attr("class", (d) => `links both ${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("font-weight", "bold") .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) { return `node ${standardise_label(d.id)}` }) .attr("id", d => `node_${d.index}`) .call(drag(this)) .on("click", connectedNodes) node.append("circle") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("fill", d => color(d.id)) .attr("r", function(d) { return normalise.indexOf("nodes") > -1 ? radiusScale(d.frequency) : d.frequency }) .attr("id", d => `circle_node_${d.index}`) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) node.append("text") .attr("x", 8) .attr("y", "0.31em") .text(d => `${d.id}:${Number(d.frequency).toFixed(0)}%`) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) drawTitle(false) drawLegend( svg, li, false, nodes, threat_opportunities, false, false //overview ? "current" : false ) //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 drawTitle(selectedNode) { d3.selectAll(".visualisation-title, .visualisation-title-text, .reset").remove() //the title svg.append("g") .attr("class", "visualisation-title") //.attr("transform", `translate(${selectedNode? -canvas_param.width/20: -canvas_param.width/12},${-canvas_param.height/2 + 4})`) .attr("transform", `translate(${-canvas_param.width/20},${-canvas_param.height/2 + 4})`) .append("text").classed("visualisation-title-text", true) .attr("dy", "0") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", "bold") .text(selectedNode ? `${threat_opportunities} to ${selectedNode.id}:` : overview ? "Mutual threats and opportunities:" : `Mutual ${threat_opportunities.toLowerCase()}:`) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) //info icon and text const xPlacement = -0.25*canvas_param.width const yPlacement = canvas_param.height/3//0.5*(nodes.length-1) * (li.h * 1.5 + li.s) svg.append("g") .attr("class", "info") .attr("transform", `translate(${xPlacement},${yPlacement})`) .append("svg") .attr("viewBox", "0 0 24 24") .attr("width", "24") .attr("height", "24") .attr("fill", "none") .attr("xmlns", "http://www.w3.org/2000/svg") .append("circle") .attr("r", 8) .attr("cx", 12) .attr("cy", 12) .attr("stroke", "grey") .attr("stroke-width", "2px") .attr("fill", "#fff") svg.append("g") .attr("class", "info") .attr("transform", `translate(${xPlacement},${yPlacement})`) .append("svg") .attr("viewBox", "0 0 24 24") .attr("width", "24") .attr("height", "24") .attr("fill", "none") .attr("xmlns", "http://www.w3.org/2000/svg") .append("path") .attr("d", "M13 11V17H11V11H13Z") .attr("fill", "grey") svg.append("g") .attr("class", "info") .attr("transform", `translate(${xPlacement},${yPlacement})`) .append("svg") .attr("viewBox", "0 0 24 24") .attr("width", "24") .attr("height", "24") .attr("fill", "none") .attr("xmlns", "http://www.w3.org/2000/svg") .append("path") .attr("d", "M13 9V7H11V9H13Z") .attr("fill", "grey") svg.append("g") .attr("class", "visualisation-title") .attr("transform", `translate(${xPlacement + 24},${yPlacement + 18})`) .append("text").classed("visualisation-title-text", true) .attr("dy", "0") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-style", "italic") .text(selectedNode ? `Click on ${selectedNode.id} to reset, or another brand node` : overview ? "Hover on a brand node to highlight its rank" : `Click on a brand node to explore`) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) svg.append("g") .attr("class", "visualisation-title") .attr("transform", `translate(${xPlacement},${yPlacement + 40})`) .append("text").classed("visualisation-title-text", true) .attr("dy", "0") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-style", "italic") .text(`⠀↻ Clockwise links show flow of BCS between brands, coloured by source`) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) if (selectedNode) { const reset = d3.selectAll(".reset") .on("click", resetNodes) } } // end drawTitle function resetNodes(nodes, hoveredNode) { console.log( nodes, hoveredNode ) let allNodesUI = d3.selectAll(".node") node.style("visibility", "visible") link.style("visibility", "visible") edgelabels.style("visibility", "hidden") drawLegend(svg, li, false, nodes, threat_opportunities, hoveredNode, false ) allNodesUI.classed("selected", false) d3.selectAll(".node").each(function(selected) { d3.select(`#node_${selected.index} circle`) .attr("r", normalise.indexOf("nodes") > -1 ? radiusScale(nodes.filter(n => n.index == selected.index)[0].frequency) : nodes.filter(n => n.index == selected.index)[0].frequency) d3.selectAll(`#node_${selected.index} text`) .text(`${nodes.filter(n => n.index == selected.index)[0].id}:${(nodes.filter(n => n.index == selected.index)[0].frequency).toFixed(0)}%`) }) //end .each d3.selectAll("svg.main") .classed("focused", false) drawTitle(false) } function connectedNodes() { let d = d3.select(this).node().__data__; // ...or only as a child of the current DOM element //console.log(this, d) let nodeUI = d3.select(this) let selectedNode = switching_graph.nodes[d.index] let allNodesUI = d3.selectAll(".node") if (!overview) { if (!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") }) allNodesUI.classed("selected", false) nodeUI.classed("selected", true) //all unselected nodes UI d3.selectAll(".node").each(function(selected) { d3.select(`#node_${selected.index} circle`) .transition() .duration(1500) .ease(d3.easeElastic) .attr("r", normalise.indexOf("nodes") > -1 ? radiusScale( nodes.filter(n => n.index == selected.index)[0].frequency + Number(get_switching_graph_link( links_matrix_mapped, (threat_opportunities == "Threats" ? selectedNode.id : nodes.filter(n => n.index == selected.index)[0].id), (threat_opportunities == "Threats" ? nodes.filter(n => n.index == selected.index)[0].id : selectedNode.id))["absolute_frequency"])) : nodes.filter(n => n.index == selected.index)[0].frequency + Number(get_switching_graph_link( links_matrix_mapped, (threat_opportunities == "Threats" ? selectedNode.id : nodes.filter(n => n.index == selected.index)[0].id), (threat_opportunities == "Threats" ? nodes.filter(n => n.index == selected.index)[0].id : selectedNode.id))["absolute_frequency"])) d3.selectAll(`#node_${selected.index} text`) .text(`${nodes.filter(n => n.index == selected.index)[0].id}:${( nodes.filter(n => n.index == selected.index)[0].frequency + Number(get_switching_graph_link( links_matrix_mapped, (threat_opportunities == "Threats"? selectedNode.id : nodes.filter(n => n.index == selected.index)[0].id), (threat_opportunities == "Threats"? nodes.filter(n => n.index == selected.index)[0].id : selectedNode.id))["absolute_frequency"]) ).toFixed(0)}%`) }) //end .each //seleced node UI nodeUI .select("circle") .transition() .duration(1500) .ease(d3.easeElastic) .attr("r", normalise.indexOf("nodes") > -1 ? radiusScale(d.frequency + Number(get_switching_graph_link(links_matrix_mapped, selectedNode.id, selectedNode.id)["absolute_frequency"])) : d.frequency + Number(get_switching_graph_link(links_matrix_mapped, selectedNode.id, selectedNode.id, absolute_measure, relative_measure, alt_absolute_measure, alt_relative_measure, threat_opportunities)["absolute_frequency"]) ) nodeUI .selectAll("text") .text(`${selectedNode.id}:${(d.frequency + Number(get_switching_graph_link(links_matrix_mapped, selectedNode.id, selectedNode.id)["absolute_frequency"])).toFixed(0)}%`) d3.selectAll("svg.main") .classed("focused", true) drawTitle(selectedNode) drawLegend(svg, li, selectedNode.id, nodes, threat_opportunities, false, false ) } //end if (!nodeUI.classed("selected")) else { resetNodes(nodes, selectedNode.id) } } //end if !overview } // end connectedNodes() return svg.node() }32:T4d9,//need object with nodes and links vars switching_graph = ( {links: links_matrix_mapped.map(function(el){ return { "source": el[source_node], "target": el[target_node], "type": el["Focus_Brand_Name"], "impacted": el["Impacted_Brand_Name"], "frequency": modulus(el[absolute_measure]), "absolute_frequency": el[absolute_measure], "relative_frequency": el[relative_measure], "alt absolute_frequency": el[alt_absolute_measure], "alt relative_frequency": el[alt_relative_measure], "focus": threat_opportunities, "alt frequency": get_switching_graph_link(links_matrix_mapped, el[target_node], el[source_node])["alt absolute_frequency"], "combined frequency": modulus(el[absolute_measure]) + modulus(get_switching_graph_link(links_matrix_mapped, el[target_node], el[source_node])["alt absolute_frequency"]) } }), nodes: (node_list_mapped .sort(function(a,b){ return b["Brand Choice Score"] - a["Brand Choice Score"]; }).map(function(el,ind){ return { "id": el["Brand Name"], "frequency": modulus(el["Brand Choice Score"]), "index": ind } })) } )33:T3192,function drawLegend(svg, li, selectedNode, nodes, threat_opportunities, hoveredNode, sortBy) { // customised to push calculations into legend function sortByClickHandler(d, i) { if (sortableTable) { let parent = d3.select(this.parentNode); let sortByOptions = ["current", "threats", "opportunities"]; let sortBy = ""; sortByOptions.forEach(function(d) { sortBy = parent.classed(d) ? d : sortBy; }) drawLegend(svg, li, selectedNode, threat_opportunities, sortBy) } } function selectedFilter(threat_opportunities, category, sortBy) { let output = "" if (sortBy) { output = sortBy == standardise_label(category) ? "selected" : ""; } else { output = standardise_label(threat_opportunities) == standardise_label(category) ? "selected" : ""; } return output; } //brands_tranches = Object.keys(brands_tranches); function abs_opp(threat_opportunities) { return threat_opportunities == "Opportunities" ? "absolute_frequency" : "alt absolute_frequency"; } function abs_threat(threat_opportunities) { return threat_opportunities == "Threats" ? "absolute_frequency" : "alt absolute_frequency"; } function labelOffeset(label) { return String(label).length * 6 } function getBarDims(d) { let bcs = Number(node_list_mapped_map.get(d.impacted)[0]["Brand Choice Score"]); let delta = Number(d[abs_threat(threat_opportunities)]); let pbcs = Number(bcs + delta); return [bcs, delta, pbcs] } function getBarDimsOpp(d) { let bcs = Number(node_list_mapped_map.get(d.impacted)[0]["Brand Choice Score"]); let delta = Number(d[abs_opp(threat_opportunities)]); let pbcs = Number(bcs + delta); return [bcs, delta, pbcs] } let filtered_links, filtered_linksSortOptions, g, caret, caretText, rank, rankText; d3.selectAll(".legend, .legend-title, .legend-names, .legend-title-text, .legend-focused, .legend-sortby, .caret, .caret-text, .rank, .rank-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"] }); filtered_linksSortOptions = { bcs_pbcs: filtered_links.sort(function(a,b){ let bcsA, deltaA, pbcsA threat_opportunities == "Threats" ? [bcsA, deltaA, pbcsA] = getBarDims(a) : [bcsA, deltaA, pbcsA] = getBarDimsOpp(a) let bcsB, deltaB, pbcsB threat_opportunities == "Threats" ? [bcsB, deltaB, pbcsB] = getBarDims(b) : [bcsB, deltaB, pbcsB] = getBarDimsOpp(b) return selectedNode? pbcsB - pbcsA : bcsB - bcsA }), current: switching_graph.links.filter(e => e.source == e.target).sort(function(a, b) { return switching_graph.nodes.filter(n => n.id == b["type"])[0].frequency - switching_graph.nodes.filter(n => n.id == a["type"])[0].frequency; }), threats: switching_graph.links.filter(e => e.source == e.target).sort(function(a, b) { return modulus(b[abs_threat(threat_opportunities)]) - modulus(a[abs_threat(threat_opportunities)]) }), opportunities: switching_graph.links.filter(e => e.source == e.target).sort(function(a, b) { return modulus(b[abs_opp(threat_opportunities)]) - modulus(a[abs_opp(threat_opportunities)]) }) } //text above bar chart legend svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${canvas_param.width/2.8},${-canvas_param.height/2 + 4})`) .append("text").classed("legend-title-text", true) .attr("dy", "0") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", "bold") .text(selectedNode ? `Brand Choice Score % after ${threat_opportunities.toLowerCase()} realised:` : `Brand Choice Score % (${overview? "-/+ pp. threat/opportunity" : threat_opportunities == "Threats"? "-pp. threat": "+pp. opportunity"}):`); // create legend "pills" g = svg.selectAll(".legend") //.data(sortBy ? filtered_linksSortOptions[sortBy] : filtered_links) .data(sortBy ? filtered_linksSortOptions[sortBy] : filtered_linksSortOptions.bcs_pbcs) .enter() .append("g") .attr("class", function(d) { return `legend ${standardise_label(d.impacted)}` }) .attr("transform", function(d, i) { let pill_height = ((li.h + li.s) + (i) * (li.h * 1.5 + li.s)); return `translate(${(canvas_param.width/2.8)},${(-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", function(d) { let [bcs, delta, pbcs] = getBarDims(d) return li.w * barScale(bcs) }) .attr("height", li.h * 1.5) .style("fill", "#e9e9e9"); //ranks svg.append("g") .attr("class", "legend-title") .attr("transform", `translate(${canvas_param.width/2.8 - (li.labels + 5.5*li.x)},${-canvas_param.height/2 + 4})`) .append("text").classed("legend-title-text", true) .attr("dy", "0") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", "bold") .text("Rank"); rank = g.append("g") .attr("class", "rank") .attr("id", function(d) { return `rank_node_${getNodeIndex(nodes, d.impacted)}` }) .append("svg") .attr("x", -1*(li.labels + 5.5*li.x)) .attr("y", li.h * -0.5) .attr("dy", "0.35em") .attr("viewBox", "0 0 24 24") .attr("width", "24") .attr("height", "24") .attr("fill", "none") .attr("xmlns", "http://www.w3.org/2000/svg") .append("circle") .attr("stroke", "grey") .attr("stroke-width", 0.5) .attr("cx", 12) .attr("cy", 12) .attr("r", 11) .attr("fill", function(d){ return [selectedNode,hoveredNode].indexOf(d.impacted) > -1? "grey": "none" }) rankText = g.append("text") .attr("class", "rank-text") .attr("id", function(d) { return `ranktext_node_${getNodeIndex(nodes, d.impacted)}` }) .attr("x", function(d,i) { let offset = (i+1) offset = 3*(offset.toString().length - 1) return -1*(li.labels + 4*li.x) - offset }) .attr("y", li.h * 0.75) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", function(d){ return [selectedNode,hoveredNode].indexOf(d.impacted) > -1? "#fff": "#000000" }) .attr("font-weight", 300) .text(function(d,i) { return `${i+1}` }); //carets caret = g.append("g") .attr("class", "caret current legend-sortby") .append("svg") .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDims(d) return (li.w * barScale(bcs)) - (li.labels + li.x) + 1 }) .attr("y", -li.s + 2) .attr("dy", "0.35em") .attr("viewBox", "0 0 24 24") .attr("width", "24") .attr("height", "24") .attr("fill", "none") .attr("xmlns", "http://www.w3.org/2000/svg") .append("path") .attr("d", "M10.5 15l7.5 7.5 7.5-7.5z") .attr("fill", "black") //carets text caretText = g.append("text") .classed("caret-text", true) .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDims(d) return (li.w * barScale(bcs)) - (li.labels + li.x) }) .attr("y", -li.s + li.h) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(function(d) { let bcs = Number(node_list_mapped_map.get(d.impacted)[0]["Brand Choice Score"]); return `${d.impacted} ${bcs.toFixed(0)}%` }); //threats red / green delta g.append("rect").classed("legend-pills-1 threat", true) .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDims(d) return d[abs_threat(threat_opportunities)] < 0 ? li.w * barScale(pbcs) : li.w * barScale(bcs) }) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return d[abs_threat(threat_opportunities)] > 0 ? li.w * barScale(d[abs_threat(threat_opportunities)]) : (li.w * -1 * barScale(d[abs_threat(threat_opportunities)])) }) .attr("height", li.h * 1.5) .style("fill", function(d) { return d[abs_threat(threat_opportunities)] < 0 ? delta_colors["negative"] : delta_colors["positive"] }); g.append("text").classed("legend-text threat", true) .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDims(d) return d[abs_threat(threat_opportunities)] < 0 ? li.w * barScale(pbcs) - labelOffeset(delta) : li.w * barScale(pbcs) + 1 }) .attr("y", li.h * 0.75) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(function(d) { let [bcs, delta, pbcs] = getBarDims(d) return `${delta > 0?"+":""}${delta.toFixed(1)}` }); //opportunities red / green delta g.append("rect").classed("legend-pills-1 opportunity", true) .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDimsOpp(d) return d[abs_threat(threat_opportunities)] < 0 ? li.w * barScale(bcs) : li.w * barScale(pbcs) }) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return d[abs_opp(threat_opportunities)] > 0 ? li.w * barScale(d[abs_opp(threat_opportunities)]) : (li.w * -1 * barScale(d[abs_opp(threat_opportunities)])); }) .attr("height", li.h * 1.5) .style("fill", function(d) { return d[abs_opp(threat_opportunities)] < 0 ? delta_colors["negative"] : delta_colors["positive"] }); g.append("text").classed("legend-text opportunity", true) .attr("x", function(d) { let [bcs, delta, pbcs] = getBarDimsOpp(d) return d[abs_threat(threat_opportunities)] < 0 ? li.w * barScale(pbcs) + 1 : li.w * barScale(pbcs) - labelOffeset(delta) }) .attr("y", li.h * 0.75) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-weight", 300) .text(function(d) { let [bcs, delta, pbcs] = getBarDimsOpp(d) return `${delta > 0?"+":""}${delta.toFixed(1)}` }); //transitions if (selectedNode) { d3.selectAll(".caret svg") .data(sortBy ? filtered_linksSortOptions[sortBy] : filtered_links) .join(".caret svg") .transition() .delay(200) .duration(1000) .ease(d3.easeLinear) .attr("x", function(d) { let bcs, delta, pbcs threat_opportunities == "Threats" ? [bcs, delta, pbcs] = getBarDims(d) : [bcs, delta, pbcs] = getBarDimsOpp(d) //console.log(d,pbcs) return (li.w * barScale(pbcs)) - (li.labels + li.x) + 1 }) d3.selectAll("text.caret-text") .data(sortBy ? filtered_linksSortOptions[sortBy] : filtered_links) .join("text.caret-text") .transition() .delay(200) .duration(1000) .ease(d3.easeLinear) .attr("x", function(d) { let bcs, delta, pbcs threat_opportunities == "Threats" ? [bcs, delta, pbcs] = getBarDims(d) : [bcs, delta, pbcs] = getBarDimsOpp(d) return (li.w * barScale(pbcs)) - (li.labels + li.x) }) .transition() .delay(0) .duration(100) .ease(d3.easeLinear) .text(function(d) { let bcs, delta, pbcs threat_opportunities == "Threats" ? [bcs, delta, pbcs] = getBarDims(d) : [bcs, delta, pbcs] = getBarDimsOpp(d) return `${d.impacted} ${pbcs.toFixed(0)}%` }) } }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:Td5a,styles = html``36:[] 2f:{"title":"Brands Threats and Opportunities from changing market conditions v4","cells":[{"id":0,"value":"md`# Brands Threats and Opportunities from changing market conditions v4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"viewof threat_opportunities_input = Select([\"Threats and Opportunities overview\", \"Threats focus\",\"Opportunities focus\"], {label: \"Visualise flow of\", 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":2886,"value":"md `-1: Vars to be updated on button click in Displayr`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2278,"value":"threat_opportunities = threat_opportunities_input == \"Threats focus\"? \"Threats\": \"Opportunities\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2283,"value":"overview = threat_opportunities_input == \"Threats and Opportunities overview\"? \"Overview\": \"\"","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":1359,"value":"alt_absolute_measure = threat_opportunities == \"Threats\"? \"Brand Opportunity Abs\" : \"Brand Threat Abs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"alt_relative_measure = threat_opportunities == \"Threats\"? \"Brand Opportunity Rel\" : \"Brand Threat Rel\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"alt_threat_opportunities = threat_opportunities == \"Threats\"? \"Opportunities\": \"Threats\"","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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"md `0: Declare anywhere: Used functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"function mapData(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":683,"value":"//This function looks up whether a pair are neighbours\nfunction neighboring(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\nfunction getNodeIndex(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":1532,"value":"function get_switching_graph_link(links_matrix_mapped, source_name, target_name){\n return links_matrix_mapped.filter(function(e){\n return (e[source_node] == source_name) && (e[target_node] == target_name) \n }).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 \"alt absolute_frequency\": el[alt_absolute_measure], \n \"alt relative_frequency\": el[alt_relative_measure],\n \"focus\": threat_opportunities\n }\n })[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"function 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":2701,"value":"// Create Event Handlers for mouse\nfunction handleMouseOver(d,i) { // Add interactivity\n let nodeIndex = this.id.split(\"_\")[2]\n d3.select(this)\n .attr(\"stroke\", \"grey\")\n d3.select(`#rank_node_${nodeIndex} circle`)\n .attr(\"fill\", \"grey\")\n d3.select(`text#ranktext_node_${nodeIndex}`)\n .attr(\"fill\", \"#fff\")\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"function handleMouseOut(d,i) {\n d3.select(this)\n .attr(\"stroke\", \"#fff\")\n\n d3.selectAll(`.rank circle`)\n .attr(\"fill\", \"none\")\n \n d3.selectAll(`text.rank-text `)\n .attr(\"fill\", \"black\")\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"function distance([x1, y1], [x2, y2]) { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"function linkArc(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":904,"value":"function standardise_label(label){ return String(label).replace(\" \", \"_\").toLowerCase() };\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"function modulus(input){\n return Number(input) < 0? -1*Number(input): Number(input)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2019,"value":"md `1: Params fed in via Displayr function call, declared as const in js `","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"$34","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":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":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\": \"#3DAD42\", \"negative\": \"#BC1C0E\"})","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":2034,"value":"bg_color = \"#ffffff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"sortableTable = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1919,"value":"md `2: Displayr in-script generated params, declared as const in js`","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":1293,"value":"node_list_mapped_map = d3.group(node_list_mapped, d => d[\"Brand Name\"])","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":1966,"value":"md `3: Used constants, and non-function objects, declared as const in js`","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: 1100,\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: 600,\n h: 10,\n s: 25,\n x:6,\n names: 140,\n labels:14,\n pie: 25\n }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"bc_radius = 225;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2001,"value":"md `4: Methods, declared as const above calls to functions which use them`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"radiusScale = d3.scaleSqrt()\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([0, 49])","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"barScale = d3.scaleLinear()\n .domain(\n [\n 0, \n 100 //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 modulus(e.frequency) })) \n ]\n )\n .range([0, 16])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"altLinkThicknessScale = d3.scaleLinear()\n .domain(\n [\n 0, \n d3.max(switching_graph.links.map(function(e){ return modulus(e[\"alt frequency\"]) })) \n ]\n )\n .range([0, 16])","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":2016,"value":"md `Last: Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"$35","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":"$W36","stdlib":"1","titling":"auto"}