31:T844,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 yAxis const yAxisContainer = wrapper .append("g") .attr("transform", `translate(-10,0)`); const circles = wrapper .append("g") .attr("className", "circles") .selectAll("circle") .data(games) .join("circle") .attr("r", (d) => r(d.runs)) .attr("fill", (d) => color(d.win_loss)) .attr("x", (d) => x(d.runs)) .attr("y", (d) => y(d.year) + y.bandwidth() / 2); 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); } }); }32:[{"id":"e9547308f659f7a8c8085e1081d4d6205255f3f2ae1386e4e6fcfb432ed02d929616458b25e7456e81ba4cd9a2696a18beacfb84cf8e71b2748bb00b82445980","href":"https://static.observableusercontent.com/files/e9547308f659f7a8c8085e1081d4d6205255f3f2ae1386e4e6fcfb432ed02d929616458b25e7456e81ba4cd9a2696a18beacfb84cf8e71b2748bb00b82445980","name":"dodgers_games_2012-2021.csv","type":"text/csv","lastModified":1662040092281.047,"size":153759},{"id":"16642eb73ca127b5184ce0fcff0a78bb26fd767fcdd02a33340b0d1b0d993e5507ff14ab3cdb65af0dd400c271c8e8fb13e9ad80c431e6aa153a2b1d9d30fe14","href":"https://static.observableusercontent.com/files/16642eb73ca127b5184ce0fcff0a78bb26fd767fcdd02a33340b0d1b0d993e5507ff14ab3cdb65af0dd400c271c8e8fb13e9ad80c431e6aa153a2b1d9d30fe14","name":"running_runtastic.csv","type":"text/csv","lastModified":1662040092281.047,"size":9106}] 2f:{"title":"Bubble Chart - Los Angeles Dodgers, wins/losses and runs per game","cells":[{"id":0,"value":"md`# Bubble Chart - Los Angeles Dodgers, wins/losses and runs per game`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`The DRAFT chart visualizes how many runs they scored in each game over the last decade. Inspired by [Christian Burkhart](https://observablehq.com/@ch-bu/bubble-chart-split-my-running-by-year).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof split = {\n // https://observablehq.com/@mbostock/form-input\n const form = html``;\n form.oninput = () =>\n (form.value =\n Array.from(form.querySelectorAll(\"input\")).find((d) => d.checked)\n .value === \"0\");\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"median = d3.median(games, (d) => d.runs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"medianHits = d3.median(games, (d) => d.hits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"medianRuns = d3.median(games, (d) => d.runs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"medianHomeRuns = d3.median(games, (d) => d.home_runs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`Height of wrapper of bubble chart when split`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"splitHeight = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`Height of wrapper of bubble chart when not split.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"noSplitHeight = 500","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":101,"value":"chart.update(split);","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"force = d3\n .forceSimulation(games)\n .force(\"charge\", d3.forceManyBody().strength(0))\n .force(\n \"x\",\n d3.forceX().x((d) => x(d.runs))\n )\n .force(\n \"y\",\n d3.forceY((d) => y(d.year))\n )\n .force(\n \"collision\",\n d3.forceCollide().radius((d) => r(d.hits))\n )","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":47,"value":"groups = d3.group(games, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"x = d3.scaleLinear()\n .domain(d3.extent(games, d => d.hits))\n .range([0, innerWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"y = d3.scaleBand()\n .domain(['All'])\n .range([noSplitHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(games, d => d.runs))\n .range([1, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"xAxis = (g) =>\n g\n .call(d3.axisTop(x).tickFormat((d) => `${d} runs`))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .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 many runs they scored →\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":229,"value":"color = d3.scaleOrdinal(\n d3.extent(games, (d) => d.win_loss),\n d3.schemeTableau10\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"innerWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({top: 30, right: 30, left: 120, bottom: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Libraries and data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"yearGroups = d3.group(games, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"gameYears = d3.group(games, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"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":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"games = d3.csvParse(\n await FileAttachment(\"dodgers_games_2012-2021.csv\").text(),\n (d) => {\n return {\n year: +d.year,\n runs: +d.runs_scored,\n home_runs: +d[\"hr\"],\n hits: +d[\"h\"],\n win_loss: d[\"win_loss\"]\n };\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}