30:T5c1,linePlotWithRegression = { const svg = d3.select(DOM.svg(width, height)); let W = width - 2 * margin, H = height - 2 * margin; const xDomain = d3.extent(myStateData, d => d[0]); const yDomain = d3.extent(myStateData, d => d[1]); const xScale = d3 .scaleLinear() .domain(xDomain) .range([0, W]) .nice(); const yScale = d3 .scaleLinear() .domain(yDomain) .range([H - 0.5, 0.5]) .nice(); const generator = d3 .line() .curve(d3.curveBasis) .defined(d => d[1] && d[1] > yDomain[0]) .x(d => xScale(d[0])) .y(d => yScale(d[1])); const chart = svg .append("g") .attr("transform", `translate(${margin},${margin})`); const colorScale = d3.scaleOrdinal().range(d3.schemeCategory10); chart .selectAll("path") .data([myStateData, regressionOut, myStateDataMovingAverage]) .join("path") .attr("class", "regression") .attr("d", generator) .style("stroke", (d, i) => colorScale(i)) .style("fill", "none"); const xAxis = d3.axisBottom(xScale).tickSize(H + 10); const yAxis = d3 .axisLeft(yScale) .tickSize(W + 10) .ticks(5, "s"); chart .append("g") .attr("class", "axis") .call(xAxis) .selectAll(".tick") .classed("baseline", d => d == 0); chart .append("g") .attr("class", "axis") .attr("transform", `translate(${W})`) .call(yAxis) .selectAll(".tick") .classed("baseline", d => d == 0); return svg.node(); }31:T451,{ const [svgNode, svg] = getSVG(); const pointScale = d3 .scalePoint() .domain(randomData.map(d => d[0])) .range([0, H]) .padding(0.2) .round(true); const twitterIconWidth = pointScale.step(); const valueScale = d3 .scaleLinear() .domain(d3.extent(randomData, d => d[1])) .range([0, W - twitterIconWidth]) .nice(); svg .append("g") .style("stroke", "steelblue") .style("stroke-width", "2") .selectAll("g") .data(randomData) .join("line") .attr("x2", d => valueScale(d[1])) .attr("y1", d => pointScale(d[0])) .attr("y2", d => pointScale(d[0])); svg .append("g") .style("fill", "steelblue") .selectAll("g") .data(randomData) .join("g") .attr( "transform", d => `translate(${valueScale(d[1])},${pointScale(d[0]) - pointScale.step() / 2})` ) .call(drawTweeterIcon, twitterIconWidth); svg.append("g").call(d3.axisLeft().scale(pointScale)); svg .append("g") .call(d3.axisTop().scale(valueScale)) .select(".domain") .remove(); return svgNode; }32:T5ba,{ const [svgNode, svg] = getSVG(); const bandScale = d3 .scaleBand() .domain(randomData.map(d => d[0])) .range([0, H / 2]) .padding(0.2); const valueScale = d3 .scaleLinear() .domain(d3.extent(randomData, d => d[1])) .range([0, 2 * Math.PI]) .nice(); const colorScale = d3 .scaleOrdinal() .domain(randomData.map(d => d[0])) .range(d3.schemeCategory10); const arcGenerator = d3 .arc() .startAngle(0) .endAngle(d => valueScale(d[1])) .outerRadius(d => H / 2 - bandScale(d[0])) .innerRadius(d => H / 2 - bandScale(d[0]) - bandScale.bandwidth()); const radialChart = svg .append("g") .attr("transform", `translate(${W / 2},${H / 2})`); const ticks = valueScale.ticks(); const radialAxis = radialChart .append("g") .style('stroke', 'lightgrey') .selectAll("g") .data(ticks.slice(0, ticks.length - 1)) .join("g") .attr("transform", d => `rotate(${(valueScale(d) * 180) / Math.PI})`); radialAxis.append("line").attr("y2", -H / 2); radialAxis .append("text") .attr("y", -H / 2) .style("text-anchor", "middle") .text(d => d); radialChart .append("g") .selectAll("path") .data(randomData) .join("path") .style("fill", d => colorScale(d[0])) .attr("d", arcGenerator); radialChart .append("g") .attr("transform", `translate(0,${-H / 2})`) .call(d3.axisLeft().scale(bandScale)); return svgNode; }33:T628,vbarPlot = { let svgElement, svg; [svgElement, svg] = getSVG(); const xScale = d3 .scaleBand() .domain(dates) .range([0, W]) .padding(0.2); const yScale = d3 .scaleLinear() .domain([0, d3.max(stateDataJan.map(d => d[1]))]) .range([H, 0]) .nice(); const yAxis = d3 .axisLeft(yScale) .tickSize(-W) .tickFormat(d3.format(".2s")); const xAxis = d3 .axisBottom(xScale) .tickFormat(d3.timeFormat("%a %d")) .tickValues(xScale.domain().filter((d, i) => !(i % 3))); svg .append("g") .attr("transform", `translate(0,${H})`) .call(xAxis); function customYAxis(g) { g.call(yAxis); g.select(".domain").remove(); g.selectAll(".tick line") .style("stroke-opacity", 0.2) .attr("stroke-dasharray", "2,2"); g.selectAll(".tick text").attr("dx", -2); } svg.append("g").call(customYAxis); svg .selectAll("rect") .data(stateDataJan) .join("rect") .attr("y", d => yScale(d[1])) .attr("x", d => xScale(d[0])) .attr("height", d => H - yScale(d[1])) .attr("width", xScale.bandwidth()) .style("fill", "lightgrey") .append("title") .text(d => `${d3.timeFormat("%x")(d[0])}: ${choices.column} ${d[1]}`); svg .append("path") .datum(fiveDayRunningAv) .attr( "d", d3 .line() .x(d => xScale(d[0]) + xScale.bandwidth() / 2) .y(d => yScale(d[1])) ) .style("fill", "none") .style("stroke-dasharray", 4) .style("stroke-width", 5) .style("stroke", "Teal"); return svgElement; }34:T4e8,{ const [svgNode, svg] = getSVG(); const data = olympicData.slice(0, 10); const countries = data.map(d => d.Country); const countryScale = d3 .scaleBand() .domain(countries) .range([0, W]) .padding(0.2); svg .append("g") .attr("transform", `translate(0,${H})`) .call(d3.axisBottom().scale(countryScale)); const yScale = d3 .scaleLinear() .domain([0, 1050]) .range([H, 0]) .nice(); const medals = ["Gold", "Silver", "Bronze"]; const colorScale = d3 .scaleOrdinal() .domain(medals) .range(["#FFD700", "#C0C0C0", "#cd7f32"]); const xScale = d3 .scaleBand() .domain(medals) .range([0, countryScale.bandwidth()]) .padding(0.05); svg.append("g").call(d3.axisLeft().scale(yScale)); svg .append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${countryScale(d.Country)},0)`) .selectAll("rect") .data(d => [["Gold", d.Gold], ["Silver", d.Silver], ["Bronze", d.Bronze]]) .join("rect") .attr("x", d => xScale(d[0])) .attr("y", d => yScale(d[1])) .attr("width", d => xScale.bandwidth()) .attr("height", d => H - yScale(d[1])) .style("fill", d => colorScale(d[0])); return svgNode; }35:T4da,{ const [svgNode, svg] = getSVG(); const data = olympicData.slice(0, 10); const countryScale = d3 .scaleBand() .domain(data.map(d => d.Country)) .range([0, W]) .padding(0.1); const yScale = d3 .scaleLinear() .domain([0, 1050]) .range([H, 0]) .nice(); const medals = ["Gold", "Silver", "Bronze"]; const xScale = d3 .scaleBand() .domain(medals) .range([0, countryScale.bandwidth()]) .padding(0.05); const colorScale = d3 .scaleOrdinal() .domain(medals) .range(["#FFD700", "#C0C0C0", "#cd7f32"]); svg.append("g").call(d3.axisLeft().scale(yScale)); svg .append("g") .attr("transform", `translate(0,${H})`) .call(d3.axisBottom().scale(countryScale)); svg .append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${countryScale(d.Country)},0)`) .selectAll("rect") .data(d => medals.map(medal => [medal, d[medal]])) .join("rect") .attr("x", d => xScale(d[0])) .attr("y", d => yScale(d[1])) .attr("width", d => xScale.bandwidth()) .attr("height", d => H - yScale(d[1])) .style("fill", d => colorScale(d[0])); svg.append("g").call(legend, colorScale); return svgNode; }36:[{"id":"27c42fc64a49d737e0f7fd24e3c87f9fbbcf60b11ef6930c9e528afb1af4c933f963abf19786a15d51ac244cbd69d7b1c42dbea76b56f91be85a32872c4bdefc","href":"https://static.observableusercontent.com/files/27c42fc64a49d737e0f7fd24e3c87f9fbbcf60b11ef6930c9e528afb1af4c933f963abf19786a15d51ac244cbd69d7b1c42dbea76b56f91be85a32872c4bdefc","name":"olympic@1.csv","type":"text/csv","lastModified":1611798350950.742,"size":4435}] 2e:{"title":"Week 3","cells":[{"id":0,"value":"md`# Week 3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"md`## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"md`### So-Fetch: https://observablehq.com/@alecglassford/so-fetch `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"data = d3.csvParse(\n await (await soFetch(\n \"https://covidtracking.com/data/download/all-states-history.csv\"\n )).text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"md`### Regression plot\nUses d3-regression. See examples from : https://observablehq.com/@harrystevens/introducing-d3-regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"myRegression = d3\n .regressionQuad()\n //.regressionPoly()\n .x(d => d[0])\n .y(d => d[1])\n //.order(2)\n .domain([40, 340])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"myStateData[360]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"myStateData = data\n .filter(d => d.state == stateNameToAbbreviation[choices.state] && d.death)\n .map(d => [d.date, d.deathIncrease]) //d.death\n .reverse()\n .map((d, i) => [i, d[1]])\n//data.map((d, i) => [i, d[1]]) //data.filter(d=>d.state==//","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"myStateDataMovingAverage = movingAverage(\n myStateData.map(d => d[1]),\n 30\n).map((d, i) => [i, d])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"regressionOut = myRegression(myStateData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"md`#### The regression shown below (in red) is described by the equation ${tex`y = ${regressionOut.a.toFixed(\n 3\n)}x^2 + ${regressionOut.b.toFixed(3)}x ${regressionOut.c.toFixed(\n 3\n)}`}. The coefficient of determination, or ${tex`R^2`}, is ${regressionOut.rSquared.toFixed(\n 3\n)}. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"movingAverage = (data, window) => {\n const result = Array(data.length).fill(undefined);\n if (data.length < window) {\n return result;\n }\n let sum = 0;\n for (let i = 0; i < window; ++i) {\n sum += data[i];\n }\n let count = window - 1;\n result[count++] = sum / window;\n const steps = data.length - window;\n for (let i = 0; i < steps; ++i) {\n sum -= data[i];\n sum += data[i + window];\n result[count++] = sum / window;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"movingAverage(d3.range(10), 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1573,"value":"md`## This week's main topic: Bar Plot and Its variations.\nPossibly, some iteraction.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"md`### Horizontal Bar Chart\nUsing d3.scaleBand. See: https://observablehq.com/@d3/d3-scaleband`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"randomData","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"{\n const [svgNode, svg] = getSVG();\n const yScale = d3\n .scaleLinear()\n .domain([0, d3.max(randomData, d => d[1])])\n .range([H, 0])\n .nice();\n const xScale = d3\n .scaleBand()\n .domain(randomData.map(d => d[0]))\n .range([0, W])\n .padding(0.05);\n svg.append(\"g\").call(d3.axisLeft().scale(yScale));\n svg.append(\"g\").call(d3.axisTop().scale(xScale));\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${H})`)\n .call(d3.axisBottom().scale(xScale));\n svg\n .selectAll(\"rect\")\n .data(randomData)\n .join(\"rect\")\n .attr(\"x\", d => xScale(d[0]))\n .attr(\"y\", d => yScale(d[1]))\n .attr(\"width\", d => xScale.bandwidth())\n .attr(\"height\", d => H - yScale(d[1]))\n .style(\"fill\", \"steelblue\");\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"slide`Bar Chart are best for:\n\n - Comparison \n - Ranking: sorted data by value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1813,"value":"slide`Bar Chart General Guideline: Ordering \n\n- Nominal Category: Use the bars in any order\n- Ordinal Category: Use the bars in categorical order\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"slide`Bar Chart General Guideline: \nValue Scale: \n- Do not show a bar chart without a zero on the value axis. \nDomain must have 0 as minimum. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"slide`Bar Chart General Guideline:\n - Limit the number of bars.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"slide`Use Horizontal Bar Chart: \n - When Categories have long names (difficult to put them below vertical bars) \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1831,"value":"slide`Use Horizontal Bar Chart: \n - A large number of different categories and there is insufficient space to fit all the columns required for a vertical bar chart across the page\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"slide`Use Horizontal Bar Chart: \n- for nominal categories (suggestion only!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"slide`Use Vertical chart:\n - for ordinal category (suggestion only!).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"md`## Week 3: Thursday`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"{\n const [svgNode, svg] = getSVG();\n const pointScale = d3\n .scalePoint()\n .domain(randomData.map(d => d[0]))\n .range([0, H])\n .padding(0.3);\n\n const valueScale = d3\n .scaleLinear()\n .domain(d3.extent(randomData, d => d[1]))\n .range([0, W - pointScale.step()])\n .nice();\n const lines = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(randomData)\n .join(\"g\");\n lines\n .append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", d => valueScale(d[1]))\n .attr(\"y1\", d => pointScale(d[0]))\n .attr(\"y2\", d => pointScale(d[0]))\n .style(\"stroke\", \"steelblue\");\n\n lines\n .append(\"g\")\n .attr(\n \"transform\",\n d =>\n `translate(${valueScale(d[1])}, ${pointScale(d[0]) -\n pointScale.step() / 2})`\n )\n .style(\"fill\", \"steelblue\")\n .call(drawTweeterIcon, pointScale.step());\n svg.append(\"g\").call(d3.axisLeft().scale(pointScale));\n svg\n .append(\"g\")\n .call(d3.axisTop().scale(valueScale))\n .select(\".domain\")\n .remove();\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1141,"value":"md`### Lollypop Chart: \nUsing d3.scalePoint. See: https://observablehq.com/@d3/d3-scalepoint`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"md`### Vertical Bar Chart or Column Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"randomData","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"{\n const [svgNode, svg] = getSVG();\n const bandScale = d3\n .scaleBand()\n .domain(randomData.map(d => d[0]))\n .range([0, W])\n .padding(0.1);\n const valueScale = d3\n .scaleLinear()\n .domain([0, d3.max(randomData, d => d[1])])\n .range([H, 0])\n .nice();\n svg\n .append(\"g\")\n .style(\"fill\", \"steelblue\")\n .selectAll(\"g\")\n .data(randomData)\n .join(\"rect\")\n .attr(\"height\", d => H - valueScale(d[1]))\n .attr(\"width\", bandScale.bandwidth())\n .attr(\"x\", d => bandScale(d[0]))\n .attr(\"y\", d => valueScale(d[1]));\n svg.append(\"g\").call(d3.axisLeft().scale(valueScale));\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${H})`)\n .call(d3.axisBottom().scale(bandScale));\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"md`### Radial Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"stateData = USdata.filter(d => d.state == choices.state).map(d => [\n d.date,\n d[choices.column]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`### Bar Plot of Covid *${choices.column}* for state *${choices.state}* since the begin of the year.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof choices = columns({\n state: select({\n options: states,\n value: \"Florida\",\n description: \"Choose state\"\n }),\n column: radio({\n options: [\"deaths\", \"cases\"],\n value: \"cases\",\n description: \"choose data column\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"hbarPlot = {\n let svgElement, svg;\n [svgElement, svg] = getSVG();\n \n const yScale = d3\n .scaleBand()\n .domain(dates)\n .range([0, H])\n .padding(0.1);\n const xScale = d3\n .scaleLinear()\n .domain([0, d3.max(stateDataJan.map(d => d[1]))])\n .range([0, W])\n .nice();\n\n svg\n .selectAll(\"rect\")\n .data(stateDataJan)\n .join(\"rect\")\n .attr(\"height\", yScale.bandwidth())\n .attr(\"width\", d => xScale(d[1]))\n .attr(\"y\", d => yScale(d[0]))\n .style(\"fill\", \"steelblue\");\n\n const xAxis = d3.axisTop(xScale);\n\n const yAxis = d3.axisLeft(yScale).tickFormat(d3.timeFormat(\"%a %d\"));\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n return svgElement;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"USdata.columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof choices_multiline = columns([\n select({\n options: states,\n value: \"Florida\",\n description: \"Choose state 1\"\n }),\n select({\n options: states,\n value: \"Georgia\",\n description: \"Choose state 2\"\n }),\n select({\n options: states,\n value: \"New York\",\n description: \"Choose state 3\"\n }),\n select({\n options: states,\n value: \"Washington\",\n description: \"Choose state 3\"\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"dates.map(d => d3.timeFormat(\"%a %d\")(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"fromDate = new Date(\"January 01, 2021\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"today = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"stateDataJan = stateData.filter(d => d[0] >= fromDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"fiveDayRunningAv = stateDataJan.reduce(\n (Accumulator, CurrentValue, CurrentIndex, SourceArray) => {\n const n = Math.min(CurrentIndex + 1, 5);\n let sum = 0;\n for (let i = 0; i < n; i++) {\n sum += SourceArray[CurrentIndex - i][1];\n }\n Accumulator.push([CurrentValue[0], sum / n]);\n return Accumulator;\n },\n []\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"dates = d3.map(stateDataJan, d => d[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"states = [...new Set(USdata.map(d => d.state))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"USdata = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"W = width - 2*margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"H = height - 2 * margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"getSVG = () => {\n const svgElement = DOM.svg(width, height);\n\n const svg = d3\n .select(svgElement)\n .append(\"g\")\n .attr(\"transform\", `translate(${margin},${margin})`);\n return [svgElement, svg];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"randomData = d3\n .range(10)\n .map(i => [String.fromCharCode(65 + i), Math.floor(Math.random() * 1000)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"drawTweeterIcon = (g, scale) => {\n // Source: https://icomoon.io/app/#/select\n const d =\n \"M512 113.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5-19.2-20.4-46.5-33.1-76.7-33.1-58 0-105 47-105 105 0 8.2 0.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-0.5-33.4-5.3-47.6-13.1 0 0.4 0 0.9 0 1.3 0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-0.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-0.5-25.1-1.5 46.6 29.9 101.8 47.2 161.1 47.2 193.2 0 298.9-160.1 298.9-298.9 0-4.6-0.1-9.1-0.3-13.6 20.5-14.7 38.3-33.2 52.4-54.3z\";\n g.append(\"g\")\n .attr(\"transform\", `scale(${scale / 512})`)\n .append(\"path\")\n .attr(\"d\", d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"stateAbbreviationToName = d3.json(\n \"https://raw.githubusercontent.com/aruljohn/us-states/master/states.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"stateNameToAbbreviation = Object.fromEntries(\n stateNames.map((state, i) => [state, stateAbbreviations[i]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"stateNames = Object.values(stateAbbreviationToName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"stateAbbreviations = Object.keys(stateAbbreviationToName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"olympicData = (await FileAttachment(\"olympic@1.csv\").csv({\n typed: true\n})).filter(d => d.Nr) // Data Source: http://www.theolympicdatabase.nl/olympic/medals/countries","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"Object.keys(olympicData[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1753,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"legend = (svg, color) => {\n const g = svg\n .attr(\"transform\", `translate(${W + margin},0)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(\n color.domain().slice()\n )\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Extenal Library and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"import {slide, slide_style} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\", \"d3-regression@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}