Last active
November 9, 2023 14:23
-
-
Save LuisSevillano/b12875c53c33b0438e955f360297b30c to your computer and use it in GitHub Desktop.
Population around the biggest cities of Spain
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| <style> | |
| html { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | |
| } | |
| body { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1rem; | |
| width: 100%; | |
| max-width: 64rem; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| font-size: 1rem; | |
| } | |
| .grid { | |
| margin-top: 1rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .item { | |
| max-width: 50%; | |
| margin-bottom: 1.5rem; | |
| } | |
| img { | |
| width: 100%; | |
| } | |
| .title { | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| svg { | |
| overflow: visible; | |
| } | |
| a { | |
| color: black; | |
| } | |
| @media (min-width: 600px) { | |
| .item { | |
| max-width: 248px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Capitals of Spain by population</h1> | |
| <h2>Centroids of the <a href="https://www.ine.es/en/censos2011_datos/cen11_datos_resultados_rejillas_en.htm">INE</a> 1km2 grid</h2> | |
| <svg width="320" height="50" viewBox="0,0,320,50" style="overflow: visible; display: block;" | |
| xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <image x="0" y="18" width="320" height="10" preserveAspectRatio="none" | |
| xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAAAXNSR0IArs4c6QAAAJVJREFUOE/dUEkOgEAMAv2l7/D91kyXWRtj4s1TM0DLAHGcsgPYAOwQn+2tHAu3agyTjgvdiKlmuJHtzd5NU73ZNJl3ZGh/TXy4YpEh20u78SxZX/YHABRwE5+XTQpQsRccr1XvN/iWq3rz1r0F6/7ld+OvOifPwCJfvav3I9e01/Vh+im/9/LIlWZZ2v0wv+yG949u3Ja9a/5JHhgFAAAAAElFTkSuQmCC" /> | |
| <g transform="translate(0,28)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"> | |
| <g class="tick" opacity="1" transform="translate(0,0)"> | |
| <line stroke="currentColor" y2="6" y1="-10" /> | |
| <text fill="currentColor" y="9" dy="0.71em">0</text> | |
| </g> | |
| <g class="tick" opacity="1" transform="translate(107,0)"> | |
| <line stroke="currentColor" y2="6" y1="-10" /> | |
| <text fill="currentColor" y="9" dy="0.71em">50</text> | |
| </g> | |
| <g class="tick" opacity="1" transform="translate(213,0)"> | |
| <line stroke="currentColor" y2="6" y1="-10" /> | |
| <text fill="currentColor" y="9" dy="0.71em">1,000</text> | |
| </g> | |
| <g class="tick" opacity="1" transform="translate(320,0)"> | |
| <line stroke="currentColor" y2="6" y1="-10" /> | |
| <text fill="currentColor" y="9" dy="0.71em">55,000</text> | |
| </g> | |
| <text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold" | |
| class="title">Population</text> | |
| </g> | |
| </svg> | |
| <div class="grid"></div> | |
| <script> | |
| (async function () { | |
| const data = await fetch("plotData.js").then((response) => response.json()); | |
| document.querySelector(".grid").innerHTML = data | |
| .map((city) => { | |
| return `<div class="item"> | |
| <div class="title">${city.ciudad}</div> | |
| <img loading="lazy" src="${city.plotname}" alt="${city.ciudad}"> | |
| </div>`; | |
| }) | |
| .join(""); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"ciudad":"Madrid","plotname":"plot_madrid.jpg","density":2051,"order":1},{"ciudad":"Barcelona","plotname":"plot_barcelona.jpg","density":2007,"order":2},{"ciudad":"Valencia","plotname":"plot_valencia.jpg","density":1164,"order":3},{"ciudad":"Zaragoza","plotname":"plot_zaragoza.jpg","density":495,"order":4},{"ciudad":"Sevilla","plotname":"plot_sevilla.jpg","density":674,"order":5},{"ciudad":"Málaga","plotname":"plot_malaga.jpg","density":1103,"order":6},{"ciudad":"Murcia","plotname":"plot_murcia.jpg","density":1613,"order":7},{"ciudad":"Palma de Mallorca","plotname":"plot_palma_de_mallorca.jpg","density":725,"order":8},{"ciudad":"Las Palmas de Gran Canaria","plotname":"plot_las_palmas_de_gran_canaria.jpg","density":677,"order":9},{"ciudad":"Alicante","plotname":"plot_alicante.jpg","density":1464,"order":10},{"ciudad":"Bilbao","plotname":"plot_bilbao.jpg","density":1865,"order":11},{"ciudad":"Córdoba","plotname":"plot_cordoba.jpg","density":434,"order":12},{"ciudad":"Valladolid","plotname":"plot_valladolid.jpg","density":764,"order":13},{"ciudad":"Vitoria","plotname":"plot_vitoria.jpg","density":1744,"order":14},{"ciudad":"La Coruña","plotname":"plot_la_coruna.jpg","density":2087,"order":15},{"ciudad":"Granada","plotname":"plot_granada.jpg","density":975,"order":16},{"ciudad":"Oviedo","plotname":"plot_oviedo.jpg","density":1573,"order":17},{"ciudad":"Santa Cruz de Tenerife","plotname":"plot_santa_cruz_de_tenerife.jpg","density":509,"order":18},{"ciudad":"Pamplona","plotname":"plot_pamplona.jpg","density":1165,"order":19},{"ciudad":"Almería","plotname":"plot_almeria.jpg","density":598,"order":20},{"ciudad":"San Sebastián","plotname":"plot_san_sebastian.jpg","density":1271,"order":21},{"ciudad":"Burgos","plotname":"plot_burgos.jpg","density":832,"order":22},{"ciudad":"Albacete","plotname":"plot_albacete.jpg","density":247,"order":23},{"ciudad":"Santander","plotname":"plot_santander.jpg","density":1314,"order":24},{"ciudad":"Castellón de la Plana","plotname":"plot_castellon_de_la_plana.jpg","density":790,"order":25},{"ciudad":"Logroño","plotname":"plot_logrono.jpg","density":1022,"order":26},{"ciudad":"Badajoz","plotname":"plot_badajoz.jpg","density":255,"order":27},{"ciudad":"Salamanca","plotname":"plot_salamanca.jpg","density":859,"order":28},{"ciudad":"Huelva","plotname":"plot_huelva.jpg","density":315,"order":29},{"ciudad":"Lérida","plotname":"plot_lerida.jpg","density":796,"order":30},{"ciudad":"Tarragona","plotname":"plot_tarragona.jpg","density":1126,"order":31},{"ciudad":"León","plotname":"plot_leon.jpg","density":1356,"order":32},{"ciudad":"Cádiz","plotname":"plot_cadiz.jpg","density":487,"order":33},{"ciudad":"Jaén","plotname":"plot_jaen.jpg","density":529,"order":34},{"ciudad":"Orense","plotname":"plot_orense.jpg","density":2526,"order":35},{"ciudad":"Gerona","plotname":"plot_gerona.jpg","density":2121,"order":36},{"ciudad":"Lugo","plotname":"plot_lugo.jpg","density":2361,"order":37},{"ciudad":"Cáceres","plotname":"plot_caceres.jpg","density":239,"order":38},{"ciudad":"Guadalajara","plotname":"plot_guadalajara.jpg","density":1192,"order":39},{"ciudad":"Melilla","plotname":"plot_melilla.jpg","density":16,"order":40},{"ciudad":"Toledo","plotname":"plot_toledo.jpg","density":884,"order":41},{"ciudad":"Ceuta","plotname":"plot_ceuta.jpg","density":178,"order":42},{"ciudad":"Pontevedra","plotname":"plot_pontevedra.jpg","density":2548,"order":43},{"ciudad":"Palencia","plotname":"plot_palencia.jpg","density":678,"order":44},{"ciudad":"Ciudad Real","plotname":"plot_ciudad_real.jpg","density":281,"order":45},{"ciudad":"Zamora","plotname":"plot_zamora.jpg","density":672,"order":46},{"ciudad":"Ávila","plotname":"plot_avila.jpg","density":818,"order":47},{"ciudad":"Cuenca","plotname":"plot_cuenca.jpg","density":318,"order":48},{"ciudad":"Huesca","plotname":"plot_huesca.jpg","density":468,"order":49},{"ciudad":"Segovia","plotname":"plot_segovia.jpg","density":1103,"order":50},{"ciudad":"Soria","plotname":"plot_soria.jpg","density":459,"order":51},{"ciudad":"Teruel","plotname":"plot_teruel.jpg","density":356,"order":52}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment