2d:null 2e:["$","title",null,{"children":"Silly Season 2020 | Mark Woosey | Observable"}] 33:T1a5b,drivers = ({ 44: { name: 'Lewis Hamilton', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Lewis_Hamilton_2016_Malaysia_2.jpg/330px-Lewis_Hamilton_2016_Malaysia_2.jpg', size: { w: 2 }, offset: { x: 1 / radius, y: -0.5 } } }, 77: { name: 'Valtteri Bottas', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/2019_Formula_One_tests_Barcelona%2C_Bottas_%2847200028912%29.jpg/330px-2019_Formula_One_tests_Barcelona%2C_Bottas_%2847200028912%29.jpg', size: { w: 4 }, offset: { x: -0.8, y: -0.7 } } }, 5: { name: 'Sebastian Vettel', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Sebastian_Vettel_2017_Malaysia_2.jpg/330px-Sebastian_Vettel_2017_Malaysia_2.jpg', size: { w: 3 }, offset: { x: -0.3, y: 0 } } }, 16: { name: 'Charles LeClerc', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/F12019_Schloss_Gabelhofen_%2825%29.jpg/330px-F12019_Schloss_Gabelhofen_%2825%29.jpg', size: { w: 3 }, offset: { x: -0.8, y: -0.5 } } }, 33: { name: 'Max Verstappen', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Max_Verstappen_2017_Malaysia_3.jpg/330px-Max_Verstappen_2017_Malaysia_3.jpg', size: { w: 4 }, offset: { x: -1, y: 0 } } }, 23: { name: 'Alexander Albon', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/2019_Formula_One_tests_Barcelona%2C_Albon_%2847200030682%29.jpg/315px-2019_Formula_One_tests_Barcelona%2C_Albon_%2847200030682%29.jpg', size: { w: 4 }, offset: { x: -0.7, y: 0 } } }, 55: { name: 'Carlos Sainz Jr', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/2019_Formula_One_tests_Barcelona%2C_Sainz_%2847251966861%29.jpg/375px-2019_Formula_One_tests_Barcelona%2C_Sainz_%2847251966861%29.jpg', size: { w: 4 }, offset: { x: -1, y: -0.5 } } }, 4: { name: 'Lando Norris', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Lando_Norris_Formula_1_Driver_%2849379469418%29_%28cropped%29.jpg/330px-Lando_Norris_Formula_1_Driver_%2849379469418%29_%28cropped%29.jpg', size: { h: 7 }, offset: { x: -1.2, y: -0.4 } } }, 3: { name: 'Daniel Ricciardo', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/F12019_Schloss_Gabelhofen_%2818%29.jpg/330px-F12019_Schloss_Gabelhofen_%2818%29.jpg', size: { h: 4.5 }, offset: { x: -1, y: -1 } } }, 31: { name: 'Esteban Ocon', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Esteban_Ocon_2017_Malaysia_1.jpg/330px-Esteban_Ocon_2017_Malaysia_1.jpg', size: { h: 4.5 }, offset: { x: -1.1, y: -0.5 } } }, 10: { name: 'Pierre Gasly', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/2019_Formula_One_tests_Barcelona%2C_Gasly_%2847200027932%29.jpg/330px-2019_Formula_One_tests_Barcelona%2C_Gasly_%2847200027932%29.jpg', size: { h: 4.5 }, offset: { x: -0.8, y: 0 } } }, 26: { name: 'Daniil Kvyat', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Daniil_Kvyat_USA_2017.jpg/360px-Daniil_Kvyat_USA_2017.jpg', size: { h: 6 }, offset: { x: -1, y: -0.5 } } }, 11: { name: 'Sergio Perez', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/2019_Formula_One_tests_Barcelona%2C_P%C3%A9rez_%2847200017422%29.jpg/330px-2019_Formula_One_tests_Barcelona%2C_P%C3%A9rez_%2847200017422%29.jpg', size: { h: 4.5 }, offset: { x: -0.8, y: -0.9 } } }, 18: { name: 'Lance Stroll', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/2019_Formula_One_tests_Barcelona%2C_Stroll_%2833376133178%29.jpg/270px-2019_Formula_One_tests_Barcelona%2C_Stroll_%2833376133178%29.jpg', size: { h: 4.5 }, offset: { x: -0.8, y: -0.6 } } }, 7: { name: 'Kimi Räikkönen', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/F12019_Schloss_Gabelhofen_%2822%29_%28cropped%29.jpg/330px-F12019_Schloss_Gabelhofen_%2822%29_%28cropped%29.jpg', size: { h: 4 }, offset: { x: -1, y: -0.5 } } }, 99: { name: 'Antonio Giovinazzi', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/2019_Formula_One_tests_Barcelona%2C_Giovinazzi_%2847200025952%29.jpg/330px-2019_Formula_One_tests_Barcelona%2C_Giovinazzi_%2847200025952%29.jpg', size: { h: 6 }, offset: { x: -0.6, y: -1 } } }, 8: { name: 'Romain Grosjean', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/F12019_Schloss_Gabelhofen_%2813%29.jpg/330px-F12019_Schloss_Gabelhofen_%2813%29.jpg', size: { h: 5 }, offset: { x: -1, y: -1 } } }, 20: { name: 'Kevin Magnussen', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/2017_United_States_Grand_Prix_Magnussen_2_%2824128155318%29.jpg/330px-2017_United_States_Grand_Prix_Magnussen_2_%2824128155318%29.jpg', size: { h: 6 }, offset: { x: -1, y: -0.5 } } }, 63: { name: 'George Russell', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/2019_Formula_One_tests_Barcelona%2C_Russell_%2833376134568%29.jpg/330px-2019_Formula_One_tests_Barcelona%2C_Russell_%2833376134568%29.jpg', size: { h: 4.5 }, offset: { x: -0.8, y: 0 } } }, 6: { name: 'Nicholas Latifi', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Iran_location_map.svg/375px-Iran_location_map.svg.png', size: { h: 5 }, offset: { x: -2, y: -2.4 } } }, // Couldn't find license free image of Nicholas Latifi, so enjoy this image of Latifi on a map of Iran as a substitute 14: { name: 'Fernando Alonso', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Alonso_2016.jpg/360px-Alonso_2016.jpg', size: { h: 13 }, offset: { x: -15 / radius, y: -5.5 } } }, 1: { name: 'Mika Häkkinen', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/2016209185748_2016-07-27_Champions_for_Charity_-_Sven_-_1D_X_-_0226_-_DV3P4819_mod.jpg/330px-2016209185748_2016-07-27_Champions_for_Charity_-_Sven_-_1D_X_-_0226_-_DV3P4819_mod.jpg' } })34:T54b,fullPermutations = [ { mercedes: [44, 77], ferrari: [5, 16], redbull: [33, 23], mclaren: [55, 4], renault: [3, 31], alphatauri: [10, 26], astonmartin: [11, 18], alfaromeo: [7, 99], haas: [8, 20], williams: [63, 6], none: [14, 1] }, { mercedes: [], ferrari: [16], redbull: [33], mclaren: [], renault: [31], alphatauri: [], astonmartin: [11], alfaromeo: [], haas: [], williams: [], none: [5] }, { mercedes: [], ferrari: [16], redbull: [33], mclaren: [3, 4], renault: [31], alphatauri: [], astonmartin: [11], alfaromeo: [], haas: [], williams: [], none: [5] }, { mercedes: [], ferrari: [16, 55], redbull: [33], mclaren: [3, 4], renault: [31], alphatauri: [], astonmartin: [11], alfaromeo: [], haas: [], williams: [], none: [5] }, { mercedes: [], ferrari: [16, 55], redbull: [33], mclaren: [3, 4], renault: [31], alphatauri: [], astonmartin: [11], alfaromeo: [], haas: [], williams: [], none: [] }, { mercedes: [], ferrari: [16, 55], redbull: [33], mclaren: [3, 4], renault: [31, 14], alphatauri: [], astonmartin: [11], alfaromeo: [], haas: [], williams: [], none: [] } ]35:T78e,permutations = [ { mercedes: [44, 77], ferrari: [5, 16], redbull: [33, 23], mclaren: [55, 4], renault: [3, 31], alphatauri: [10, 26], astonmartin: [11, 18], alfaromeo: [7, 99], haas: [8, 20], williams: [63, 6], none: [14] }, { mercedes: [], ferrari: [16], redbull: [], mclaren: [], renault: [], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [], none: [5, 14] }, { mercedes: [], ferrari: [], redbull: [], mclaren: [3, 4], renault: [31], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [], none: [] }, { mercedes: [], ferrari: [16, 55], redbull: [], mclaren: [], renault: [], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [], none: [] }, { mercedes: [], ferrari: [], redbull: [], mclaren: [], renault: [14, 31], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [], none: [] }, { mercedes: [], ferrari: [], redbull: [], mclaren: [], renault: [], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [63, 6], none: [] }, { mercedes: [77], ferrari: [], redbull: [], mclaren: [], renault: [], alphatauri: [], astonmartin: [], alfaromeo: [], haas: [], williams: [], none: [] }, { mercedes: [], ferrari: [], redbull: [], mclaren: [], renault: [], alphatauri: [], astonmartin: [5], alfaromeo: [], haas: [], williams: [], none: [11] }, { mercedes: [77], ferrari: [16, 55], redbull: [33], mclaren: [3, 4], renault: [14, 31], alphatauri: [], astonmartin: [5], alfaromeo: [], haas: [], williams: [63, 6], none: [] } ]36:[] 31:{"id":"3470209749d15b3a","slug":"silly-season-2020","title":"Silly Season 2020","thumbnail":"e797f6bf009ef0afeea6239f8c3b031e24336c21dd8a5494c063c4dd645568f9","access_level":"public","create_time":"$D2020-05-15T15:43:28.917Z","update_time":"$D2020-09-18T21:31:52.157Z","view_time":null,"first_public_time":"$D2020-05-17T23:53:55.244Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"85bbfb65264a0771","login":"mrkwse","name":"Mark Woosey","avatar_url":"https://avatars-next.observableusercontent.com/b9b2f5fcccef89a5835ba8e427c23e1a832ac39768f32279dded6e469ed03a31","tier":"starter_2024"},"version":1207,"publish_version":1207,"role":null,"authored":false,"authors":[{"type":"individual","id":"983e1527863eaf06","login":"mrkwse","name":"Mark Woosey","avatar_url":"https://avatars-next.observableusercontent.com/b9b2f5fcccef89a5835ba8e427c23e1a832ac39768f32279dded6e469ed03a31","tier":null}],"members":[{"type":"individual","id":"983e1527863eaf06","login":"mrkwse","name":"Mark Woosey","avatar_url":"https://avatars-next.observableusercontent.com/b9b2f5fcccef89a5835ba8e427c23e1a832ac39768f32279dded6e469ed03a31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Silly Season 2020","cells":[{"id":0,"value":"md`# Silly Season 2020\n\nVisualising the changing Formula One driver market through 2020 into 2021\n\n![](https://pbs.twimg.com/media/EX-zgRyWkAEV6Ce?format=jpg&name=large)\n\n

The grid for 2021 is beginning to take shape 👀#F1 pic.twitter.com/lyUPCYyBw6
— Formula 1 (@F1) May 14, 2020

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"sillyChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append('g')\n .call(d3.axisLeft(y).tickPadding(-3))\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(g => g.select('.domain').remove())\n .call(g =>\n g\n .selectAll('.tick > text')\n .attr('transform', `translate(0, ${y.step() / 2})`)\n );\n\n var graph = svg.append('g').attr('id', 'driver-graph');\n\n var edges = graph\n .append('g')\n .attr('id', 'edges')\n .selectAll('g')\n .data(moves)\n .join('g');\n\n var points = graph\n .append('g')\n .attr('id', 'nodes')\n .attr('stroke-width', 4)\n .selectAll('g')\n .data(d3.merge(d3.merge(pointData)))\n .join('g');\n\n drawDrivers(points);\n drawMoves(edges);\n\n yield svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"md`> _Disclaimer: Driver positions within team are denoted by:_\n\n >1. _Listing on F1.com driver lineups for initial lineups_\n >2. _2019 Drivers' Championship final classification for changed lineups_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"teams = ({\n mercedes: { name: 'Mercedes', colour: '#0ca597', rank: 1 },\n ferrari: { name: 'Ferrari', colour: '#da291c', rank: 2 },\n redbull: { name: 'Red Bull Racing Honda', colour: '#001a30', rank: 3 },\n mclaren: { name: 'McLaren Mercedes', colour: 'rgb(255, 158, 27)', rank: 4 },\n renault: { name: 'Renault', colour: 'rgb(255, 204, 51)', rank: 5 },\n alphatauri: {\n name: 'Scuderia AlphaTauri Honda',\n colour: 'rgb(1, 19, 33)',\n rank: 6\n },\n astonmartin: {\n name: 'Aston Martin Mercedes',\n colour: 'rgb(208, 0, 110)',\n rank: 7\n },\n alfaromeo: {\n name: 'Alfa Romeo Racing Ferrari',\n colour: 'rgb(132, 39, 55)',\n rank: 8\n },\n haas: { name: 'Haas Ferrari', colour: '#e6002d', rank: 9 },\n williams: {\n name: 'Williams Mercedes',\n colour: 'rgb(0, 160, 222)',\n rank: 10\n },\n none: {\n name: 'No Seat',\n colour: 'rgb(120, 120, 120)',\n rank: 11\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"teamValues = Object.values(teams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"teamNames = Object.keys(teams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"teamPositions = {\n let limits = y.range();\n let padding = 0;\n limits[0] = limits[0] + (y.step() * y.align() + y.paddingOuter() * y.step());\n limits[1] = limits[1] - (y.step() * y.align() + y.padding() * y.step());\n let range = limits[1] - limits[0];\n return teamNames.map((team, index) => {\n let start = limits[0] + index * y.step();\n return [start + padding, start + Math.round(y.step() / 2) + padding];\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rubbishPermutations = [\n {\n 44: 'mercedes',\n 77: 'mercedes',\n 5: 'ferrari',\n 16: 'ferrari',\n 33: 'redbull',\n 23: 'redbull',\n 55: 'mclaren',\n 4: 'mclaren',\n 3: 'renault',\n 31: 'renault',\n 10: 'alphatauri',\n 26: 'alphatauri',\n 11: 'astonmartin',\n 18: 'astonmartin',\n 7: 'alfaromeo',\n 99: 'alfaromeo',\n 8: 'haas',\n 20: 'haas',\n 63: 'williams',\n 6: 'williams'\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md` # Define the team permutations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"mutations = [\n {\n mercedes: [],\n ferrari: [],\n redbull: [],\n mclaren: [],\n renault: [],\n alphatauri: [],\n astonmartin: [],\n alfaromeo: [],\n haas: [],\n williams: [],\n none: [5]\n },\n {\n mercedes: [],\n ferrari: [],\n redbull: [],\n mclaren: [3],\n renault: [],\n alphatauri: [],\n astonmartin: [],\n alfaromeo: [],\n haas: [],\n williams: [],\n none: []\n },\n {\n mercedes: [],\n ferrari: [55],\n redbull: [],\n mclaren: [],\n renault: [],\n alphatauri: [],\n astonmartin: [],\n alfaromeo: [],\n haas: [],\n williams: [],\n none: [5]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md` Derive x-positions for points given number of divisions for lineup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"timelinePosition = {\n let limits = [margin.left, width - margin.right];\n let range = limits[1] - limits[0];\n let interval = Math.floor(range / permutations.length);\n let padding = 12;\n return permutations.map((permutation, index) => {\n return limits[0] + interval * index + padding;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"md` Derive descriptions of each point, including:\n* x-coordinate according to time\n* y-coordinate according to current team (and rank\\* within team)\n* colour according to current team\n\n_\\* 'rank' is according to listing on [F1.com driver lineups](https://www.formula1.com/en/drivers.html) for prior lineup and 2019 final Drivers' Championship standings for permuted lineups_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"pointData = {\n let items = [];\n return permutations.map((permutation, timeIndex) => {\n return Object.entries(permutation).map(\n ([name, driverNumbers], teamIndex) => {\n return driverNumbers.map((driver, seatPosition) => {\n let driverInfo = { ...drivers[driver] };\n driverInfo.y = teamPositions[teamIndex][seatPosition] + radius;\n driverInfo.x = timelinePosition[timeIndex] + radius;\n driverInfo.colour = teamValues[teamIndex].colour;\n return driverInfo;\n });\n }\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"md` # Process data to draw driver moves\n\nFilter point data to show states according to driver`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"driverStates = Object.values(drivers).map(driver =>\n dupePoint\n .map(time => {\n let item = time\n .map(team => team.filter(seat => seat.name == driver.name))\n .filter(team => team.length > 0)[0];\n\n if (item) {\n return item[0];\n }\n })\n .filter(time => time !== undefined)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"md` Transform driver states to show movement of individual drivers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"moves = {\n let moves = [];\n driverStates.forEach(driver => {\n if (driver.length > 1) {\n for (let index = 0; index < driver.length - 1; index++) {\n moves.push({ source: driver[index], target: driver[index + 1] });\n console.log(driver[index]);\n }\n }\n });\n return moves;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"dupePoint = _.cloneDeep(pointData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"radius = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"md` # Functions to draw dynamic elements of chart\n\n## \\`drawDrivers()\\`\n\n\\`drawDrivers\\` effectively draws the nodes of the graph. It uses the \\`driverStates\\` object to determine location and colour (team association). The addition of driver images is derived from [an example provided by Douglas Duhaime](https://jsfiddle.net/duhaime/q51ok9jc/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"function drawDrivers(points) {\n points\n .append('pattern')\n .attr('id', d => (d.img = DOM.uid('image')).id)\n .attr('class', 'svg-image')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', 1)\n .attr('width', 1)\n .append('image')\n .attr(\n 'x',\n d =>\n (d.image && d.image.offset && d.image.offset.x * radius) || 0 - radius\n )\n .attr(\n 'y',\n d =>\n (d.image && d.image.offset && d.image.offset.y * radius) ||\n 0 - radius / 4\n )\n .attr(\n 'height',\n d => (d.image && d.image.size && d.image.size.h * radius) || 4 * radius\n )\n .attr(\n 'width',\n d => (d.image && d.image.size && d.image.size.w * radius) || 4 * radius\n )\n .attr(\"xlink:href\", d => d.image.url);\n\n points\n .append('circle')\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', radius)\n .attr('fill', d => d.img)\n .attr('stroke', d => d.colour);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"md` ## \\`drawMoves()\\`\n\n\\`drawMoves\\` effectively plots the edges of the graph. The gradient stroke is derived from [Mike Bostock's Sankey example](https://observablehq.com/@d3/sankey-diagram).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"function drawMoves(edges) {\n function getPath(d) {\n // console.log(start);\n let path = d3.path();\n path.moveTo(d.source.x, d.source.y);\n path.lineTo(d.target.x, d.target.y);\n return path;\n }\n\n const gradient = edges\n .append(\"linearGradient\")\n .attr(\"id\", d => (d.uid = DOM.uid(\"link\")).id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"x1\", d => d.source.x)\n .attr(\"x2\", d => d.target.x)\n .attr('y1', d => d.source.y)\n .attr('y2', d => d.target.y);\n\n gradient\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", d => d.source.colour);\n\n gradient\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", d => d.target.colour);\n\n\n edges\n .append('path')\n .attr('d', d => getPath(d))\n .attr('stroke', d => d.uid)\n .attr('stroke-width', 6);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"y.step()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"y.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"q = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md` # Dull Stuff`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"height = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"margin = ({ top: 12, right: 6, bottom: 12, left: 160 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"x = d3\n .scaleLinear()\n .domain([0, 52])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"y = d3\n .scaleBand()\n .domain([...teamValues, {}].map(d => d.name)) // add empty value to domain to pad axis (until a proper alternative is found)\n .range([margin.top, height - margin.bottom])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md` # Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"d3 = require('d3', 'd3-shape')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"