2e:null 2f:["$","title",null,{"children":"#30DayChartChallenge - Day 11: Circular | ADRI 👨🏻‍💻 | Observable"}] 34:T427,function onMouseOver(event, d, i) { d3.selectAll("path").style("fill-opacity", 0.2); d3.select(this).style("fill-opacity", 1); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style( "left", event.pageX < width * 0.3 ? event.pageX + 10 + "px" : event.pageX > width * 0.7 ? event.pageX - tooltipWidth + "px" : event.pageX - tooltipWidth / 2 + "px" ) .style("top", event.pageY - tooltipHeight - 10 + "px") .style("visibility", "visible") .style("font-family", "sans-serif") .html( `

${d3.timeFormat("%B")( d.date )} de ${d.year}

${d3.format(".2f")(d.global)} ºC

por ${ d.global >= 0 ? "encima" : "debajo" } de la temperatura media de ese mes entre 1991 y 2020

` ); }35:T1b62,function spiralHeatmap() { // constants const radians = 0.0174532925; // All options that are accessible to caller // Default values var radius = chartRadius; var holeRadiusProportion = 0.2; // proportion of radius var arcsPerCoil = 12; // assuming months per year var coilPadding = arcPadding; // no padding var arcLabel = "mes"; // no labels var coilLabel = ""; // no labels function chart(selection) { selection.each(function (data) { const arcAngle = 360 / arcsPerCoil; const labelRadius = radius + chartWidth * 0.022; var arcLabelsArray = []; for (var i = 0; i < arcsPerCoil; i++) { arcLabelsArray.push(i); } // Create/update the x/y coordinates for the vertices and control points for the paths // Stores the x/y coordinates on the data updatePathData(data); let thisSelection = d3 .select(this) .append("g") .attr("class", "spiral-heatmap"); var arcLabelsG = thisSelection .selectAll(".arc-label") .data(arcLabelsArray) .enter() .append("g") .attr("class", "arc-label"); arcLabelsG .append("text") .text((d) => data[d][arcLabel]) .attr("x", function (d, i) { let labelAngle = i * arcAngle + arcAngle / 2; return x(labelAngle, labelRadius); }) .attr("y", function (d, i) { let labelAngle = i * arcAngle + arcAngle / 2; return y(labelAngle, labelRadius) + 5; }) .style("text-anchor", (d, i) => i < arcLabelsArray.length / 2 ? "start" : "end" ) .style("font-size", "clamp(.5em, 2vw, .7em"); arcLabelsG .append("line") .attr("x2", function (d, i) { let lineAngle = i * arcAngle; let lineRadius = chartRadius + 10; return x(lineAngle, lineRadius); }) .attr("y2", function (d, i) { let lineAngle = i * arcAngle; let lineRadius = chartRadius + 10; return y(lineAngle, lineRadius); }); var arcs = thisSelection .selectAll(".arc") .data(data) .enter() .append("g") .attr("class", "arc"); arcs.append("path").attr("d", function (d) { // start at vertice 1 let start = "M " + d.x1 + " " + d.y1; // inner curve to vertice 2 let side1 = " Q " + d.controlPoint1x + " " + d.controlPoint1y + " " + d.x2 + " " + d.y2; // straight line to vertice 3 let side2 = "L " + d.x3 + " " + d.y3; // outer curve vertice 4 let side3 = " Q " + d.controlPoint2x + " " + d.controlPoint2y + " " + d.x4 + " " + d.y4; // combine into string, with closure (Z) to vertice 1 return start + " " + side1 + " " + side2 + " " + side3 + " Z"; }); // create coil labels on the first arc of each coil let coilLabels = arcs .filter(function (d) { return d.arcNumber == 0; }) .raise(); coilLabels .append("path") .attr("id", function (d) { return "path-" + d[coilLabel]; }) .attr("d", function (d) { // start at vertice 1 let start = "M " + d.x1 + " " + d.y1; // inner curve to vertice 2 let side1 = " Q " + d.controlPoint1x + " " + d.controlPoint1y + " " + d.x2 + " " + d.y2; return start + side1; }) .style("opacity", 0); coilLabels .append("text") .attr("class", "coil-label") .attr("x", 3) .attr("dy", -4) .append("textPath") .attr("xlink:href", function (d) { return "#path-" + d[coilLabel]; }) .text((d) => d[coilLabel]) .style("font-size", 10); }); function updatePathData(data) { let holeRadius = radius * holeRadiusProportion; let arcAngle = 360 / arcsPerCoil; let dataLength = data.length; let coils = Math.ceil(dataLength / arcsPerCoil); // number of coils, based on data.length / arcsPerCoil let coilWidth = (chartRadius * (1 - holeRadiusProportion)) / (coils + 1); // remaining chartRadius (after holeRadius removed), divided by coils + 1. I add 1 as the end of the coil moves out by 1 each time data.forEach(function (d, i) { let coil = Math.floor(i / arcsPerCoil); let position = i - coil * arcsPerCoil; let startAngle = position * arcAngle; let endAngle = (position + 1) * arcAngle; let startInnerRadius = holeRadius + (i / arcsPerCoil) * coilWidth; let startOuterRadius = holeRadius + (i / arcsPerCoil) * coilWidth + coilWidth * (1 - coilPadding); let endInnerRadius = holeRadius + ((i + 1) / arcsPerCoil) * coilWidth; let endOuterRadius = holeRadius + ((i + 1) / arcsPerCoil) * coilWidth + coilWidth * (1 - coilPadding); // vertices of each arc d.x1 = x(startAngle, startInnerRadius); d.y1 = y(startAngle, startInnerRadius); d.x2 = x(endAngle, endInnerRadius); d.y2 = y(endAngle, endInnerRadius); d.x3 = x(endAngle, endOuterRadius); d.y3 = y(endAngle, endOuterRadius); d.x4 = x(startAngle, startOuterRadius); d.y4 = y(startAngle, startOuterRadius); // CURVE CONTROL POINTS let midAngle = startAngle + arcAngle / 2; let midInnerRadius = holeRadius + ((i + 0.5) / arcsPerCoil) * coilWidth; let midOuterRadius = holeRadius + ((i + 0.5) / arcsPerCoil) * coilWidth + coilWidth * (1 - coilPadding); // MID POINTS, WHERE THE CURVE WILL PASS THRU d.mid1x = x(midAngle, midInnerRadius); d.mid1y = y(midAngle, midInnerRadius); d.mid2x = x(midAngle, midOuterRadius); d.mid2y = y(midAngle, midOuterRadius); d.controlPoint1x = (d.mid1x - 0.25 * d.x1 - 0.25 * d.x2) / 0.5; d.controlPoint1y = (d.mid1y - 0.25 * d.y1 - 0.25 * d.y2) / 0.5; d.controlPoint2x = (d.mid2x - 0.25 * d.x3 - 0.25 * d.x4) / 0.5; d.controlPoint2y = (d.mid2y - 0.25 * d.y3 - 0.25 * d.y4) / 0.5; d.arcNumber = position; d.coilNumber = coil; }); return data; } function x(angle, radius) { // change to clockwise let a = 360 - angle; // start from 12 o'clock a = a + 180; return radius * Math.sin(a * radians); } function y(angle, radius) { // change to clockwise let a = 360 - angle; // start from 12 o'clock a = a + 180; return radius * Math.cos(a * radians); } function chartWH(r) { return r * 2; } } return chart; }36:[{"id":"6f2614496b5de283824b704fdf4487f50a5f54a30fb8b5a934b01d5d6d2ac21bef91216b19b5f584e600a908b3107e8770de22aaad263bce6a977309ab88e801","href":"https://static.observableusercontent.com/files/6f2614496b5de283824b704fdf4487f50a5f54a30fb8b5a934b01d5d6d2ac21bef91216b19b5f584e600a908b3107e8770de22aaad263bce6a977309ab88e801","name":"temps_data.csv","type":"text/csv","lastModified":1649594439892.186,"size":7885}] 32:{"id":"894cf1e53e969349","slug":"30daychartchallenge-day-11-circular","title":"#30DayChartChallenge - Day 11: Circular","thumbnail":"8da871d2de128d60e63dc424a99dea7ef20a23b98adca934a26a6ef16babb699","access_level":"public","create_time":"$D2021-11-18T20:48:15.454Z","update_time":"$D2022-05-12T17:18:41.199Z","view_time":null,"first_public_time":"$D2022-04-11T18:26:50.479Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"9a82911992d867f3","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":"starter_2024"},"version":502,"publish_version":502,"role":null,"authored":false,"authors":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null}],"members":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"#30DayChartChallenge - Day 11: Circular","cells":[{"id":401,"value":"# #30DayChartChallenge - Day 11: Circular","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"Spiral global warming heatmap based on [this](https://observablehq.com/d/85f23a922e1031dd\") Spiral Heatmap created by Tom Shanley. Tweaked to make it responsive for the mobile view. Months in spanish","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"

Variación de la temperatura mensual entre 1980 y 2022

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"legend = Legend(\n d3.scaleDiverging(\n [extent[0], 0, -extent[0]],\n d3.scaleDiverging((t) => d3.interpolateRdBu(1 - t))\n ),\n {\n title: \"Variación de la temperatura (°C)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", chartHeight + margin * 2);\n\n const g = svg\n .attr(\"class\", \"container\")\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" +\n (margin * 1.5 + chartRadius) +\n \",\" +\n (margin + chartRadius) +\n \")\"\n );\n\n g.datum(cleanedData).call(spiralHeatmap());\n\n g.selectAll(\".arc\")\n .selectAll(\"path\")\n .style(\"fill\", (d) => color(d.global))\n .on(\"mouseover\", onMouseOver)\n .on(\"mouseout\", onMouseOut);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"

@adrimaqueda | Data: Copernicus

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"//tooltip","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"temps-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"function onMouseOut() {\n d3.selectAll(\"path\").style(\"fill-opacity\", 1);\n\n return tooltip.style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"//chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//params","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"chartWidth = d3.min([700, width * 0.9])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chartHeight = chartWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"chartRadius = chartWidth / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"margin = chartWidth * 0.032","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"arcPadding = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"//color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"color = d3\n .scaleDiverging((t) => d3.interpolateRdBu(1 - t))\n .domain([extent[0], 0, -extent[0]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"extent = d3.extent(d3.map(cleanedData, (d) => d.global))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"//data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"cleanedData = rawData.map((d) => ({\n global: +d.global,\n year: d.year,\n month: d.month,\n date: new Date(Date.UTC(d.year, +d.month - 1, 1)),\n mes: d3.timeFormat(\"%b\")(new Date(Date.UTC(d.year, +d.month - 1, 1)))\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"rawData = FileAttachment(\"temps_data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"//libs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"esp = fetch(\n \"https://unpkg.com/d3-time-format@2.3.0/locale/es-ES.json\"\n).then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\").then((_d3) => (_d3.timeFormatDefaultLocale(esp), _d3))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"