31:Tb5c,image_intro_gen = { const data = firsts_input == "first posts"? Object.keys(colors): fathers_array.map(e => e.name); const getKey = function(value, obj){ let output = ''; for (const property in obj) { obj[property] == value? output = property: ''; } return output; } let tempindex = 0; let imageUrl = ''; let files = [ {name: "Andy", file: FileAttachment("Andy.png")}, {name: "Angus", file: FileAttachment("Angus.png")}, {name: "Daniel", file: FileAttachment("Daniel.png")}, {name: "Mark", file: FileAttachment("Mark.png")}, {name: "Misha", file: FileAttachment("Misha.png")}, {name: "Will", file: FileAttachment("Will.png")} ]; let urls = await Promise.all(files.map(file => file.file.url())); let getUrl = function(name, files, urls){ let url = ''; files.forEach( (e,i) => e.name == name? url = urls[i]:'' ) return url; } // Dimensions of legend item: width, height, spacing, radius of rounded rect. const dimensions = { radius: width < 800? 25: 32, padding: width < 800? 3: 5 }; const height = 325; d3.select("svg#image_intro").html(''); const svg = d3.select("svg#image_intro") .attr('height', 3.5*dimensions.radius) .attr('width', width); const node = svg.selectAll('.g') .data(data) .enter().append('g') .attr('transform', `translate(${2*dimensions.padding + dimensions.radius}, ${2*dimensions.padding + dimensions.radius})`); const circle = node.append('circle') .attr('r', function(d) { return dimensions.radius; }) .attr('cx', function(d, i) { return i * (dimensions.padding + 2*dimensions.radius); }) .attr('cy', 0) .attr('fill', d => colors[d]); const node_label = svg.selectAll('.g') .data(data) .enter().append('g') .attr('transform', `translate(${2*dimensions.padding + dimensions.radius}, ${2*dimensions.padding + dimensions.radius})`); const node_label_text = node_label.append('text') .attr("x", function(d, i) { return (i * (dimensions.padding + 2*dimensions.radius)) - 0.8*dimensions.radius; }) .attr("y", function(d) { return (4*dimensions.padding + dimensions.radius) + 2; }) .text(d => getKey(colors[d], colors)) .attr("stroke-width", 1); const images_g = svg.selectAll('.g') .data(data) .enter().append('g') .attr('transform', `translate(${2*dimensions.padding + dimensions.radius}, ${2*dimensions.padding + dimensions.radius})`); const images = images_g .append("svg:image") .attr("xlink:href", d => getUrl(getKey(colors[d], colors), files, urls)) .attr("x", function(d, i) { return i * (dimensions.padding + 2*dimensions.radius) - (dimensions.radius - dimensions.padding); }) .attr("y", -(dimensions.radius - dimensions.padding)) .attr("height", 2*(dimensions.radius - dimensions.padding)) .attr("width", 2*(dimensions.radius - dimensions.padding)); return svg } 32:T647,members_timeline_chart_array = firsts_input == "first posts"? Array.from(Object.keys(colors)).map(function(e){ let data = main_file.filter(el => el['sender'] == e); return { x: Date.UTC(data[0]['datetime_asdate'].getFullYear(), data[0]['datetime_asdate'].getMonth(), data[0]['datetime_asdate'].getDate()), name: `${e}`, label: `${e}`, color: colors[e], description: `${e}'s first post` } }).concat([{ x: Date.UTC(main_file[main_file.length-1]['datetime_asdate'].getFullYear(), main_file[main_file.length-1]['datetime_asdate'].getMonth(), main_file[main_file.length-1]['datetime_asdate'].getDate()), name: 'last data point', label: 'last data point', color: 'grey', description: "last data point" }]) : fathers_array.map(e => ({ x: Date.UTC(e["firstborn dob"].getFullYear(),e["firstborn dob"].getMonth(),e["firstborn dob"].getDate()), name: e["name"], label: `${e["name"]} fathers ${e["firstborn name"]}`, color: colors[e["name"]], description: `${e["name"]} fathers ${e["firstborn name"]}` })).concat([{ x: Date.UTC(main_file[main_file.length-1]['datetime_asdate'].getFullYear(), main_file[main_file.length-1]['datetime_asdate'].getMonth(), main_file[main_file.length-1]['datetime_asdate'].getDate()), name: 'last data point', label: 'last data point', color: 'grey', description: "last data point" }]);33:T502,members_timeline_chart_gen = Highcharts.chart('members_timeline', { chart: { zoomType: 'x', type: 'timeline', height: 150, marginLeft:15, marginRight:0, }, credits: { enabled: false }, xAxis: { type: 'datetime', visible: false }, yAxis: { gridLineWidth: 1, title: null, labels: { enabled: false } }, legend: { enabled: false }, title: { text: null }, subtitle: { text: null }, tooltip: { style: { width: 300 }, pointFormatter: function(d,i){ let rawDate = new Date(this.x); return `${this.description}: ${rawDate.getDate() + '/' + (rawDate.getMonth()+1) + '/' + rawDate.getFullYear()}` } }, series: [{ dataLabels: { allowOverlap: true, format: '● ' + '{point.x:%d %b %Y}
{point.label}', alternate: true, distance: -50 }, marker: { symbol: 'circle' }, data: members_timeline_chart_array }] }); 34:T46f,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x(d.value)},${y(n)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x(d.value)},${y(n)})`) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", function(d) { return textTween(parseNumber(this.textContent), d.value); }))); }35:T85d,post_volume_by_year_chart_gen = Highcharts.chart('post_volume_by_year_chart',{ chart: { type: 'line', height: 250 }, xAxis: { categories: years_array }, title: { text: null }, credits: { enabled: false }, yAxis: { title: { text: 'No. of posts' }, gridLineWidth:0, lineWidth: 0, minorGridLineWidth: 0, labels: { enabled: true }, max: 1500, min: 0 }, xAxis: { max: d3.max(years_array), min: d3.min(years_array) }, plotOptions: { column: { colorByPoint: true }, line: { events: { legendItemClick: function() { var seriesIndex = this.index; var series = this.chart.series; var yLabels = this.chart.yAxis.labels; if (this.visible && this.chart.restIsHidden) { for (var i = 0; i < series.length; i++) { if (series[i].index != seriesIndex) { series[i].show(); } } this.chart.restIsHidden = false; } else { for (var i = 0; i < series.length; i++) { if (series[i].index != seriesIndex) { series[i].hide(); } } this.show() this.chart.restIsHidden = true; } return false; } }, showInLegend: true }, series: { dataLabels: { enabled: false } } }, tooltip: { formatter: function () { let sign = this.point.index == 0? '': (this.y - this.series.points[this.point.index-1].y) > 0? '+':''; let tooltip = this.point.index == 0? `${this.series.name}: ${this.y.toFixed(0)}`: `${this.series.name}: ${this.y.toFixed(0)} (${sign}${((100*(this.y - this.series.points[this.point.index-1].y)/this.series.points[this.point.index-1].y)).toFixed(0)}% change)` return tooltip; } }, series: post_volume_by_year_array })36:[{"id":"5e2fa80845ab6abc1751e5e4a81b1e052cab3bfeac8aa2e1011c686f7775b3be7b5fae1103e1fca1682a1175d72831726006835417ace50727dd99e933f50714","href":"https://static.observableusercontent.com/files/5e2fa80845ab6abc1751e5e4a81b1e052cab3bfeac8aa2e1011c686f7775b3be7b5fae1103e1fca1682a1175d72831726006835417ace50727dd99e933f50714","name":"1005px-Newmarket1885_VanityFair_30November1885.png","type":"image/png","lastModified":1614172715642.503,"size":1152271},{"id":"0cef5524289c555cace0161a312da1914c86db4930686db64f91838f345cf5ae34729f64cc8428cb581272a50c46b185f6ab98a91e3be025b841a8fb61cef20b","href":"https://static.observableusercontent.com/files/0cef5524289c555cace0161a312da1914c86db4930686db64f91838f345cf5ae34729f64cc8428cb581272a50c46b185f6ab98a91e3be025b841a8fb61cef20b","name":"Will.png","type":"image/png","lastModified":1614897648886.831,"size":816580},{"id":"57cd60f527b93bd4235ff5ba0f2c6481a2a738634c83cfe2a543475b1fd8dd8490f2c80ac8a4414f39c8e2c5a8f34eb41081c1eb6fe0be4a5b1010d6118c1bed","href":"https://static.observableusercontent.com/files/57cd60f527b93bd4235ff5ba0f2c6481a2a738634c83cfe2a543475b1fd8dd8490f2c80ac8a4414f39c8e2c5a8f34eb41081c1eb6fe0be4a5b1010d6118c1bed","name":"Andy.png","type":"image/png","lastModified":1614897648207.081,"size":49627},{"id":"8210b20dd6af5ae530b34dfa097c90565dbb2d96daf0c2a8a95a2537aeb80437815a5e29fe21c1b9aa1d2c3dfae2bb5989ba2560cdb8c2b227d99256a2a6ccf6","href":"https://static.observableusercontent.com/files/8210b20dd6af5ae530b34dfa097c90565dbb2d96daf0c2a8a95a2537aeb80437815a5e29fe21c1b9aa1d2c3dfae2bb5989ba2560cdb8c2b227d99256a2a6ccf6","name":"Misha.png","type":"image/png","lastModified":1614897648328.386,"size":116009},{"id":"d094f778724c11a06bc5f1b253ba53ab2b2867705cec80ac59bd61721366f640021df25330e6f5995c21ad855007ae9bb5c1dd099c0318425045f7f34683a3c8","href":"https://static.observableusercontent.com/files/d094f778724c11a06bc5f1b253ba53ab2b2867705cec80ac59bd61721366f640021df25330e6f5995c21ad855007ae9bb5c1dd099c0318425045f7f34683a3c8","name":"Henni.png","type":"image/png","lastModified":1614897648346.124,"size":164742},{"id":"3984fb8c8643a7017a7f168703ad7e63ccffb8abd32489bb3465985ed0b67b57ecc87f20f601711d2ce99b22b00566838dad3185752d28e76571e50a25fa0e00","href":"https://static.observableusercontent.com/files/3984fb8c8643a7017a7f168703ad7e63ccffb8abd32489bb3465985ed0b67b57ecc87f20f601711d2ce99b22b00566838dad3185752d28e76571e50a25fa0e00","name":"Angus.png","type":"image/png","lastModified":1614897648201.689,"size":113609},{"id":"dd74bbd51b7c3468a7d3c21ee43b84b744e4700f1097f87080cc696d19aa6531bd9eeefc642c9ebdc3558b55cbfda07507a2c0786576639b5e9e34e180d47396","href":"https://static.observableusercontent.com/files/dd74bbd51b7c3468a7d3c21ee43b84b744e4700f1097f87080cc696d19aa6531bd9eeefc642c9ebdc3558b55cbfda07507a2c0786576639b5e9e34e180d47396","name":"Mark.png","type":"image/png","lastModified":1614897648203.853,"size":41445},{"id":"2c4791272e34ec646ab31c2c7bfd08b975eeb2a9897664c092bc48492700ea12f4974b23d9f29ac4351a14ed53afff613df44de7b76351dc5e44f6afe3aff8f3","href":"https://static.observableusercontent.com/files/2c4791272e34ec646ab31c2c7bfd08b975eeb2a9897664c092bc48492700ea12f4974b23d9f29ac4351a14ed53afff613df44de7b76351dc5e44f6afe3aff8f3","name":"Daniel.png","type":"image/png","lastModified":1614897648087.291,"size":50604}] 2f:{"title":"Part 1 - The Great Post Race","cells":[{"id":239,"value":"md`# Part 1 - The Great Post Race\n

\"The — Image: [Liborio Prosperi](https://en.wikipedia.org/wiki/Horse_racing_in_Great_Britain#/media/File:Newmarket1885_VanityFair_30November1885.png)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3202,"value":"html `

Book club members ${firsts_input}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"viewof keyframe = Scrubber(keyframes, {\n format: ([date]) => formatDate(date),\n delay: duration,\n loop: false,\n autoplay: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n\n invalidation.then(() => svg.interrupt());\n\n return Object.assign(svg.node(), {\n update(keyframe) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateTicker(keyframe, transition);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3211,"value":"md `

Above is how yearly posts per sender develop over time. Now let's take a look at the data in a more conventional, but equally useful way.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3141,"value":"post_volume_chart = html`

Post volume overall

Volume over time

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3214,"value":"md `

Andy recorded the largest absolute year on year increase in posts 2019-2020. However the largest ever percentage increase was Alan 2017 to 2018 (657%) Followed by more recently by Jim 2019 to 2020 a 354% increase - nearly 1000 posts!

\n
\n

Misha was the only person to record a lower post volume 2019 vs 2018? Possibly linked to his having a child in 2019...\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3219,"value":"md `### Appendix: Notes\nThe animated Great Post Race visualisation is based on [this](https://observablehq.com/@mbostock/bar-chart-race-with-scrubber) visualisation created by Mike Bostock.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3184,"value":"md `### Code: Timeline chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3187,"value":"viewof firsts_input = Select([\"first posts\", \"first borns\"], {label: \"View:\", value: \"first posts\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3192,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3197,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3134,"value":"md `### Post race chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3049,"value":"update = chart.update(keyframe)","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"data = d3.rollups(main_file, v => v.length, d => d['sender'], d => new Date(d['timestamp']).getFullYear())\n.reduce(function(arr, elem) {\n let name = elem[0];\n return arr.concat(elem[1].map(e => ({\n date: new Date(e[0], 0 ,1),\n name: name,\n value: e[1]\n })));\n}, [])\n//FileAttachment(\"category-brands.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"duration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"n = types.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"k = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n keyframes.push([\n new Date(ka * (1 - t) + kb * t),\n rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.6)\n .selectAll(\"rect\");\n\n return ([date, data], transition) => bar = bar\n .data(data.slice(0, n), d => d.name)\n .join(\n enter => enter.append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", y(n))\n .attr(\"width\", d => x(d.value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", y(n))\n .attr(\"width\", d => x(d.value) - x(0))\n )\n .call(bar => bar.transition(transition)\n .attr(\"y\", d => y(d.rank))\n .attr(\"width\", d => x(d.value) - x(0)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1538,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n this.textContent = formatNumber(i(t));\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3080,"value":"parseNumber = string => +string.replace(/,/g, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", margin.top + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"formatDate = d3.utcFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"color = {\n /*const scale = d3.scaleOrdinal(d3.schemeCategory10);\n if (data.some(d => d.category !== undefined)) {\n const categoryByName = new Map(data.map(d => [d.name, d.category]))\n scale.domain(categoryByName.values());\n return d => scale(categoryByName.get(d.name));\n }*/\n return d => colors[d.name]//scale(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"height = margin.top + barSize * n + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"barSize = 48","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3147,"value":"md `### Static posts charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3159,"value":"post_volume_by_year_array = d3.rollups(main_file, v => v.length, d => d.sender, d => d['datetime_asdate'].getFullYear())\n.map(e => (\n {\n \t\tname: e[0],\n color: colors[e[0]],\n data: e[1].map(el => ({\n x: el[0],\n y: el[1]\n }) \n ) \n\n }\n) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3161,"value":"years_array = d3.rollups(main_file, v => v.length, d => d['datetime_asdate'].getFullYear()).map(e => e[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3153,"value":"post_volume_chart_gen = Highcharts.chart('post_volume_chart',{ \n chart: {\n type: 'column',\n height: 250\n },\n xAxis: {\n categories: post_volume_array.map(function(e){ return e[0]})\n },\n title: {\n text: null\n },\n credits: {\n enabled: false\n },\n legend: {\n enabled: false\n },\n yAxis: {\n title: {\n text: 'No. of posts'\n },\n gridLineWidth:0,\n lineWidth: 0,\n minorGridLineWidth: 0,\n labels: {\n enabled: false\n }\n },\n plotOptions: {\n column: {\n colorByPoint: true\n },\n series: {\n dataLabels: {\n enabled: true\n }\n }\n },\n series: [\n { name: 'Sender', data: post_volume_array.map(function(e){ \n return {\n y: Number(e[1]),\n color: colors[e[0]]\n }\n }) \n }\n ] \n}); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3166,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3145,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3040,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3094,"value":"import {Highcharts, main_file, colors, types, post_volume_array, fathers_array} from \"@mtsvelik/book-club-whatsapp-group-what-our-posts-say-about-us-intro\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3189,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Search, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}