Updates

ccalobeto · Apr 16, 2024 · 601ef15 · 601ef15
1 parent 9ad4607
commit 601ef15
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -12,21 +12,20 @@
 
 <body>
 	<div class="container">
-		<h1>Cobertura de Internet</h1>
-		<div class="intro"> El presente gráfico muestra la cobertura a nivel nacional del servicio de internet móvil de
-			Entel por
-			centro poblado.
-			La data corresponde a <b>noviembre del 2022</b> y se obtuvo del <a
-				href="https://www.entel.pe/wp-content/uploads/2022/11/listado-ccpp-con-cobertura-movil-3Q2022.pdf">siguiente
-				documento en pdf</a>. El proceso de preparación y transformación de los datos
-			se encuentra en el siguiente <a href="https://github.com/ccalobeto/cobertura_internet">repositorio de github.</a>
+		<h1>Mobile Internet Coverage</h1>
+		<div class="intro"> This graph shows the nationwide coverage of Entel's mobile internet service by population center
+			as of <b>November 2022</b>.
 		</div>
 		<div class="filters-container">
 			<p id="viewof-technology"></p>
-			<div class="intro">Haz click en las cajas para mostrar la red internet móvil y posiciona el cursor en cualquier
-				punto para mostrar
-				el centro poblado y su provincia.</div>
+			<div class="intro">Click on the boxes to show the mobile internet network and position the cursor at any point to
+				show the population center and its province.</div>
 			<div id="peruChart"></div>
+			<div class="footer">
+				<p>A demonstration chart in JavaScript and D3.js</p>
+				<p><a href="https://www.carlosleon.dev/posts/internet-coverage/">Blog Post</a> | <a
+						href="https://github.com/ccalobeto/cobertura_internet">Code</a></p>
+			</div>
 		</div>
 	</div>
 

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "gh-pages": "^6.1.1"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "deploy": "npx gh-pages -d ."
   },
   "keywords": [],
   "author": "",

diff --git a/src/css/visualization.css b/src/css/visualization.css
@@ -4,6 +4,7 @@
   width: 100%;
   max-width: 1200px;
 }
+
 .responsive-svg-container.small {
   margin: 0 auto;
   max-width: 300px;
@@ -14,9 +15,11 @@
   font-family: 'Open Sans', sans-serif;
   font-size: 1.5rem;
 }
+
 #scatterplot text {
   fill: #192e4d;
 }
+
 #scatterplot line,
 #scatterplot path {
   stroke-width: 2;
@@ -27,6 +30,7 @@
   display: flex;
   flex-wrap: wrap;
 }
+
 .filter {
   margin-right: 15px;
   margin-bottom: 15px;
@@ -38,26 +42,31 @@
   cursor: pointer;
   transition: background-color 200ms ease;
 }
+
 .filter-icon,
 .filter-text {
   display: inline-block;
   vertical-align: middle;
 }
+
 .filter-icon {
   width: 30px;
   height: 30px;
   margin-right: 10px;
   background-repeat: no-repeat;
   background-size: contain;
 }
+
 .filter-text {
   font-size: 1.8rem;
   color: #f5f9ff;
 }
+
 .filter:hover,
 .filter.active {
   background-color: rgba(25, 46, 77, 1);
 }
+
 .filter.active {
   cursor: default;
 }
@@ -66,19 +75,27 @@
 .legend-sections {
   display: flex;
 }
+
 .legend-section {
   margin-right: 100px;
 }
+
 .legend-conservation-status ul {
   margin: 0;
   padding-left: 5px;
   list-style: none;
 }
+
 .legend-conservation-status li {
   display: flex;
   align-items: center;
   margin: 10px 0;
 }
+
 .legend-conservation-status svg {
   margin-right: 10px;
+}
+
+.footer {
+  text-align: center;
 }