3e:null 3f:["$","title",null,{"children":"Bubble Chart - Split my Running by Year | Trang Vu | Observable"}] 45:Tabd,chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, noSplitHeight + margin.top + margin.bottom]); const wrapper = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Add x-Axis wrapper.append('g') .call(xAxis); // Add median speed const medianLine = wrapper.append('line') .attr('x1', x(median)) .attr('x2', x(median)) .attr('y1', 10) .attr('y2', noSplitHeight) .attr('stroke', '#ccc'); // Add median text const medianText = wrapper.append('text') .attr('x', x(median) + 5) .attr('y', 25) .attr('font-size', '11px') .text('Median speed'); // add yAxis const yAxisContainer = wrapper.append('g') .attr('transform', `translate(-10,0)`); const circles = wrapper.append('g') .attr('className', 'circles') .selectAll('circle') .data(running) .join('circle') .attr('r', d => r(d.distance)) .attr('fill', d => color(d.speed)) .attr('x', d => x(d.speed)) .attr('y', d => y(d.year) + y.bandwidth() / 2) //.attr('stroke', 'purple'); /*d3.timeout(() => { for (var i = 0, n = Math.ceil(Math.log(force.alphaMin()) / Math.log(1 - force.alphaDecay())); i < n; ++i) { force.tick(); circles .attr('cx', d => d.x) .attr('cy', d => d.y); } })*/ force.on('tick', () => { circles .transition() .ease(d3.easeLinear) .attr('cx', d => d.x) .attr('cy', d => d.y); }) invalidation.then(() => force.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? splitHeight : noSplitHeight; let years = [...yearGroups.keys()].sort() // Update height of svg object const t = d3.transition().duration(750); svg.transition(t).attr('viewBox', [0, 0, width, height]); // Update domain of y-Axis y.domain(split ? years : ['All']); y.range(split ? [splitHeight - margin.top - margin.bottom, 0] : [noSplitHeight - margin.top - margin.bottom, 0]); yAxisContainer.call(yAxis, y, split ? years : ['All']) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('.tick line').remove()); // Update simulation force.force('y', split ? d3.forceY(d => y(d.year) + y.bandwidth() / 2) : // If split by year align by year d3.forceY((noSplitHeight - margin.top - margin.bottom) / 2)); // If not split align to middle //force.nodes(running); force.alpha(1).restart(); // Update median line medianLine.transition(t).attr('y2', split ? splitHeight - 20 : noSplitHeight); } }); }46:Tabe,chart1 = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, noSplitHeight + margin.top + margin.bottom]); const wrapper = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Add x-Axis wrapper.append('g') .call(xAxis); // Add median speed const medianLine = wrapper.append('line') .attr('x1', x(median)) .attr('x2', x(median)) .attr('y1', 10) .attr('y2', noSplitHeight) .attr('stroke', '#ccc'); // Add median text const medianText = wrapper.append('text') .attr('x', x(median) + 5) .attr('y', 25) .attr('font-size', '11px') .text('Median speed'); // add yAxis const yAxisContainer = wrapper.append('g') .attr('transform', `translate(-10,0)`); const circles = wrapper.append('g') .attr('className', 'circles') .selectAll('circle') .data(running) .join('circle') .attr('r', d => r(d.distance)) .attr('fill', d => color(d.speed)) .attr('x', d => x(d.speed)) .attr('y', d => y(d.year) + y.bandwidth() / 2) //.attr('stroke', 'purple'); /*d3.timeout(() => { for (var i = 0, n = Math.ceil(Math.log(force.alphaMin()) / Math.log(1 - force.alphaDecay())); i < n; ++i) { force.tick(); circles .attr('cx', d => d.x) .attr('cy', d => d.y); } })*/ force.on('tick', () => { circles .transition() .ease(d3.easeLinear) .attr('cx', d => d.x) .attr('cy', d => d.y); }) invalidation.then(() => force.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? splitHeight : noSplitHeight; let years = [...yearGroups.keys()].sort() // Update height of svg object const t = d3.transition().duration(750); svg.transition(t).attr('viewBox', [0, 0, width, height]); // Update domain of y-Axis y.domain(split ? years : ['All']); y.range(split ? [splitHeight - margin.top - margin.bottom, 0] : [noSplitHeight - margin.top - margin.bottom, 0]); yAxisContainer.call(yAxis, y, split ? years : ['All']) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('.tick line').remove()); // Update simulation force.force('y', split ? d3.forceY(d => y(d.year) + y.bandwidth() / 2) : // If split by year align by year d3.forceY((noSplitHeight - margin.top - margin.bottom) / 2)); // If not split align to middle //force.nodes(running); force.alpha(1).restart(); // Update median line medianLine.transition(t).attr('y2', split ? splitHeight - 20 : noSplitHeight); } }); }47:Tabe,chart2 = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, noSplitHeight + margin.top + margin.bottom]); const wrapper = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Add x-Axis wrapper.append('g') .call(xAxis); // Add median speed const medianLine = wrapper.append('line') .attr('x1', x(median)) .attr('x2', x(median)) .attr('y1', 10) .attr('y2', noSplitHeight) .attr('stroke', '#ccc'); // Add median text const medianText = wrapper.append('text') .attr('x', x(median) + 5) .attr('y', 25) .attr('font-size', '11px') .text('Median speed'); // add yAxis const yAxisContainer = wrapper.append('g') .attr('transform', `translate(-10,0)`); const circles = wrapper.append('g') .attr('className', 'circles') .selectAll('circle') .data(running) .join('circle') .attr('r', d => r(d.distance)) .attr('fill', d => color(d.speed)) .attr('x', d => x(d.speed)) .attr('y', d => y(d.year) + y.bandwidth() / 2) //.attr('stroke', 'purple'); /*d3.timeout(() => { for (var i = 0, n = Math.ceil(Math.log(force.alphaMin()) / Math.log(1 - force.alphaDecay())); i < n; ++i) { force.tick(); circles .attr('cx', d => d.x) .attr('cy', d => d.y); } })*/ force.on('tick', () => { circles .transition() .ease(d3.easeLinear) .attr('cx', d => d.x) .attr('cy', d => d.y); }) invalidation.then(() => force.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? splitHeight : noSplitHeight; let years = [...yearGroups.keys()].sort() // Update height of svg object const t = d3.transition().duration(750); svg.transition(t).attr('viewBox', [0, 0, width, height]); // Update domain of y-Axis y.domain(split ? years : ['All']); y.range(split ? [splitHeight - margin.top - margin.bottom, 0] : [noSplitHeight - margin.top - margin.bottom, 0]); yAxisContainer.call(yAxis, y, split ? years : ['All']) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('.tick line').remove()); // Update simulation force.force('y', split ? d3.forceY(d => y(d.year) + y.bandwidth() / 2) : // If split by year align by year d3.forceY((noSplitHeight - margin.top - margin.bottom) / 2)); // If not split align to middle //force.nodes(running); force.alpha(1).restart(); // Update median line medianLine.transition(t).attr('y2', split ? splitHeight - 20 : noSplitHeight); } }); }48:[{"id":"16642eb73ca127b5184ce0fcff0a78bb26fd767fcdd02a33340b0d1b0d993e5507ff14ab3cdb65af0dd400c271c8e8fb13e9ad80c431e6aa153a2b1d9d30fe14","href":"https://static.observableusercontent.com/files/16642eb73ca127b5184ce0fcff0a78bb26fd767fcdd02a33340b0d1b0d993e5507ff14ab3cdb65af0dd400c271c8e8fb13e9ad80c431e6aa153a2b1d9d30fe14","name":"running_runtastic.csv","type":"text/csv","lastModified":1686735599846.639,"size":9106}] 43:{"id":"36d5b9a00e453d10","slug":null,"title":"Bubble Chart - Split my Running by Year","thumbnail":"c358af0c5c01bc3e1bea8e815fcedc2acd4b30a32e07f7fbbd3fa6008ce7f63c","access_level":"public","create_time":"$D2023-06-14T09:39:59.846Z","update_time":"$D2023-06-14T17:08:17.145Z","view_time":null,"first_public_time":"$D2023-06-14T09:39:59.846Z","has_unpublished_edits":null,"fork":{"id":"5fb11e9d5e0ead0a","slug":"bubble-chart-split-my-running-by-year","title":"Bubble Chart - Split my Running by Year","owner":{"id":"d40485fce5325677","login":"ch-bu","name":"Christian Burkhart"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b30d603e6a04b823","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":"starter_2024","bio":"A software product designer with passion for data storytelling","following":false},"version":309,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"920ef950194a10f7","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":null,"bio":"A software product designer with passion for data storytelling","following":false}],"members":[{"type":"individual","id":"920ef950194a10f7","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bubble Chart - Split my Running by Year","cells":[{"id":0,"value":"md`# Bubble Chart - Split my Running by Year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`The chart visualizes how fast I ran in the past seven years. Inspired by [Ben Ayre](https://observablehq.com/@bayre/splitting-the-bunch).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof split = {\n // https://observablehq.com/@mbostock/form-input\n const form = html``;\n form.oninput = () => form.value = Array.from(form.querySelectorAll(\"input\"))\n .find(d => d.checked).value === \"1\"\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"median = d3.median(running, d => d.speed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`Height of wrapper of bubble chart when split`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"splitHeight = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`Height of wrapper of bubble chart when not split.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"noSplitHeight = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`The update function is called whenever a user changes between the split and the non-split format (see radio buttons above).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"chart.update(split);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"force = d3.forceSimulation(running)\n .force('charge', d3.forceManyBody().strength(0))\n .force('x', d3.forceX().x(d => x(d.speed)))\n .force('y', d3.forceY(d => y(d.year)))\n .force('collision', d3.forceCollide().radius(d => r(d.distance) + 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`We need groups in order to change the values of the y-axis. If we split the bubbles, the y-axis displays these years: [...yearGroups.keys()].sort().`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"groups = d3.group(running, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"x = d3.scaleLinear()\n .domain(d3.extent(running, d => d.speed))\n .range([0, innerWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y = d3.scaleBand()\n .domain(['All'])\n .range([noSplitHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(running, d => d.distance))\n .range([1, 10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"xAxis = g => g\n .call(d3.axisTop(x)\n .tickFormat(d => `${d} km/h`))\n .call(g => g.select('.domain').remove())\n .call(g => g.append('text')\n .attr('x', innerWidth)\n .attr('y', 20)\n .attr('font-weight', 'bold')\n .attr('fill', 'currentColor')\n .attr('text-anchor', 'end')\n .text('How fast I ran →'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"yAxis = g => g\n .call(d3.axisLeft(y).ticks(8))\n .call(g => g.select('.domain').remove())\n .call(g => g.selectAll('.tick line').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"color = d3.scaleSequential(d3.extent(running, d => d.speed), d3.interpolateOrRd);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"innerWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"margin = ({top: 30, right: 30, left: 120, bottom: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Libraries and data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"yearGroups = d3.group(running, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"running = d3.csvParse(await FileAttachment('running_runtastic.csv').text(), d => {\n return {\n year: +d.year,\n distance: +d.distance,\n speed: +d['average_speed']\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"