34:["$","title",null,{"children":"Evolución de la temperatura media mensual en cinco ciudades españolas (2021–2025) | Berta Alcaraz López | Observable"}] 3c:T444,# Evolución de la temperatura media mensual en cinco ciudades españolas (2021–2025) Esta visualización muestra la evolución de la **temperatura media mensual (°C)** entre 2021 y 2025 en cinco estaciones meteorológicas de Madrid, Barcelona, Bilbao, Valencia y Sevilla. Cada fila representa una ciudad y el eje horizontal muestra el tiempo. Los diferentes tonos de verde representan bandas de temperatura: los más oscuros corresponden a valores más elevados. Se utiliza la técnica **Horizon Graph**, que permite comparar varias series temporales en un espacio reducido mediante la superposición de bandas de color. Limitaciones de los datos: Algunos registros mensuales de AEMET no contienen valores de temperatura media, por lo que aparecen espacios vacíos en la visualización. Estos huecos representan datos no disponibles y no deben interpretarse como temperaturas de 0 °C. No se han estimado ni sustituido los valores ausentes. **Fuente:** Agencia Estatal de Meteorología (AEMET OpenData). Elaboración propia a partir de los datos de climatologías mensuales/anuales. 3d:T845,chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const g = svg.append("g") .selectAll("g") .data(data) .enter().append("g") .attr("transform", (d, i) => `translate(0,${i * (step + 1) + margin.top})`); g.append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", width) .attr("height", step); g.append("defs").append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => area(d.values)); g.append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from( {length: overlap * 2}, (_, i) => Object.assign({index: i < overlap ? -i - 1 : i - overlap}, d) )) .enter().append("use") .attr("fill", d => color(d.index)) .attr("transform", d => mirror && d.index < 0 ? `scale(1,-1) translate(0,${d.index * step})` : `translate(0,${(d.index + 1) * step})`) .attr("xlink:href", d => d.path.href); g.append("text") .attr("x", 4) .attr("y", step / 2) .attr("dy", "0.35em") .text(d => d.key); // Tooltip: muestra ciudad, mes y temperatura g.append("rect") .attr("width", width) .attr("height", step) .attr("fill", "transparent") .style("pointer-events", "all") .on("mousemove", function(event, serie) { const [mx] = d3.pointer(event, this); const fecha = x.invert(mx); const indice = d3.bisector(d => d.date).center( serie.values, fecha ); const punto = serie.values[indice]; const mensaje = punto && Number.isFinite(punto.value) ? `${serie.key} | ${d3.utcFormat("%m/%Y")(punto.date)} | ${punto.value.toFixed(1)} °C` : `${serie.key} | Dato no disponible`; d3.select(this) .select("title") .text(mensaje); }) .append("title"); svg.append("g") .call(xAxis); return svg.node(); }3e:[{"id":"51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","href":"https://static.observableusercontent.com/files/51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","name":"AMZN.csv","type":"text/csv","lastModified":1579240133263.436,"size":94124},{"id":"3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","href":"https://static.observableusercontent.com/files/3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","name":"GOOG.csv","type":"text/csv","lastModified":1579240133241.441,"size":93857},{"id":"c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","href":"https://static.observableusercontent.com/files/c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","name":"IBM.csv","type":"text/csv","lastModified":1579240133233.353,"size":93315},{"id":"a3a40558b8a2590e24ccfa34bd62710fbbbe31badd5ad593b7b897b043180a95ae018de2d4e8c92af37cb21395abde4462c3291223ea0652baccfd04db91a749","href":"https://static.observableusercontent.com/files/a3a40558b8a2590e24ccfa34bd62710fbbbe31badd5ad593b7b897b043180a95ae018de2d4e8c92af37cb21395abde4462c3291223ea0652baccfd04db91a749","name":"MSFT.csv","type":"text/csv","lastModified":1579240133078.385,"size":88250},{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"AAPL.csv","type":"text/csv","lastModified":1579240133046.52,"size":92399},{"id":"be3285be10f00c71f793bca363abb58819a2f198159051d6aed6a91b231c95b7fee0df2cf9e0fbbe2e38115d205cf689698fa0a3f578e81cfd1f261b9efe0d89","href":"https://static.observableusercontent.com/files/be3285be10f00c71f793bca363abb58819a2f198159051d6aed6a91b231c95b7fee0df2cf9e0fbbe2e38115d205cf689698fa0a3f578e81cfd1f261b9efe0d89","name":"Barcelona.csv","type":"text/csv","lastModified":1793256704743,"size":4401},{"id":"46fdb3aee0bce956b50c270ba0d68dd681d6721c86316f19ee605b1c4ca121903e1eab0158d00fcf7fcd6f7b43b6c74a9c42e5b28ed582215dc4dedf724ab6ca","href":"https://static.observableusercontent.com/files/46fdb3aee0bce956b50c270ba0d68dd681d6721c86316f19ee605b1c4ca121903e1eab0158d00fcf7fcd6f7b43b6c74a9c42e5b28ed582215dc4dedf724ab6ca","name":"Bilbao.csv","type":"text/csv","lastModified":1793256704762,"size":4082},{"id":"9418b3396a0c3150d0e911f20babed8edbfc55fc57f130fbc4a678ee7d2667b73e6d3e1d77fed874ca91a06c954db97351dea622017483b73cf929a988eec69b","href":"https://static.observableusercontent.com/files/9418b3396a0c3150d0e911f20babed8edbfc55fc57f130fbc4a678ee7d2667b73e6d3e1d77fed874ca91a06c954db97351dea622017483b73cf929a988eec69b","name":"Madrid.csv","type":"text/csv","lastModified":1793256704726,"size":4093},{"id":"12e567291a035f25a31a2e42c95730b5ae94c40092c2a14259aa9f5fa00a04eeb25d3b6ca34fe6c00c067c02c9e2e47f9a59a9f93cd9f9e551bb50b1adf15271","href":"https://static.observableusercontent.com/files/12e567291a035f25a31a2e42c95730b5ae94c40092c2a14259aa9f5fa00a04eeb25d3b6ca34fe6c00c067c02c9e2e47f9a59a9f93cd9f9e551bb50b1adf15271","name":"Sevilla.csv","type":"text/csv","lastModified":1793256704792,"size":4168},{"id":"6be4ac417bbd48ca772c2159ac1fcd651653f33c2ec3552b88782013d23a5ab151371e059d67c8caa595768b755a4045e3a7f1ade91ce8ed3b805ddf4ee98a73","href":"https://static.observableusercontent.com/files/6be4ac417bbd48ca772c2159ac1fcd651653f33c2ec3552b88782013d23a5ab151371e059d67c8caa595768b755a4045e3a7f1ade91ce8ed3b805ddf4ee98a73","name":"Valencia.csv","type":"text/csv","lastModified":1793256704779,"size":4216}] 38:{"id":"5537074579bb9e41","slug":"evolucion-de-la-temperatura-media-mensual-en-cinco-ciudades-espanolas-2021-2025","title":"Evolución de la temperatura media mensual en cinco ciudades españolas (2021–2025)","thumbnail":"eb0a7a79a801166a4066630cc7214a909ec2b3263a912ca9d99f513d6a94bde8","access_level":"public","create_time":"$D2026-10-29T06:19:06.270Z","update_time":"$D2026-10-29T07:38:49.428Z","view_time":null,"first_public_time":"$D2026-10-29T07:31:35.043Z","has_unpublished_edits":null,"fork":{"id":"2d04695607ea3c98","slug":"horizon-chart-ii","title":"Horizon Chart II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6f7d051567ce0073","login":"balcarazl","name":"Berta Alcaraz López","avatar_url":"https://avatars-next.observableusercontent.com/d36047fdef7d65fd188fc66e0c52e4956a5cb7a5293e3161fff7ae23563c5cfb","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":599,"publish_version":599,"role":null,"authored":false,"authors":[{"type":"individual","id":"e9c72b2b84484f4b","login":"balcarazl","name":"Berta Alcaraz López","avatar_url":"https://avatars-next.observableusercontent.com/d36047fdef7d65fd188fc66e0c52e4956a5cb7a5293e3161fff7ae23563c5cfb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6f7d051567ce0073","login":"balcarazl","name":"Berta Alcaraz López","avatar_url":"https://avatars-next.observableusercontent.com/d36047fdef7d65fd188fc66e0c52e4956a5cb7a5293e3161fff7ae23563c5cfb","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Evolución de la temperatura media mensual en cinco ciudades españolas (2021–2025)","cells":[{"id":0,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof mirror = {\n const label = html` Mirror negative values`;\n label.value = label.control.checked;\n label.onclick = event => {\n label.value = label.control.checked;\n label.dispatchEvent(new CustomEvent(\"input\"));\n };\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof overlap = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} band${form.i.valueAsNumber === 1 ? \"\" : \"s\"}`;\n form.i.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":14,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"\nhtml`

\n Temperatura media mensual (°C)\n

\n ${Array.from({length: overlap}, (_, i) => {\n const max = d3.max(data, d =>\n d3.max(d.values, v => Math.abs(v.value))\n );\n const limite = max / overlap;\n const colores = d3.schemeGreens[overlap + 1];\n\n return html`

\n ${(i * limite).toFixed(1)}–${((i + 1) * limite).toFixed(1)} °C\n

`;\n })}\n

\n Cuanto más oscuro es el verde, mayor es la temperatura.\n

`\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = data.length * (step + 1) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"step = 59","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"color = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"x = d3.scaleUtc()\n .domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"y = {\n const max = d3.max(data, d => d3.max(d.values, d => Math.abs(d.value)));\n return d3.scaleLinear()\n .domain([-max, +max])\n .range([overlap * step, -overlap * step]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick\").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"area = d3.area()\n .curve(d3.curveStep)\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(0)\n .y1(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"\ndata = Promise.all(\n [\"Madrid\", \"Barcelona\", \"Bilbao\", \"Valencia\", \"Sevilla\"].map(async city => {\n const files = {\n Madrid: FileAttachment(\"Madrid.csv\"),\n Barcelona: FileAttachment(\"Barcelona.csv\"),\n Bilbao: FileAttachment(\"Bilbao.csv\"),\n Valencia: FileAttachment(\"Valencia.csv\"),\n Sevilla: FileAttachment(\"Sevilla.csv\")\n };\n\n const rows = await files[city].csv();\n\n return {\n key: city,\n values: rows.map(d => ({\n date: d3.utcParse(\"%Y-%m-%d\")(d.date),\n value:\n d.temperature_c === undefined ||\n d.temperature_c.trim() === \"\"\n ? NaN\n : Number(d.temperature_c)\n })).filter(d => d.date !== null)\n .sort((a, b) => a.date - b.date)\n };\n })\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null