28:null 29:["$","title",null,{"children":"Bubble Chart Animated | Geoffrey Osgood | Observable"}] 2e:Td57,chart = { const tooltip = new Tooltip(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); 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(yearRange[0]), d => d.name) .join("circle") .sort((a, b) => d3.descending(a.bubbleSize, b.bubbleSize)) .attr("cx", d => x(d.xVariable)) .attr("cy", d => y(d.yVariable)) .attr("r", d => radius(d.bubbleSize)) .attr("fill", d => color(d.group)) .call(circle => circle.append("title") .text(d => [d.name, d.group].join("\n"))); circle.on("mouseover", (event, d) => tooltip.show(d)) .on("mouseout", () => tooltip.hide()) if (maxBubbleSize > 0) { let valuesToShow = [0, Math.ceil(maxBubbleSize/2), Math.ceil(maxBubbleSize)] let xCircle = width - margin.right + 50 let xMarker = width - margin.right + 110 let yCircle = (height-margin.top)/2 svg .selectAll("legend") .data(valuesToShow) .enter() .append("circle") .attr("cx", xCircle) .attr("cy", d => yCircle - radius(d) ) .attr("r", d => radius(d) ) .style("fill", "none") .attr("stroke", "black") // Add legend: segments svg .selectAll("legend") .data(valuesToShow) .enter() .append("line") .attr('x1', d => xCircle + radius(d) ) .attr('x2', xMarker) .attr('y1', d => yCircle - radius(d) ) .attr('y2', d => yCircle - radius(d) ) .attr('stroke', 'black') .style('stroke-dasharray', ('2,2')) // Add legend: labels svg .selectAll("legend") .data(valuesToShow) .enter() .append("text") .attr('x', xMarker) .attr('y', d => yCircle - radius(d) ) .text( d => d ) .style("font-size", 10) .attr('alignment-baseline', 'middle') svg .append("text") .attr('x', xCircle) .attr('y', yCircle - 2*radius(valuesToShow[2])-50) .text( "Mean number" ) .attr("dy", 0) .style("font-size", "1rem") .attr("text-anchor", "middle") svg .append("text") .attr('x', xCircle) .attr('y', yCircle - 2*radius(valuesToShow[2])-50) .text( "per" ) .attr("dy", "1em") .style("font-size", "1rem") .attr("text-anchor", "middle") svg .append("text") .attr('x', xCircle) .attr('y', yCircle - 2*radius(valuesToShow[2])-50) .text( "observation" ) .attr("dy", "2em") .style("font-size", "1rem") .attr("text-anchor", "middle") } svg.append(() => tooltip.node); return Object.assign(svg.node(), { update(data) { if (data) { circle.data(data, d => d.name) .sort((a, b) => d3.descending(a.bubbleSize, b.bubbleSize)) .attr("cx", d => x(d.xVariable)) .attr("cy", d => y(d.yVariable)) .attr("r", d => radius(d.bubbleSize)); circle.on("mouseover", (event, d) => tooltip.show(d)) .on("mouseout", () => tooltip.hide()) } } }); }2f:T430,dataObj = { let dataObj = teamData.map(function(d) { let dates = [], i = 0; while (!dates[0]) { dates = d.stats[i].stats[yVariable].map(obs => obs[0]) i = i + 1 } return { dropdown: d[dropdown], series: d.stats.map(function(d) { if (timeUnits === "day") { d.stats[xVariable].forEach(e => e[0] = new Date(e[0])) d.stats[bubbleSize].forEach(e => e[0] = new Date(e[0])) d.stats[yVariable].forEach(e => e[0] = new Date(e[0])) } return { name: d.name, group: d[group], xVariable: d.stats[xVariable], bubbleSize: bubbleSize ? d.stats[bubbleSize] : [1, 7], yVariable: d.stats[yVariable] } }), dates: dates.map(function(date) { if (timeUnits === "day") return new Date(date) return date; }) } }) return dataObj }30:[{"id":"c9ee00a92743e796752ac3229b564292fcd25020b48857e2986ea7c3b446264372bab26efe641d007fafa2acd63afd20b09f82d8d8b4c950894926fa4ebc4637","href":"https://static.observableusercontent.com/files/c9ee00a92743e796752ac3229b564292fcd25020b48857e2986ea7c3b446264372bab26efe641d007fafa2acd63afd20b09f82d8d8b4c950894926fa4ebc4637","name":"resultsR@5.json","type":"application/json","lastModified":1616192090793.11,"size":467407}] 2c:{"id":"ba746a3f18fe9cc9","slug":"bubble-chart-animated","title":"Bubble Chart Animated","thumbnail":"c12b8f7b073ecc12fadbfb809c43629e0d791bb358faddae9172aa19bff7c88e","access_level":"public","create_time":"$D2021-03-04T14:24:25.729Z","update_time":"$D2021-08-13T19:13:25.409Z","view_time":null,"first_public_time":"$D2021-03-10T20:11:54.926Z","has_unpublished_edits":null,"fork":{"id":"ee2086412849cb2d","slug":"the-wealth-health-of-nations","title":"The Wealth & Health of Nations","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"adcc1853ed6878eb","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":"starter_2024"},"version":773,"publish_version":773,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f7fff9804f75816","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":null}],"members":[{"type":"individual","id":"0f7fff9804f75816","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bubble Chart Animated","cells":[{"id":0,"value":"md`# Bubble Chart Animated`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"selector = {\n \n let groupSelector = dataObj.map(d => d.dropdown)\n \n let div = d3.create('div');\n \n let selector = div.append(\"select\")\n .attr(\"class\", \"selector\")\n .selectAll('option')\n .data([...groupSelector])\n .enter()\n .append('option')\n .text(function (d) { \n return d; })\n .attr(\"value\", function (d) { \n return d; })\n .append('option')\n .attr('value', 'All')\n .property('selected', true)\n \n div.on('change', function() {\n mutable selectedGroup = d3.select(this).select(\".selector\").property('value');\n });\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof year = Scrubber(scrubberRange, {format: scrubberFormat, loop: false, delay: 500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"scrubberRange ={\n if (timeUnits === \"day\") return d3.range(yearRange[0], yearRange[1], 267840000)\n return d3.range(yearRange[0], yearRange[1], 0.1)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"function scrubberFormat(x) {\n if (timeUnits === \"day\") return formatDate(x)\n return Math.floor(x)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"legend = {\n const id = DOM.uid().id;\n return html`

${color.domain().map(group => html`${document.createTextNode(group)}`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"class Tooltip {\n constructor() {\n this._ind = svg``;\n this.node = svg`\n \n ${this._ind}\n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.xVariable)},${y(d.yVariable)})`);\n this._ind.textContent = d.name;\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"update = chart.update(currentData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"currentData = dataAt(year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"x= d3.scaleLinear([minX, maxX], [margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"maxX = {\n if (data[0].yVariable.length>1) {\n return(Math.max(...[].concat.apply([], data.map(sp => sp.xVariable.map(year => year[1]))))); \n } else return(Math.max(...[].concat.apply([], data.map(sp => sp.xVariable[0]))));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"minX = {\n if (data[0].yVariable.length>1) {\n return Math.min(...[].concat.apply([], data.map(sp => sp.xVariable.map(year => year[1]))));\n } else return(Math.min(...[].concat.apply([], data.map(sp => sp.xVariable[0]))));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"maxY = {\n if (data[0].yVariable.length>1) {\n return Math.max(...[].concat.apply([], data.map(sp => sp.yVariable.map(year => year[1]))));\n } else return(Math.max(...[].concat.apply([], data.map(sp => sp.yVariable[0]))));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"minY = {\n if (data[0].yVariable.length>1) {\n return Math.min(...[].concat.apply([], data.map(sp => sp.yVariable.map(year => year[1]))));\n } else return(Math.min(...[].concat.apply([], data.map(sp => sp.yVariable[0]))));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"y = d3.scaleLinear([minY, maxY], [height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"maxBubbleSize = Math.max(...[].concat.apply([], data.map(sp => sp.bubbleSize.map(year => year[1]))).filter(num => !isNaN(num))); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"radius = {\n let maxBubbleSize = Math.max(...[].concat.apply([], data.map(sp => sp.bubbleSize.map(year => year[1]))).filter(num => !isNaN(num))); \n if (maxBubbleSize < 0) {\n maxBubbleSize = Math.max(...[].concat.apply([], data.map(sp => sp.bubbleSize[1])).filter(num => !isNaN(num))); \n return(d3.scaleSqrt([0, maxBubbleSize], [0, maxBubbleSize]))\n } else return(d3.scaleSqrt([0, maxBubbleSize], [5, width / 24]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10).unknown(\"black\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \",\"))\n .call(g => g.append(\"text\")\n .attr(\"x\", width-margin.right)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(xLabel))\n .style(\"font-size\", \"1.5rem\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", margin.top-20)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yLabel))\n .style(\"font-size\", \"1.5rem\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function dataAt(year) {\n if (data[0].yVariable.length>1) {\n return data.map(d => ({\n name: d.name,\n group: d.group,\n xVariable: Number(valueAt(d.xVariable, year)),\n bubbleSize: Number(Array.isArray(d.bubbleSize[0]) ? valueAt(d.bubbleSize, year) : d.bubbleSize[1]),\n yVariable: Number(valueAt(d.yVariable, year))\n }));\n } else {\n return data.map(d => ({\n name: d.name,\n group: d.group,\n xVariable: d.xVariable[0],\n bubbleSize: d.bubbleSize[1],\n yVariable: d.yVariable[0]\n }));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function valueAt(values, year) {\n const i = bisectYear(values, year, 0, values.length - 1);\n\n const a = values[i];\nconsole.log(a)\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"mutable selectedGroup = \"All\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"timeUnits = \"year\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"yearRange = {\n if (data[0].yVariable.length>1) {\n return [\n Math.min(...[].concat.apply([], dates)),\n Math.max(...[].concat.apply([], dates))\n ]\n } else return [0,0]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"units = 0.1*(1598940000000 - 1593583200000)/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"// yearRange = {\n// let yearRange = [];\n// if (data[0].yVariable.length>1) {\n// yearRange = [\n// Math.min(...[].concat.apply([], dates)),\n// Math.max(...[].concat.apply([], dates))\n// ]\n// } else yearRange = [0,0]\n \n// if (timeUnits === \"day\") return d3.timeMonths(yearRange[0], yearRange[1]+1) \n// else return d3.range(yearRange[0], yearRange[1], 0.1);\n \n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"dates = {\n if (data[0].yVariable.length>1) {\n let dates = filteredDataObj.dates;\n \n if (timeUnits===\"day\") dates = dates.map(date => new Date(date));\n if (timeUnits===\"month\") dates = dates.map(date => parseTime((date), false))\n if (timeUnits===\"year\") dates = dates.map(date => parseTime(date, true).getFullYear())\n \n return dates;\n } else return [0]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = {\n let data = filteredDataObj.series;\n data = data.filter(d => (d.xVariable.length>0 && d.yVariable.length>0))\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"filteredDataObj = dataObj.filter(d => d.dropdown == selectedGroup)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"teamData = {\n \n let teamsResults = await FileAttachment(\"resultsR@5.json\").json()\n \n for (let zone of teamsResults) {\n zone.zone = zone.zone[0];\n zone.stats.forEach(function(sp){\n sp.name = sp.name[0],\n sp.group = sp.group[0]\n })\n }; \n return teamsResults;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"function parseTime(time, useYear) {\n let maketime = new Date(\"1990-01-01 00:01\");\n if (useYear) {\n maketime.setFullYear(time);\n } else {\n maketime.setMonth(time-1);\n }\n return maketime;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"function formatDate(time) {\n if (timeUnits === \"day\") return d3.timeFormat(\"%Y-%m\")(time)\n if (timeUnits === \"month\") return d3.timeFormat(\"%B\")(time)\n if (timeUnits === \"year\") return d3.timeFormat(\"%Y\")(time)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"bisectYear = d3.bisector(([year]) => year).left","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"group = \"group\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"yVariable = \"recentTrend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"xVariable = \"overallTrend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"dropdown = \"zone\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"xLabel = \"Overall trend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"yLabel = \"Recent trend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"bubbleSize = \"PopN\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"margin = {\n return {top: 40, right: 120, bottom: 50, left: 70}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"