31:T639,network_graph_chart = html `${network_graph_chart_gen}

Up till end of 2017, group revolved in large part around Misha & Andy's posts to each other up till 2018, with Daniel following up mainly on Andy's posts and getting slow response times. Andy was the main replier to Daniel, encouraging him to participate (Andy also was the main responder to Angus and Mark's posts). This and Daniel's continual increase in yearly volume of posts may have contributed to his much more diverse pool of respondents in 2020 vs other years.

2018 - 2019 - Alan posted more than anyone else, although the time taken for others to reply to him was 3.5 mins above average. Andy keeps on being the main responder to Daniel, Mark and Jim.

2020 - Andy posts more than anyone else, followed closely by Alan. Time taken to reply to Alan's posts now increases to 7.7 mins more than average. Most frequent converstions are Andy and Jim, Jim now posting nearly as much as Andy / Alan.

Alan and Misha take their time to reply to the posts of others, and likewise others take their time to reply to them.

Misha is a social chameleon, being the only person to have a different top responder to his posts for 4 consecutive years 2017-2020.

Andy and Jim really drive the fast conversations between themeselves, taking on average 15 minutes to reply. Whereas Misha and Alan are at the other end of the scale, taking about 40 mins to reply to each other.

Mark and Angus post relatively little, but when they do, they get the fastest reply times from others.

`32:T33af,network_graph_chart_gen = { const links = graph.links.map(d => Object.create(d)); const nodes = graph.nodes.map(d => Object.create(d)); const radius = 10; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(function(d) { return Math.pow(d.interval,1.5/*network_graph_togetherness*/)*Math.pow(percent_all_posts,0.3); }).strength(1)) .force("charge", d3.forceManyBody().strength(-10000)) .force("x", d3.forceX()) .force("y", d3.forceY()); // const svg = d3.select("svg#network_graph") const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "12px sans-serif"); // Dimensions of legend item: width, height, spacing, radius of rounded rect. const li = { w: 100, h: 20, s: 3 }; let temp_title_text = ''; let temp_title = svg .append("g") .attr("class", "legend-title") .attr("transform", `translate(${-width/2},${(-height/2) + (li.h + li.s)})`) .append("text").classed("legend-title-text", true) .attr("x", 0) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000"/*"#c8c8c8"*/) .attr("font-size", "10px") .attr("font-weight", 300) .text(`${temp_title_text}`); const link = svg.append("g") .attr("fill", "none") .selectAll("path") .data(links) .join("path") .attr("stroke", d => color(d.type)) .attr("stroke-width", d => d.thickness*(1/Math.pow(percent_all_posts,0.5)) /*1.5*/ ) .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); const node = svg.append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .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 => d.radius*(1/Math.pow(percent_all_posts,0.5))); 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); const edgepaths = svg.selectAll(".edgepath") .data(links) .enter() .append('path') .attr('class', 'edgepath') .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', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa') .attr("dy", function (d, i) { return -0.5*d.thickness**(1/Math.pow(percent_all_posts,0.5))/*-1 * (((Math.sqrt(d.thickness * 100)) / 2) + 2)*/; }); edgelabels.append('textPath') .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(function (d) { let interval_delta = d.interval - d['interval target avg']; //return `${d.interval.toFixed(0)} mins (${interval_delta.toFixed(0)})` return `${d.interval.toFixed(0)} mins` }); simulation.on("tick", () => { link.attr("d", linkArc) /*.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; })*/; edgepaths.attr("d", linkArc) /*.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; })*/; edgelabels.attr("d", linkArc) /*.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; });*/ node.attr("transform", d => `translate(${d.x},${d.y})`) /*.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width/2 - radius, d.x)); }) .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height/2 - radius, d.y)); })*/; }); invalidation.then(() => simulation.stop()); //node opacity toggle on click: //Create an array logging what is connected to what let toggle = 0; let linkedByIndex = {}; graph.nodes.forEach(function(d, i) { linkedByIndex[i + "," + i] = 1; }); graph.links.forEach(function(d) { linkedByIndex[getNodeIndex(graph.nodes, d.source) + "," + getNodeIndex(graph.nodes, d.target)] = 1; }); //This function looks up whether a pair are neighbours function neighboring(a, b) { return linkedByIndex[a.index + "," + b.index]; } 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); if (toggle == 0) { //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(d, o) ? sourceNodes.push(o) : ''; return neighboring(d, o) ? "visible" : "hidden"; }) link .style("visibility", function(o) { return d.index == o.source.index ? "visible" : "hidden"; }) edgelabels .style("visibility", function(o) { return d.index == o.source.index ? "visible" : "hidden"; }) drawLegend(true, li, graph.nodes[d.index].id); toggle = 1; } //end if toggle == 0 else { //UI node.style("visibility", "visible") link.style("visibility", "visible") edgelabels.style("visibility", "hidden") drawLegend(false, li); toggle = 0; } } // end connectedNodes() function getNodeIndex(nodes, id) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].id === id) { return i; } } } function drawLegend(draw, li, selectedNode) { // customised to push calculations into legend let title, subtitle, filtered_links, g, time_analysis, time_delta; d3.selectAll(".legend, .legend-title, .legend-title-text, .legend-time-analysis").remove(); if(draw === false) { title = svg .append("g") .attr("class", "legend-title") .attr("transform", `translate(${-width/2},${(-height/2) + (li.h + li.s)})`) .append("text").classed("legend-title-text", true) .attr("x", 0) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-size", "10px") .attr("font-weight", 300) .text(`${temp_title_text}`); } if(draw === true) { filtered_links = graph.links.filter(e => e.type == selectedNode).sort(function(a,b){ return b.frequency - a.frequency }); title = svg .append("g") .attr("class", "legend-title") .attr("transform", `translate(${-width/2},${(-height/2) + (li.h + li.s)})`) .append("text").classed("legend-title-text", true) .attr("x", 0) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-size", "10px") .attr("font-weight", 300) .text(`Replies: % of ${selectedNode}'s ${d3.format(",.0f")(nodes_frequency.get(selectedNode))} posts`); // create legend "pills" g = svg.selectAll(".legend") .data(filtered_links) .enter() .append("g") .attr("class", "legend") .attr("transform", function(d, i) { let pill_height = (2*(li.h + li.s)) + ((i)*(li.h + li.s)); return `translate(${-width/2},${(-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", 0) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return li.w * (2*d.frequency / nodes_frequency.get(d.type)); }) .attr("height", li.h) .style("fill", function(d) { return color(d.type); }); g.append("text").classed("legend-text", true) .attr("x", li.w / 2) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-size", "10px") .attr("font-weight", 300) .text(function(d) { return (`${d.target}: ${(100*(d.frequency / nodes_frequency.get(d.type))).toFixed(1)}% (${d.frequency})`); }); subtitle = svg .append("g") .attr("class", "legend-title") .attr("transform", `translate(${-width/2},${(-height/2) + (2*(li.h + li.s)) + ((filtered_links.length)*(li.h + li.s))})`) .append("text").classed("legend-title-text", true) .attr("x", 0) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "left") .attr("fill", "#000000") .attr("font-size", "10px") .attr("font-weight", 300) .text(`Reply time to ${selectedNode} lag: vs avg ${avg_time_diff.toFixed(1)} mins`); time_delta = nodes_replies_time_diff.get(selectedNode) - avg_time_diff; time_analysis = svg .append("g") .attr("class", "legend-time-analysis") .attr("transform", `translate(${-width/2},${(-height/2) + (2*(li.h + li.s)) + ((filtered_links.length + 1)*(li.h + li.s))})`); time_analysis.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"); time_analysis.append("rect").classed("legend-pills-red-bad-lag", true) .attr("x", 0) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return time_delta > 0? li.w * (time_delta / avg_time_diff): 0; }) .attr("height", li.h) .style("fill", 'red'); time_analysis.append("rect").classed("legend-pills-green-good-lag", true) .attr("x", function(d) { return time_delta < 0? li.w - (li.w * (-time_delta / avg_time_diff)): 0; }) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return time_delta < 0? li.w * (-time_delta / avg_time_diff): 0; }) .attr("height", li.h) .style("fill", 'green'); time_analysis.append("text").classed("legend-text", true) .attr("x", li.w / 2) .attr("y", li.h / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-size", "10px") .attr("font-weight", 300) .text(function(d) { return `${time_delta.toFixed(1)} minutes`; }); } //end if draw === true||false } return svg.node(); }33:[] 2f:{"title":"Part 2 - Group Dynamics","cells":[{"id":0,"value":"md`# Part 2 - Group Dynamics\n\n

⬤●Circles: represent the volume of sender posts during the selected time period.

↻ Clockwise links: represent target nodes directly replying to source node, the thicker the link the higher the volume of replies.

Link Lengths: Along each link is written the average reply time by target to source. Average reply times between people are generally proportional to the link lengths, the smaller the reply time, the shorter the link.

\n
\n

To explore how different members are engaging others, click on a node. You can filter time period by brushing the bar chart.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"html `${viewof rangesliderdemo}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html `

Time Period filter: ${network_date_range_selected}, accounts for ${100*percent_all_posts.toFixed(2)}% of all posts

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md `### Appendix: Network Visualisation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"\n//need object with nodes and links vars\ngraph = (\n {links: (\n d3.rollups(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => v.length, d => `${d['previous sender']}-${d['sender']}` ))\n .sort(function(a,b){\n return b[1] - a[1];\n }).map(function(el){ \n return {\n 'source': el[0].split(\"-\")[0],\n 'target': el[0].split(\"-\")[1],\n 'type': el[0].split(\"-\")[0],\n 'frequency': el[1],\n 'interval': links_time_diff.get(el[0]),\n 'interval target avg': nodes_time_diff.get(el[0].split(\"-\")[1]),\n 'thickness': el[1]/30 \n } \n }),\n nodes: (d3.rollups(network_graph_data, v => v.length, d => d['sender'] )\n .sort(function(a,b){\n return b[1] - a[1];\n }).map(function(el,ind){ \n return {\n 'id': el[0],\n 'frequency': el[1],\n 'radius': el[1]/100,\n 'index': ind\n }\n })) \n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"network_graph_data = rangesliderdemo.data","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"percent_all_posts = (network_graph_data.length / main_file.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"nodes_frequency = d3.rollup(network_graph_data, v => v.length, d => d['sender'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"links_frequency = d3.rollup(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => v.length, d => `${d['previous sender']}-${d['sender']}` )","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"avg_time_diff = (\n d3.rollup(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => d3.mean(v, d => d['time diff (minutes)']) ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"nodes_replies_time_diff = (\n d3.rollup(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => d3.mean(v, d => d['time diff (minutes)']), d => d['previous sender'] ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"nodes_time_diff = (\n d3.rollup(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => d3.mean(v, d => d['time diff (minutes)']), d => d['sender'] ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"links_time_diff = (\n d3.rollup(network_graph_data.filter( el => ['first post','max reply time exceed','not reply'].indexOf(el['previous sender']) == -1 ), v => d3.mean(v, d => d['time diff (minutes)']), d => `${d['previous sender']}-${d['sender']}` ))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"color = d3.scaleOrdinal(types, d3.schemeCategory10)","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":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":41,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"with_source = main_file","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof rangesliderdemo = rangeSlider(with_source,\n d=>d['datetime_asdate'],\n value=>d3.count(value.values.map(d=>d['timestamp'])), // We want sum of amount for range\n {\n height:80,\n yTicks:3//,\n //yScale://d3.scalePow().exponent(0.7) // Domain and Range is automatically assigned\n }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"network_date_range_selected = `${rangesliderdemo.range[0].getDate()}/${rangesliderdemo.range[0].getMonth()+1}/${rangesliderdemo.range[0].getFullYear().toString().slice(-2)} to ${rangesliderdemo.range[1].getDate()}/${rangesliderdemo.range[1].getMonth()+1}/${rangesliderdemo.range[1].getFullYear().toString().slice(-2)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof network_graph_togetherness = Range([0.70, 1.8], {value: 1.5, step:0.1, label: \"Node spread\"})","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":11,"value":"import {rangeSlider,persistentSelect} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {d3, main_file, colors, types, post_volume_array} from \"@mtsvelik/book-club-whatsapp-group-what-our-posts-say-about-us-intro\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}