31:T1cba,chart = { const svg = d3.create("svg") .classed("bubble-chart", true) .attr("viewBox", [0, 0, width, height]); const legend_ineraction = function(d){ //console.log(d, this); if (d3.select(`#chart-container`).attr("class") == 'split'){ //clear selected class from all legend items apart from clicked, and toggle the selected class for clicked let this_id = d3.select(this).attr("id"); d3.select(`g.legend:not(#${this_id})`) .classed("selected", false); d3.select(this) .classed("selected", !d3.select(this).classed("selected") ); let this_class_array = d3.select(this).attr("class").split(" "); //selection logic if(this_class_array.indexOf("selected") != -1){ //select state //remove the selected class from all other legend items d3.selectAll(`:not(#${this_id})`) .classed("selected", false); //make all circles opacity:1 d3.selectAll(`circle`) .style("stroke", "black") .style("opacity", 1); //add the selected class to clicked element and style d3.select(`#${this_id}`) .classed("selected", true); //make all circles with class != this_id opacity 0.1 d3.selectAll(`circle:not(.${this_id})`) .style("stroke", "white") .style("opacity", 0.1); //make all circle text labels with class != this_id opacity 0 d3.selectAll(`g.circle-label text:not(.${this_id})`) .style("opacity", 0); d3.selectAll(`g.circle-label text.${this_id}`) .style("opacity", 1); } if(this_class_array.indexOf("selected") == -1){ //clearing state clear_interactions(); } } //end if class == 'split' } //end legend_inreraction() const drawLegend = function(svg) { // customised to push calculations into legend let g, li = { w: 50, h: 14, s: 2 } let responsive_legend_cutoff = 4; d3.selectAll(".legend, .legend-title, .legend-title-text, .legend-time-analysis").remove(); // create legend "pills" g = svg.selectAll(".legend") .data(members_by_post_volume_array) .enter() .append("g") .attr("class", "legend") .attr("id", d => d.toLowerCase()) //the simpler version but not good on small screens //.attr("transform", function(d, i) {return `translate(${width - ((members_by_post_volume_array.length - i)*li.w)},0)`;}) .attr("transform", function(d, i) { return `translate(${width + (width < 800? 100: 0) - ((members_by_post_volume_array.length - (width < 800? (i > responsive_legend_cutoff? i - responsive_legend_cutoff :i ) : i) )*li.w)},${width < 800?(i > responsive_legend_cutoff? 20: 0):0})`; }) .on("click", legend_ineraction); svg.append("text") .classed("helper", true) //simpler but not good on small screens //.attr("x", width - (members_by_post_volume_array.length + (split_categories?2.25: 0.8))*li.w) .attr("x", width + (width < 800? 100: 0) - (members_by_post_volume_array.length + (split_categories?2.25: 0.8))*li.w) .attr("y", li.h*(2/3)) .attr("text-anchor", "right") .attr("fill", "#000000") .style("font-size", "10px") .style("font-family", "Arial") .text(split_categories? (width < 800? "click →":"click to isolate sender →"): "sender :") g.append("rect").classed("legend-pills-outer", true) .attr("x", 0) .attr("rx", 0) .attr("ry", 0) .attr("width", li.w - li.s) .attr("height", li.h - li.s) .style("fill", "#fff"); g.append("rect").classed("legend-pills-1", true) .attr("x", li.s) .attr("y", li.s) .attr("rx", 0) .attr("ry", 0) .attr("width", function(d) { return (li.w * (0.2)) - (2*li.s); }) .attr("height", li.h - (3*li.s)) .style("fill", function(d) { return colors[d]; }); g.append("text").classed("legend-text", true) .attr("x", li.w * (0.25)) .attr("y", li.h*(2/3)) .attr("text-anchor", "left") .attr("fill", "#000000") .style("font-size", "10px") .style("font-family", "Arial") .text(function(d) { return d; }); } //end drawLegend() svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); const circle = svg.append("g") .attr("stroke", "black") .selectAll("circle") .data(dataAt(d3.min(years_array)), d => split_categories?[d.category,d.sender].join(":"): d.sender) .join("circle") .sort((a, b) => d3.descending(a.volume, b.volume)) .attr("cx", d => x(d.followOnMembers)) .attr("cy", d => y(d.followOnPosts)) .attr("r", d => radius(d.volume)) .attr("fill", d => colors[d.sender]) .attr("class",d => to_css_class(d.sender.toLowerCase()) ) .attr("id", d => `${to_css_class(d.sender.toLowerCase())}_${to_css_class(d.category.toLowerCase())}` ) .call(circle => circle.append("title") .text(d => [d.sender, d.category].join("\n"))); const label = svg.append("g") .classed("circle-label", true) .selectAll("text") .data(dataAt(d3.min(years_array)), d => split_categories?[d.category,d.sender].join(":"): d.sender) .join("text") .sort((a, b) => d3.descending(a.volume, b.volume)) .attr("x", d => x(d.followOnMembers) - radius(d.volume)) .attr("y", d => y(d.followOnPosts) - (radius(d.volume) + 2)) .attr("fill", "black") .attr("class", d => to_css_class(d.sender.toLowerCase()) ) .attr("id", d => `${to_css_class(d.sender.toLowerCase())}_${to_css_class(d.category.toLowerCase())}` ) .style("font-size", "10px") .style("opacity", 0) .text(d => split_categories? `${d.category}(${d.volume.toFixed(0)})`: `${d.sender}(${d.volume.toFixed(0)})`) .classed("selected", !split_categories ) let legend = drawLegend(svg); return Object.assign(svg.node(), { update(data) { circle.data(data, d => split_categories?[d.category,d.sender].join(":"): d.sender) .sort((a, b) => d3.descending(a.volume, b.volume)) .attr("cx", d => x(d.followOnMembers)) .attr("cy", d => y(d.followOnPosts)) .attr("r", d => radius(d.volume)) label.data(data, d => split_categories?[d.category,d.sender].join(":"): d.sender) .sort((a, b) => d3.descending(a.volume, b.volume)) .attr("x", d => x(d.followOnMembers) - radius(d.volume)) .attr("y", d => y(d.followOnPosts) - (radius(d.volume) + 2)) .text(d => split_categories? `${d.category}(${d.volume.toFixed(0)})`: `${d.sender}(${d.volume.toFixed(0)})`) .classed("selected", !split_categories ) } }); }32:T6b3,md `

We can tell:

2019, 2020 really are the years we got political, but there have been no shortage of large socio-polical events affecting the UK that are disagreeable to the liberal political views this group generally holds, so it was perhaps bound to happen. Also, the book club started as a sports book club, but transtioned out of that theme after a couple of years. Deselecting split to category and filtering the above visulating to News and Politics in the drop-down: if you play this - Henry and Will, and more recently in 2021 Daniel are best at engaging people on politics. Alan posts more than anyone on it but with noticeably less engagement. Select Split to categories, then click on Alan's name in the legend and play, you will see that at the end in 2021 he has already realised this and is switching to posting more about other themes.

Most people really increased their volume of Arts & Entertainment posts in 2019-2020, it is the most popular category and synonymous with a general large increase in post during this period.

Alan prompts large rafts of posting with his sports messages. In a SWOT analysis, that is definitely his opportunity to engage people more.

Andy engages a lot of people with Food & Drink but not for many posts.

Mark doesn't post much, but when he posts on Arts & Entertainment he engages more people than anyone. The same is true of Angus and News & Politics / People & Society / Health. This could be interpreted as playing a great enabler / discussion facilitator role. Equally as likely, this is shwoing them getting on a bandwagon with near-peak momentum selecting the more lively discussions to get involved in.

`33:T5e4,book_club_data = { let output; if (split_categories == false) { output = processed_data_full.filter(e => e.category == engagement_category_input) /*//filtered to category for single-category view let sender_year_volume_array = d3.rollups(main_file.filter(e => exploded_file_category_filtered_indexes.indexOf(e['index']) > -1), v => v.length, d => d['sender'], d => new Date(d['timestamp']).getFullYear()) output = sender_year_volume_array.map(function(d){ let partlyFilteredData = main_file.filter(e => d[0] == e['sender']); return { sender: d[0], category: d[0], volume: d[1], followOnPosts: d[1].map(el => [el[0], get_follow_on_aggregates(main_file, partlyFilteredData.filter(e => new Date(e['timestamp']).getFullYear() == Number(el[0])),2)['post_count_avg']['value'] ] ), followOnMembers: d[1].map(el => [el[0], get_follow_on_aggregates(main_file, partlyFilteredData.filter(e => new Date(e['timestamp']).getFullYear() == Number(el[0])),2)['people_engaged_avg']['value'] ] ) } });*/ } if (split_categories == true) { output = processed_data_full.filter(e => e.category != 'All') /*output = get_follow_on_aggregates(main_file, main_file_filtered_by_topcategories, 2, exploded_file_top10_category_indexes, sender_category_year_volume_array)*/ } return output; }34:[] 2f:{"title":"Part 6 - Engagement... The Final Frontier","cells":[{"id":0,"value":"md`# Part 6 - Engagement... The Final Frontier\n

This is my editing and re-purposing of Mike Bostock's recreation of a [Gapminder visualization](http://gapminder.org/world/) made famous by [Hans Rosling](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen). The original showed per-capita income, life expectancy and population of 180 nations over 200+ years, colored by region.

\n
\n

I have re-purposed this to show member post volume(*bubble area*), average number of other members engaged in next 2 hours after a post by that member (*x*) and average number of other member posts in next 2 hours (*y*).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"html `${viewof year}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"html `

${year.toFixed(0)}

${viewof engagement_category_input}

${viewof split_categories}

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"html `

${chart}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md `### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"viewof split_categories = Toggle({label: \"Split to top categories\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof year = {\n const year_input = Scrubber(d3.range(d3.min(years_array), d3.max(years_array), width < 800? 0.013: 0.008), \n {format: Math.floor, \n loop: false,\n autoplay: false}\n );\n year_input.childNodes[3].childNodes[3].style.visibility = \"hidden\";\n return year_input\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof engagement_category_input = Select(split_categories? ['All']:Array.from(Object.keys(exploded_file_top10_category_indexes)), {value: \"All\", label: \"Originator post category\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"clear_interactions = function(){\n //make all circles opacity:1\n d3.selectAll(`circle`)\n .style(\"stroke\", \"black\")\n .style(\"opacity\", 1);\n //hide all the circle text labels\n d3.selectAll(`g.circle-label text`)\n .style(\"opacity\", 0);\n d3.selectAll(`g.circle-label text.selected`)\n .classed(\"selected\", false);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"Window.onload = function(){\n clear_interactions(); \n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"update = chart.update(currentData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"currentData = dataAt(year) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"function to_css_class(input){\n return input.replaceAll(\" \",\"_\").replaceAll(\"&\",\"_\").replaceAll(\":\",\"_\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"x = d3.scaleLinear([0, 4.5], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"y = d3.scaleLinear([0, 26], [height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"radius = d3.scaleSqrt()\n .domain([0, \n split_categories? \n sender_year_maxvolume/1.5*Math.pow((main_file_categorised_only.length/main_file.length),(1/8)) :\n engagement_category_input == 'All'? sender_year_maxvolume/Math.pow((main_file_categorised_only.length/main_file.length),(1/8)): sender_year_maxvolume/1.5*Math.pow((main_file_categorised_only.length/main_file.length),(1/8)) \n ])\n .range([0, 68])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Other members engaged in 2 hours following post →\"))\n .call(g => g.append(\"text\")\n .attr(\"x\", margin.left)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(width < 800? \"\":\"Bubble size = sender post volume\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", width < 800? 30: 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .html(width < 800? \"↑ Others' posts\": \"↑ Other members posts in 2 hours following post\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"function dataAt(year) {\n return book_club_data.map(d => ({\n sender: d.sender,\n category: split_categories? d.category: engagement_category_input,\n followOnMembers: valueAt(d.followOnMembers, year),\n volume: valueAt(d.volume, year),\n followOnPosts: valueAt(d.followOnPosts, year)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"function valueAt(values, year) {\n const i = bisectYear(values, year, 0, values.length - 1);\n const a = values[i];\n if (i > 0) {\n const b = values[i - 1];\n const t = (year - a[0]) / (b[0] - a[0]);\n return a[1] * (1 - t) + b[1] * t;\n }\n return a[1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"bisectYear = d3.bisector(([year]) => year).left","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"exploded_file_category_filtered_indexes = exploded_file_top10_category_indexes[engagement_category_input]","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"main_file_filtered_by_topcategories = main_file.filter( e => /*top10_category_indexes_flat*/exploded_file_category_filtered_indexes.indexOf(e['index']) > -1 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"main_file_categorised_only = main_file.filter( e => \n exploded_file_top10_category_indexes['All'].indexOf(e['index']) > -1 \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"processed_data_full = get_follow_on_aggregates(main_file, main_file_categorised_only, 2, exploded_file_top10_category_indexes, sender_category_year_volume_array) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"sender_year_maxvolume = d3.rollups(main_file_categorised_only, v => v.length, d => d['sender'], d => new Date(d['timestamp']).getFullYear()).flat(2).filter(e => Array.isArray(e)).sort((a,b) => b[1]-a[1])[0][1];","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"sender_category_year_volume_array = d3.rollups(exploded_file, v => v.length, \n d => d['sender'], d => d['Google classification category - top'], d => new Date(d['timestamp']).getFullYear())\n.map(function(e){\n let person = e[0]\n e[1].push( [\"All\", Array.from (sender_allcategory_year_volume_map.get(person))] )\n return e[1].map(function(el){ \n el.unshift(person)\n let category = el[1];\n return el\n })\n})\n.flat(1).filter(e => Array.from(Object.keys(exploded_file_top10_category_indexes)).indexOf(e[1]) > -1) \n \n\n\n//Array.from (sender_allcategory_year_volume_map.get(person))","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"sender_allcategory_year_volume_map = d3.rollup(exploded_file.filter(e => exploded_file_top10_category_indexes['All'].indexOf(e['index']) > -1), v => v.length, \n d => d['sender'], d => new Date(d['timestamp']).getFullYear())","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"top10_category_indexes_flat = Object.values(exploded_file_top10_category_indexes).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({top: width < 800? 40: 20, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = width < 800? 300: 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"import {main_file, exploded_file, colors, types, post_volume_array, members_by_post_volume_array, post_categories_top15_array, post_categories_top10_array, entities_per_topic_map, years_array} from \"@mtsvelik/book-club-whatsapp-group-what-our-posts-say-about-us-intro\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"import {get_follow_on_aggregates, exploded_file_top10_category_indexes, undefined_to_zero} from \"@mtsvelik/part-5-conversations-and-engagement\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Search, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"import {persistentSelect} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}