diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d3e6cc --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

MEDIAN U.S. INCOME BY STATE

+
+
+

LOWER → HIGHER (% of POP)

+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..73011bc --- /dev/null +++ b/main.css @@ -0,0 +1,66 @@ +#map{ + display: block; + position: absolute; + top: 175px; + left: 0; + width: 100%; + height: 100%; +} +path:hover, circle:hover { + stroke: white !important; + stroke-width: 2px; + stroke-linejoin: round; + fill: #e5e9ef !important; + cursor: pointer; +} +#path67 { + fill: none !important; + stroke: #A9A9A9 !important; + cursor: default; +} +#info-box { + display: none; + position: absolute; + top: 10px; + left: 0px; + z-index: 1; + background-color: #ffffff; + border: 2px solid #BF0A30; + border-radius: 5px; + padding: 5px; + font-family: arial; +} +#key { + display: inline-block; + position: absolute; + top: 40px; + left: 5%; + border-radius: 15px; + padding: 20px; + max-width: 300px; + height: 10px; + background: linear-gradient(to right, LightSkyBlue, LightBlue, SkyBlue, DeepSkyBlue, Blue, DarkBlue, #002664); + text-align: center; + vertical-align: top; + border: 1px solid #000654; + font-family: 'geneva'; + font-size: 14px; + color: azure; + font-style: italic; +} +#map-title { + display: inline-block; + position: absolute; + top: 5px; + left: 0; + width: 75%; + height: 80%; + text-decoration: underline; + color: #000654; + font-family: 'geneva'; + font-size: 24px; + text-align: center; +} +h2,h4{ + font-family: 'geneva'; +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..8eee9d3 --- /dev/null +++ b/main.js @@ -0,0 +1,23 @@ +$("path, circle").hover(function(e) { + $('#info-box').css('display','block'); + $('#info-box').html($(this).data('info')); +}); + +$("path, circle").mouseleave(function(e) { + $('#info-box').css('display','none'); +}); + +//maps tooltip to respective state +$(document).mousemove(function(e) { + $('#info-box').css('top',e.pageY-$('#info-box').height()-30); + $('#info-box').css('left',e.pageX-($('#info-box').width())/2); +}).mouseover(); + +var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; +if(ios) { + $('a').on('click touchend', function() { + var link = $(this).attr('href'); + window.open(link,'_blank'); + return false; + }); +} \ No newline at end of file diff --git a/pie.html b/pie.html new file mode 100644 index 0000000..8c8d9dc --- /dev/null +++ b/pie.html @@ -0,0 +1,101 @@ + + + + + + +
+ + +
+
+
+
+ + + + + + + + \ No newline at end of file