31:[{"id":"418d31d7be7b81323f026e2fc10908bf10a21287829e1fff537c7694388d0610f6dc3d689e3ff8bdd4d160600afee51f5c0b8e4171816782b3c30ed68d0f591c","href":"https://static.observableusercontent.com/files/418d31d7be7b81323f026e2fc10908bf10a21287829e1fff537c7694388d0610f6dc3d689e3ff8bdd4d160600afee51f5c0b8e4171816782b3c30ed68d0f591c","name":"avg-internet-speeds@1.csv","type":"text/csv","lastModified":1664389226299.649,"size":19969}] 2f:{"title":"Internet Speeds (Mbps) Over Time by European Country","cells":[{"id":0,"value":"

Internet Speeds (Mbps) Over Time by European Country

The average download speeds per quarter since Q1 2019 by country.

Data Source can be found here

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(squares)\n svg.append(\"g\").call(labels)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"colors = d3.scaleSequential()\n .domain([-100,300])//[0, d3.max(rawData, d => d.avg_dl_speed)])\n .interpolator(d3.interpolatePRGn)//d3.interpolateRgb(\"#ffb7b2\", \"#b5ead7\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"squares = (g) => {\n g.attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .attr(\"class\", \"canvas\")\n .selectAll(\"rect\")\n .data(\n d3.filter(\n rawData,\n (d) =>\n listOfQualifyingCountries.includes(d.country_name) && d.avg_dl_speed\n ),\n (d) => d\n )\n .join((enter) => {\n enter\n .append(\"rect\")\n .attr(\"class\", \"data-rect\")\n .attr(\"x\", (d) => xScale(d.quarter))\n .attr(\"y\", (d) => yScale(d.country_name))\n .attr(\"rx\", 4)\n .attr(\"ry\", 4)\n .attr(\"width\", (d) => xScale.bandwidth())\n .attr(\"height\", (d) => yScale.bandwidth())\n .attr(\"stroke\", \"#fff\")\n .attr(\"opacity\", 1)\n .attr(\"fill\", (d) => colors(d.avg_dl_speed));\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"labels = (g) => {\n g.attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .attr(\"class\", \"label-group\")\n .selectAll(\"text\")\n .data(\n d3.filter(\n rawData,\n (d) =>\n listOfQualifyingCountries.includes(d.country_name) && d.avg_dl_speed\n ),\n (d) => d\n )\n .join((enter) => {\n enter\n .append(\"text\")\n .attr(\"class\", \"data-label\")\n .attr(\"x\", (d) => xScale(d.quarter) + xScale.bandwidth() / 2 - xLabelOffset(d.avg_dl_speed))\n .attr(\"y\", (d) => yScale(d.country_name) + yScale.bandwidth() / 2 + 3)\n .text((d) => parseInt(d.avg_dl_speed))\n .attr(\"font-size\", \"9px\")\n .attr(\"color\", d => \"#666\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"function xLabelOffset(num) {\n return num >= 100 ? 8 : 5 \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"xScale = d3\n .scaleBand()\n .domain(listOfQuarters)\n .range([0, width - margin.left - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"xAxis = (g) => {\n g.attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .attr(\"class\", \"x axis\")\n .call(\n d3\n .axisTop(xScale)\n .tickSize(0)\n .tickFormat((d) => getQuarter(d))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"yScale = d3\n .scaleBand()\n .domain(d3.map(listOfCountries, d => d.country_name))\n .range([0, height - margin.top - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(yScale).tickSize(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"rawData = FileAttachment(\"avg-internet-speeds@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"flatData = d3.flatGroup(rawData, d => d.country_name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"listOfQuarters = [...new Set(d3.map(rawData, d => d.quarter))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"function getQuarter(date) {\n let q = \"\";\n if (date.slice(0, 2) == \"01\") {\n q = \"Q1\";\n } else if (date.slice(0, 2) == \"04\") {\n q = \"Q2\";\n } else if (date.slice(0, 2) == \"07\") {\n q = \"Q3\";\n } else if (date.slice(0, 2) == \"10\") {\n q = \"Q4\";\n }\n return q + \"'\" + date.slice(-2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"listOfQualifyingCountries = d3.map(d3.filter(flatData, (d) => d[1].length === 14), d => d[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"listOfCountries = d3.sort(\n d3.filter(\n rawData,\n (d) =>\n d.quarter === \"04/22\" &\n listOfQualifyingCountries.includes(d.country_name)\n ),\n (a, b) => d3.descending(a.avg_dl_speed, b.avg_dl_speed)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"margin = ({\n left: 150,\n top: 50,\n right: 150,\n bottom: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = width * 1.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}