31:Tcac,image_intro_gen = { const data = timeline_data 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: "J-O-N. JON", file: FileAttachment("Jon.png")}, {name: "Mike", file: FileAttachment("Mike.png")}, {name: "Chloe", file: FileAttachment("Chloe.png")}, {name: "Adam", file: FileAttachment("Adam@1.png")}, {name: "Daniel Lambauer", file: FileAttachment("Daniel.png")}, {name: "Beth", file: FileAttachment("Beth.png")}, {name: "Angus", file: FileAttachment("Angus.png")}, {name: "Will Ennett", file: FileAttachment("Will.png")}, {name: "Chris", file: FileAttachment("Chris.png")}, {name: "Misha", file: FileAttachment("Misha.png")}, {name: "Hugh", file: FileAttachment("Hugh.png")}, {name: "Mark Buchanan", file: FileAttachment("Mark.png")}, {name: "Andy", file: FileAttachment("Andy.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,i) => myColor(d._row)/*colors[i]*/); 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 => d._row.split(" ")[0]) .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,i) => getUrl(d["_row"], 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:T563,timeline_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.getFullYear()}` //`${this.description}: ${rawDate.getDate() + '/' + (rawDate.getMonth()+1) + '/' + rawDate.getFullYear()}` } }, series: [{ dataLabels: { allowOverlap: true, format: '● ' + '{point.x:%Y}
{point.label}', //'{point.x:%d %b %Y}
{point.label}', alternate: true, distance: -50 }, marker: { symbol: 'circle' }, data: timeline_used }] });33:[{"id":"0cef5524289c555cace0161a312da1914c86db4930686db64f91838f345cf5ae34729f64cc8428cb581272a50c46b185f6ab98a91e3be025b841a8fb61cef20b","href":"https://static.observableusercontent.com/files/0cef5524289c555cace0161a312da1914c86db4930686db64f91838f345cf5ae34729f64cc8428cb581272a50c46b185f6ab98a91e3be025b841a8fb61cef20b","name":"Will.png","type":"image/png","lastModified":1664768461032.215,"size":816580},{"id":"57cd60f527b93bd4235ff5ba0f2c6481a2a738634c83cfe2a543475b1fd8dd8490f2c80ac8a4414f39c8e2c5a8f34eb41081c1eb6fe0be4a5b1010d6118c1bed","href":"https://static.observableusercontent.com/files/57cd60f527b93bd4235ff5ba0f2c6481a2a738634c83cfe2a543475b1fd8dd8490f2c80ac8a4414f39c8e2c5a8f34eb41081c1eb6fe0be4a5b1010d6118c1bed","name":"Andy.png","type":"image/png","lastModified":1664768460513.171,"size":49627},{"id":"2c4791272e34ec646ab31c2c7bfd08b975eeb2a9897664c092bc48492700ea12f4974b23d9f29ac4351a14ed53afff613df44de7b76351dc5e44f6afe3aff8f3","href":"https://static.observableusercontent.com/files/2c4791272e34ec646ab31c2c7bfd08b975eeb2a9897664c092bc48492700ea12f4974b23d9f29ac4351a14ed53afff613df44de7b76351dc5e44f6afe3aff8f3","name":"Daniel.png","type":"image/png","lastModified":1664768460482.818,"size":50604},{"id":"3984fb8c8643a7017a7f168703ad7e63ccffb8abd32489bb3465985ed0b67b57ecc87f20f601711d2ce99b22b00566838dad3185752d28e76571e50a25fa0e00","href":"https://static.observableusercontent.com/files/3984fb8c8643a7017a7f168703ad7e63ccffb8abd32489bb3465985ed0b67b57ecc87f20f601711d2ce99b22b00566838dad3185752d28e76571e50a25fa0e00","name":"Angus.png","type":"image/png","lastModified":1664768462350.419,"size":113609},{"id":"8210b20dd6af5ae530b34dfa097c90565dbb2d96daf0c2a8a95a2537aeb80437815a5e29fe21c1b9aa1d2c3dfae2bb5989ba2560cdb8c2b227d99256a2a6ccf6","href":"https://static.observableusercontent.com/files/8210b20dd6af5ae530b34dfa097c90565dbb2d96daf0c2a8a95a2537aeb80437815a5e29fe21c1b9aa1d2c3dfae2bb5989ba2560cdb8c2b227d99256a2a6ccf6","name":"Misha.png","type":"image/png","lastModified":1664768460755.738,"size":116009},{"id":"dd74bbd51b7c3468a7d3c21ee43b84b744e4700f1097f87080cc696d19aa6531bd9eeefc642c9ebdc3558b55cbfda07507a2c0786576639b5e9e34e180d47396","href":"https://static.observableusercontent.com/files/dd74bbd51b7c3468a7d3c21ee43b84b744e4700f1097f87080cc696d19aa6531bd9eeefc642c9ebdc3558b55cbfda07507a2c0786576639b5e9e34e180d47396","name":"Mark.png","type":"image/png","lastModified":1664768460302.952,"size":41445},{"id":"b4b793192abe9ab81b8769bb0d46c6111dffaa032ed8172eb75a0ea2ac5af7821dccb902b1f8d13daf7653b559d81527d2d75143ed46ed83291dc03c530aff32","href":"https://static.observableusercontent.com/files/b4b793192abe9ab81b8769bb0d46c6111dffaa032ed8172eb75a0ea2ac5af7821dccb902b1f8d13daf7653b559d81527d2d75143ed46ed83291dc03c530aff32","name":"Chloe.png","type":"image/png","lastModified":1664811922422.246,"size":45929},{"id":"4566b49a513d133e838790bbc9d48e866779dd0c2e5196a7822b9d818b499a172ac309595c1c16240cc14c9177c29dd21dcca93655706d67bf388e11c39d9694","href":"https://static.observableusercontent.com/files/4566b49a513d133e838790bbc9d48e866779dd0c2e5196a7822b9d818b499a172ac309595c1c16240cc14c9177c29dd21dcca93655706d67bf388e11c39d9694","name":"Beth.png","type":"image/png","lastModified":1664811922527.843,"size":64892},{"id":"ce4bf4d024dea90ccfd567da53a004b85daebd82ec5745128a88f65a3372518d9f77dc6c564605aa63065a0f96686bb80085d6b7d7403b89a3977dd93976c85b","href":"https://static.observableusercontent.com/files/ce4bf4d024dea90ccfd567da53a004b85daebd82ec5745128a88f65a3372518d9f77dc6c564605aa63065a0f96686bb80085d6b7d7403b89a3977dd93976c85b","name":"Mike.png","type":"image/png","lastModified":1664811922613.795,"size":58459},{"id":"6319b9f83ae4006a4f7892f4c310b8b411fc3c00720176f2d3143d4cc635e5d9d215e7f856bff1e034b7ee9ea2d2284fec50c5f41de1b2bb76f4a7ad8b1042c2","href":"https://static.observableusercontent.com/files/6319b9f83ae4006a4f7892f4c310b8b411fc3c00720176f2d3143d4cc635e5d9d215e7f856bff1e034b7ee9ea2d2284fec50c5f41de1b2bb76f4a7ad8b1042c2","name":"Hugh.png","type":"image/png","lastModified":1664811922562.701,"size":68970},{"id":"a7307730ccd95aecc0a4ab8fa0a0ed33a146890cc45ce3999191d04d91480d760d99bbe8dc3f3dcdb51b714d2bfc26e6304441070cd7fc3a63296bd4abb8a0a0","href":"https://static.observableusercontent.com/files/a7307730ccd95aecc0a4ab8fa0a0ed33a146890cc45ce3999191d04d91480d760d99bbe8dc3f3dcdb51b714d2bfc26e6304441070cd7fc3a63296bd4abb8a0a0","name":"Chris.png","type":"image/png","lastModified":1664812334019.211,"size":70169},{"id":"1d207300c5c3af9638cc5610c7e5c2440d849675b084fa74d8d02a774b65e89e65cad983deaf664a3b9bfda6ccc0375253b9e1b81cf3e3f81667d49701f86959","href":"https://static.observableusercontent.com/files/1d207300c5c3af9638cc5610c7e5c2440d849675b084fa74d8d02a774b65e89e65cad983deaf664a3b9bfda6ccc0375253b9e1b81cf3e3f81667d49701f86959","name":"Adam@1.png","type":"image/png","lastModified":1664812358574.695,"size":55168},{"id":"0daa1ec329e56e73d5c1fc2fed58166b93dce0547ec5eac0a3b618033f31c1b578fdeab76f2aada6bfec84a10c72c423f39831ff09aab31e2f2862f57dd464d5","href":"https://static.observableusercontent.com/files/0daa1ec329e56e73d5c1fc2fed58166b93dce0547ec5eac0a3b618033f31c1b578fdeab76f2aada6bfec84a10c72c423f39831ff09aab31e2f2862f57dd464d5","name":"Jon.png","type":"image/png","lastModified":1664814491727.196,"size":58533}] 2f:{"title":"40 Years and Counting: Andy's Friends","cells":[{"id":0,"value":"# 40 Years and Counting: Andy's Friends","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Welcome Andy, you're about to go on a journey of merciless introspection. At the end of it, we genuinely hope we can help you improve as a human being and become everything your brand promises to. \n\nYou may not agree with all the findings, in which case, tough. This methodology is Marketing Science vetted and with a sample size of ${timeline_data.length}, findings ready to be published in pretty much any self-respecting journal. \n\n**Tip:** if you're using a mobile, turn it to horizontal orientation. It just makes the whole thing easier.","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"### [NEXT: Friends' Experiences with You](https://observablehq.com/@mtsvelik/our-experiences-with-you?collection=@mtsvelik/andys-day-of-reckoning)","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"# ⠀\n# ⠀\n# ⠀\n# ⠀\n# ⠀\n# ⠀\n### Technical stuff","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"Code & data","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"friends = timeline_array.map(o => o.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"myColor = d3.scaleOrdinal().domain(timeline_array.map(o => o.name))\n .range(d3.schemeSet1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"timeline_array = timeline_data.map((e,i) => ({\n x: e.date,\n name: e[\"_row\"],\n label: `${e[\"_row\"]}`,\n description: `${e[\"_row\"]} meets Andy`\n })).concat([{\n x: Date.UTC(2022,9,4),\n name: '40',\n label: '40',\n description: \"The big 4-0\"\n }]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"timeline_used = timeline_array.map(o => {\n return {...o,\n ...{\n color: myColor(o.name),\n label: o.name.split(\" \")[0] \n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"import {Highcharts} from \"@mtsvelik/book-club-whatsapp-group-what-our-posts-say-about-us-intro\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"timeline_data = ([{\"year\":\"1/10/2001\",\"_row\":\"J-O-N. JON\"},{\"year\":\"1/8/2012\",\"_row\":\"Mike\"},{\"year\":\"1/10/2013\",\"_row\":\"Chloe\"},{\"year\":\"11/11/2003\",\"_row\":\"Adam\"},{\"year\":\"1/9/2001\",\"_row\":\"Daniel Lambauer\"},{\"year\":\"1/1/2014\",\"_row\":\"Beth\"},{\"year\":\"1/10/2001\",\"_row\":\"Angus\"},{\"year\":\"1/10/2001\",\"_row\":\"Will Ennett\"},{\"year\":\"10/9/2001\",\"_row\":\"Chris\"},{\"year\":\"1/3/2006\",\"_row\":\"Misha\"},{\"year\":\"7/20/2002\",\"_row\":\"Hugh\"},{\"year\":\"10/15/2001\",\"_row\":\"Mark Buchanan\"}]).map((o,i) => {\n const date_part = o.year.split(\"/\")\n return {\n ...o,\n ...{\n date: Date.UTC(Number(date_part[2]), Number(date_part[1])-1, Number(date_part[0]) )\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}