mobile

index.html

@@ -12,6 +12,7 @@
 	<meta name="twitter:creator" content="@nateparrott">
 	<meta name="twitter:title" content="NYC Subway Travel Time Map">
 	<meta name="twitter:image" content="http://subway.nateparrott.com/og.png">
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="http://d3js.org/d3.v4.min.js"></script>
   <style>
     html, body {
@@ -108,6 +109,20 @@
 		#timePicker li:hover {
 			text-decoration: underline;
 		}
+		@media screen and (max-width: 500px) {
+			.stop {
+				stroke-width: 22px;
+			}
+			#info {
+				width: auto;
+				right: 2vh;
+				top: auto;
+				bottom: 2vh;
+				max-height: 20vh;
+				overflow-y: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+		}
   </style>
   <script src="subway.js"></script>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

map.js

@@ -8,10 +8,9 @@ let zoomed = () => {
   container.attr("transform", d3.event.transform);
 	container.selectAll('.stop').attr('r', (2.0 / d3.event.transform.k));
 	container.selectAll('.home').attr('r', (3.0 / d3.event.transform.k));
-
 }
 let zoom = d3.zoom()
-.scaleExtent([0.7, 4])
+.scaleExtent([0.7, 5])
 .on("zoom", zoomed);
 svg.call(zoom);