LuisSevillano · November 9, 2023 14:23
diff --git a/index.html b/index.html
 <!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>
diff --git a/plot_albacete.jpg b/plot_albacete.jpg
diff --git a/plot_alicante.jpg b/plot_alicante.jpg
diff --git a/plot_almeria.jpg b/plot_almeria.jpg
diff --git a/plot_avila.jpg b/plot_avila.jpg
diff --git a/plot_badajoz.jpg b/plot_badajoz.jpg
diff --git a/plot_barcelona.jpg b/plot_barcelona.jpg
diff --git a/plot_bilbao.jpg b/plot_bilbao.jpg
diff --git a/plotData.js b/plotData.js
 [{"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}]
diff --git a/plot_burgos.jpg b/plot_burgos.jpg
diff --git a/plot_caceres.jpg b/plot_caceres.jpg
diff --git a/plot_cadiz.jpg b/plot_cadiz.jpg
diff --git a/plot_castellon_de_la_plana.jpg b/plot_castellon_de_la_plana.jpg
diff --git a/plot_ceuta.jpg b/plot_ceuta.jpg
diff --git a/plot_ciudad_real.jpg b/plot_ciudad_real.jpg
diff --git a/plot_cordoba.jpg b/plot_cordoba.jpg
diff --git a/plot_cuenca.jpg b/plot_cuenca.jpg
diff --git a/plot_gerona.jpg b/plot_gerona.jpg
diff --git a/plot_granada.jpg b/plot_granada.jpg
diff --git a/plot_guadalajara.jpg b/plot_guadalajara.jpg
diff --git a/plot_huelva.jpg b/plot_huelva.jpg
diff --git a/plot_huesca.jpg b/plot_huesca.jpg
diff --git a/plot_jaen.jpg b/plot_jaen.jpg
diff --git a/plot_la_coruna.jpg b/plot_la_coruna.jpg
diff --git a/plot_las_palmas_de_gran_canaria.jpg b/plot_las_palmas_de_gran_canaria.jpg
diff --git a/plot_leon.jpg b/plot_leon.jpg
diff --git a/plot_lerida.jpg b/plot_lerida.jpg
diff --git a/plot_logrono.jpg b/plot_logrono.jpg
diff --git a/plot_lugo.jpg b/plot_lugo.jpg
diff --git a/plot_madrid.jpg b/plot_madrid.jpg
diff --git a/plot_malaga.jpg b/plot_malaga.jpg
diff --git a/plot_melilla.jpg b/plot_melilla.jpg
diff --git a/plot_murcia.jpg b/plot_murcia.jpg
diff --git a/plot_orense.jpg b/plot_orense.jpg
diff --git a/plot_oviedo.jpg b/plot_oviedo.jpg
diff --git a/plot_palencia.jpg b/plot_palencia.jpg
diff --git a/plot_palma_de_mallorca.jpg b/plot_palma_de_mallorca.jpg
diff --git a/plot_pamplona.jpg b/plot_pamplona.jpg
diff --git a/plot_pontevedra.jpg b/plot_pontevedra.jpg
diff --git a/plot_salamanca.jpg b/plot_salamanca.jpg
diff --git a/plot_san_sebastian.jpg b/plot_san_sebastian.jpg
diff --git a/plot_santa_cruz_de_tenerife.jpg b/plot_santa_cruz_de_tenerife.jpg
diff --git a/plot_santander.jpg b/plot_santander.jpg
diff --git a/plot_segovia.jpg b/plot_segovia.jpg
diff --git a/plot_sevilla.jpg b/plot_sevilla.jpg
diff --git a/plot_soria.jpg b/plot_soria.jpg
diff --git a/plot_tarragona.jpg b/plot_tarragona.jpg
diff --git a/plot_teruel.jpg b/plot_teruel.jpg
diff --git a/plot_toledo.jpg b/plot_toledo.jpg
diff --git a/plot_valencia.jpg b/plot_valencia.jpg
diff --git a/plot_valladolid.jpg b/plot_valladolid.jpg
diff --git a/plot_vitoria.jpg b/plot_vitoria.jpg
diff --git a/plot_zamora.jpg b/plot_zamora.jpg
diff --git a/plot_zaragoza.jpg b/plot_zaragoza.jpg
diff --git a/thumbnail.png b/thumbnail.png
	<!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>