Last active
December 12, 2015 12:09
-
-
Save ahwolf/4770061 to your computer and use it in GitHub Desktop.
30-30-30 visualization
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
.x_axis path,.x_axis line,.y_axis path,.y_axis line{ | |
fill:none; | |
stroke:black; | |
shape-rendering:crispEdges | |
} | |
.x_axis text,.y_axis text{ | |
font-family:georgia; | |
font-size:13px | |
} | |
.holder{ | |
float:left; | |
margin-left:12px; | |
margin-right:0px; | |
font-family:MuseoSlab500; | |
font-size:10px | |
} | |
.holder h3{ | |
margin-left:2px; | |
margin-top:8px; | |
margin-bottom:8px; | |
font-size:14px | |
} | |
.holder input[type="radio"]{ | |
display:none | |
} | |
.holder label{ | |
display:block; | |
padding:3px; | |
margin:2px; | |
background:-webkit-linear-gradient(top, #bbbbbb, #999999); | |
border-radius:2px; | |
} | |
.holder input[type="radio"]:checked + label{ | |
background:-webkit-linear-gradient(top, #666666, black); | |
color:#fff; | |
font-weight:normal; | |
} | |
.radio_holder{ | |
width:295px; | |
margin-left:5px; | |
margin-right:10px; | |
height:140px; | |
display:inline-block; | |
background:-webkit-linear-gradient(top, #eeeeee, #dddddd); | |
box-shadow:3px 3px 2px 2px #bbb; | |
} | |
.axis_text{ | |
font-size:20px; | |
} | |
#tooltip { | |
position: absolute; | |
height: auto; | |
width: 170px; | |
font-family: "RobotoRegular", sans-serif; | |
font-size: 12px; | |
color: white; | |
background-color:rgba(10,10,10,0.7); | |
border-radius: 6px; | |
box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
pointer-events: none; | |
z-index:500; | |
} | |
#tooltip h3 { | |
font-weight: bold; | |
padding-top: 10px; | |
padding-left: 10px; | |
padding-bottom: 5px; | |
} | |
#tooltip p { | |
padding-left: 20px; | |
padding-bottom: 3px; | |
} | |
.normal_path { | |
stroke: grey; | |
} | |
.no_path { | |
stroke: none; | |
} | |
.hover_path { | |
stroke: white; | |
/* stroke-width: 2px; */ | |
fill:blue; | |
} | |
#map { | |
width: 960px; | |
height: 500px; | |
} |
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> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<script type="text/javascript" language="javascript" | |
src="http://d3js.org/d3.v3.min.js"></script> | |
<script type="text/javascript" language="javascript" | |
src="https://raw.github.com/ahwolf/30_for_30_club/master/code/js/lib/leaflet.js"></script> | |
<script type="text/javascript" language="javascript" | |
src="https://raw.github.com/ahwolf/30_for_30_club/master/code/js/lib/jquery-1.8.0.min.js"></script> | |
<script type="text/javascript" | |
src="https://raw.github.com/ahwolf/30_for_30_club/master/code/js/lib/underscore-1.3.3-min.js"></script> | |
<link rel="stylesheet" | |
type="text/css" | |
media="screen" | |
href="dummy.css" /> | |
<link rel="stylesheet" | |
type="text/css" | |
media="screen" | |
href="leaflet.css" /> | |
</head> | |
<body> | |
<div id="main_container"> | |
</div> | |
<p id="map"> | |
</p> | |
<div id="tooltip"> | |
</div> | |
<script type="text/javascript" language = "javascript" | |
src="https://raw.github.com/ahwolf/30_for_30_club/master/code/js/us_states.js"></script> | |
<script type="text/javascript" language = "javascript"> | |
var w = 960; | |
var h = 500; | |
var padding = 40; | |
// change what you would like data to equal for different geo projections | |
var data = geography; | |
console.log(data); | |
// calculate the max and min of all the property values | |
var dollars = d3.extent(data.features, function(feature){ | |
return feature.properties['Miles run']; | |
}); | |
// Render using d3 | |
var color_scale = d3.scale.linear() | |
.domain(dollars) | |
.range(['white','red']); | |
// Copied from http://bost.ocks.org/mike/leaflet/ to draw a map using | |
// leaflet tiles, kinda excited to see this work | |
var map = new L.Map("map", { | |
center: [41.836084,-87.63073], | |
zoom: 4 | |
}) | |
.addLayer(new L.TileLayer("http://{s}.tile.cloudmade.com/1101a43d23aa4bdba2652a34de0dcf62/998/256/{z}/{x}/{y}.png")); | |
var legend = L.control({position: 'bottomright'}); | |
legend.onAdd = function (map) { | |
var div = L.DomUtil.create('div', 'info legend'), | |
grades = [0, 50, 100, 150,200,250], | |
labels = []; | |
// loop through our density intervals and generate a label with a colored square for each interval | |
for (var i = 0; i < grades.length; i++) { | |
div.innerHTML += | |
'<i style="background:' + color_scale(grades[i] + 1) + '"></i> ' + | |
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+'); | |
} | |
return div; | |
}; | |
legend.addTo(map); | |
var info = L.control(); | |
info.onAdd = function (map) { | |
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" | |
this.update(); | |
return this._div; | |
}; | |
// method that we will use to update the control based on feature properties passed | |
info.update = function (title) { | |
if (title){ | |
this._div.innerHTML = title; | |
} | |
else{ | |
this._div.innerHTML = '<h4>State information</h4>Hover over a state'; | |
} | |
}; | |
info.addTo(map); | |
var svg = d3.select(map.getPanes().overlayPane).append("svg"); | |
var g = svg.append("g").attr("class", "leaflet-zoom-hide"); | |
function project(x) { | |
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0])); | |
return [point.x, point.y]; | |
} | |
var path = d3.geo.path().projection(project); | |
var bounds = d3.geo.bounds(data); | |
var feature = g.selectAll("path") | |
.data(data.features) | |
.enter().append("path"); | |
reset(); | |
map.on("viewreset", reset); | |
function reset(){ | |
var bottomLeft = project(bounds[0]), | |
topRight = project(bounds[1]); | |
svg.attr("width", topRight[0] - bottomLeft[0]) | |
.attr("height", bottomLeft[1] - topRight[1]) | |
.style("margin-left", bottomLeft[0] + "px") | |
.style("margin-top", topRight[1] + "px"); | |
g.attr("transform", "translate(" + -bottomLeft[0] + "," | |
+ -topRight[1] + ")"); | |
feature.attr('fill', function(d){ | |
if (d.properties['Miles run'] === 0){ | |
return "rgba(0,0,0,0)"; | |
} | |
else{ | |
return color_scale(d.properties['Miles run']); | |
} | |
}) | |
.attr('class',function (d){ | |
if (d.properties['Miles run'] === 0){ | |
return "no_path"; | |
} | |
else{ | |
return "normal_path" | |
} | |
}) | |
.attr("d", path) | |
.on("mouseover", function (d){ | |
var title_text = "<h4>" + d.properties.name + "</h4>"; | |
_.each(d.properties, function(value, key){ | |
var output = ""; | |
if (key === 'Contributors'){ | |
_.each(value, function(key,name){ | |
output += name.split(" ")[0] + ", "; | |
}); | |
if (output.length > 0){ | |
output = output.substring(0,output.length-2); | |
} | |
} | |
else{ | |
output = value; | |
} | |
title_text += "<p>" + key + ": " + | |
output + "</p>"; | |
}); | |
var pos = $(this).offset(); | |
d3.select(this) | |
.attr("class", function (d){ | |
if (d.properties['Miles run'] === 0){ | |
return "no_path"; | |
} | |
else{ | |
// $("#tooltip").html(title_text) | |
// .css({top: pos.top + 20, left: pos.left + 40}) | |
// .show(); | |
info.update(title_text) | |
return "hover_path" | |
} | |
}); | |
}) | |
.on("mouseout", function(d){ | |
// $("#tooltip").hide(); | |
info.update(); | |
d3.select(this) | |
.attr("class",function (d){ | |
if (d.properties['Miles run'] === 0){ | |
return "no_path"; | |
} | |
else{ | |
return "normal_path" | |
} | |
}) | |
.attr("fill",function(d){ | |
if (d.properties['Miles run'] === 0){ | |
return "rgba(0,0,0,0)"; | |
} | |
else{ | |
return color_scale(d.properties['Miles run']); | |
} | |
}); | |
}); | |
} | |
function numberWithCommas(x) { | |
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
} | |
</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
/* required styles */ | |
.leaflet-map-pane, | |
.leaflet-tile, | |
.leaflet-marker-icon, | |
.leaflet-marker-shadow, | |
.leaflet-tile-pane, | |
.leaflet-overlay-pane, | |
.leaflet-shadow-pane, | |
.leaflet-marker-pane, | |
.leaflet-popup-pane, | |
.leaflet-overlay-pane svg, | |
.leaflet-zoom-box, | |
.leaflet-image-layer, | |
.leaflet-layer { | |
position: absolute; | |
left: 0; | |
top: 0; | |
} | |
.leaflet-container { | |
overflow: hidden; | |
-ms-touch-action: none; | |
} | |
.leaflet-tile, | |
.leaflet-marker-icon, | |
.leaflet-marker-shadow { | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
} | |
.leaflet-marker-icon, | |
.leaflet-marker-shadow { | |
display: block; | |
} | |
/* map is broken in FF if you have max-width: 100% on tiles */ | |
.leaflet-container img { | |
max-width: none !important; | |
} | |
/* stupid Android 2 doesn't understand "max-width: none" properly */ | |
.leaflet-container img.leaflet-image-layer { | |
max-width: 15000px !important; | |
} | |
.leaflet-tile { | |
filter: inherit; | |
visibility: hidden; | |
} | |
.leaflet-tile-loaded { | |
visibility: inherit; | |
} | |
.leaflet-zoom-box { | |
width: 0; | |
height: 0; | |
} | |
.leaflet-tile-pane { z-index: 2; } | |
.leaflet-objects-pane { z-index: 3; } | |
.leaflet-overlay-pane { z-index: 4; } | |
.leaflet-shadow-pane { z-index: 5; } | |
.leaflet-marker-pane { z-index: 6; } | |
.leaflet-popup-pane { z-index: 7; } | |
/* control positioning */ | |
.leaflet-control { | |
position: relative; | |
z-index: 7; | |
pointer-events: auto; | |
} | |
.leaflet-top, | |
.leaflet-bottom { | |
position: absolute; | |
z-index: 1000; | |
pointer-events: none; | |
} | |
.leaflet-top { | |
top: 0; | |
} | |
.leaflet-right { | |
right: 0; | |
} | |
.leaflet-bottom { | |
bottom: 0; | |
} | |
.leaflet-left { | |
left: 0; | |
} | |
.leaflet-control { | |
float: left; | |
clear: both; | |
} | |
.leaflet-right .leaflet-control { | |
float: right; | |
} | |
.leaflet-top .leaflet-control { | |
margin-top: 10px; | |
} | |
.leaflet-bottom .leaflet-control { | |
margin-bottom: 10px; | |
} | |
.leaflet-left .leaflet-control { | |
margin-left: 10px; | |
} | |
.leaflet-right .leaflet-control { | |
margin-right: 10px; | |
} | |
/* zoom and fade animations */ | |
.leaflet-fade-anim .leaflet-tile, | |
.leaflet-fade-anim .leaflet-popup { | |
opacity: 0; | |
-webkit-transition: opacity 0.2s linear; | |
-moz-transition: opacity 0.2s linear; | |
-o-transition: opacity 0.2s linear; | |
transition: opacity 0.2s linear; | |
} | |
.leaflet-fade-anim .leaflet-tile-loaded, | |
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { | |
opacity: 1; | |
} | |
.leaflet-zoom-anim .leaflet-zoom-animated { | |
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); | |
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); | |
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); | |
transition: transform 0.25s cubic-bezier(0,0,0.25,1); | |
} | |
.leaflet-zoom-anim .leaflet-tile, | |
.leaflet-pan-anim .leaflet-tile, | |
.leaflet-touching .leaflet-zoom-animated { | |
-webkit-transition: none; | |
-moz-transition: none; | |
-o-transition: none; | |
transition: none; | |
} | |
.leaflet-zoom-anim .leaflet-zoom-hide { | |
visibility: hidden; | |
} | |
/* cursors */ | |
.leaflet-clickable { | |
cursor: pointer; | |
} | |
.leaflet-container { | |
cursor: -webkit-grab; | |
cursor: -moz-grab; | |
} | |
.leaflet-popup-pane, | |
.leaflet-control { | |
cursor: auto; | |
} | |
.leaflet-dragging, | |
.leaflet-dragging .leaflet-clickable, | |
.leaflet-dragging .leaflet-container { | |
cursor: move; | |
cursor: -webkit-grabbing; | |
cursor: -moz-grabbing; | |
} | |
/* visual tweaks */ | |
.leaflet-container { | |
background: #ddd; | |
outline: 0; | |
} | |
.leaflet-container a { | |
color: #0078A8; | |
} | |
.leaflet-container a.leaflet-active { | |
outline: 2px solid orange; | |
} | |
.leaflet-zoom-box { | |
border: 2px dotted #05f; | |
background: white; | |
opacity: 0.5; | |
} | |
/* general typography */ | |
.leaflet-container { | |
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; | |
} | |
/* general toolbar styles */ | |
.leaflet-bar { | |
box-shadow: 0 0 8px rgba(0,0,0,0.4); | |
border: 1px solid #888; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
} | |
.leaflet-bar-part { | |
background-color: rgba(255, 255, 255, 0.8); | |
border-bottom: 1px solid #aaa; | |
} | |
.leaflet-bar-part-top { | |
-webkit-border-radius: 4px 4px 0 0; | |
border-radius: 4px 4px 0 0; | |
} | |
.leaflet-bar-part-bottom { | |
-webkit-border-radius: 0 0 4px 4px; | |
border-radius: 0 0 4px 4px; | |
border-bottom: none; | |
} | |
.leaflet-touch .leaflet-bar { | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
} | |
.leaflet-touch .leaflet-bar-part { | |
border-bottom: 4px solid rgba(0,0,0,0.3); | |
} | |
.leaflet-touch .leaflet-bar-part-top { | |
-webkit-border-radius: 7px 7px 0 0; | |
border-radius: 7px 7px 0 0; | |
} | |
.leaflet-touch .leaflet-bar-part-bottom { | |
-webkit-border-radius: 0 0 7px 7px; | |
border-radius: 0 0 7px 7px; | |
border-bottom: none; | |
} | |
/* zoom control */ | |
.leaflet-container .leaflet-control-zoom { | |
margin-left: 13px; | |
margin-top: 12px; | |
} | |
.leaflet-control-zoom a { | |
width: 22px; | |
height: 22px; | |
text-align: center; | |
text-decoration: none; | |
color: black; | |
} | |
.leaflet-control-zoom a, | |
.leaflet-control-layers-toggle { | |
background-position: 50% 50%; | |
background-repeat: no-repeat; | |
display: block; | |
} | |
.leaflet-control-zoom a:hover { | |
background-color: #fff; | |
color: #777; | |
} | |
.leaflet-control-zoom-in { | |
font: bold 18px/24px Arial, Helvetica, sans-serif; | |
} | |
.leaflet-control-zoom-out { | |
font: bold 23px/20px Tahoma, Verdana, sans-serif; | |
} | |
.leaflet-control-zoom a.leaflet-control-zoom-disabled { | |
cursor: default; | |
background-color: rgba(255, 255, 255, 0.8); | |
color: #bbb; | |
} | |
.leaflet-touch .leaflet-control-zoom a { | |
width: 30px; | |
height: 30px; | |
} | |
.leaflet-touch .leaflet-control-zoom-in { | |
font-size: 24px; | |
line-height: 29px; | |
} | |
.leaflet-touch .leaflet-control-zoom-out { | |
font-size: 28px; | |
line-height: 24px; | |
} | |
/* layers control */ | |
.leaflet-control-layers { | |
box-shadow: 0 1px 7px rgba(0,0,0,0.4); | |
background: #f8f8f9; | |
-webkit-border-radius: 8px; | |
border-radius: 8px; | |
} | |
.leaflet-control-layers-toggle { | |
background-image: url(images/layers.png); | |
width: 36px; | |
height: 36px; | |
} | |
.leaflet-touch .leaflet-control-layers-toggle { | |
width: 44px; | |
height: 44px; | |
} | |
.leaflet-control-layers .leaflet-control-layers-list, | |
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { | |
display: none; | |
} | |
.leaflet-control-layers-expanded .leaflet-control-layers-list { | |
display: block; | |
position: relative; | |
} | |
.leaflet-control-layers-expanded { | |
padding: 6px 10px 6px 6px; | |
color: #333; | |
background: #fff; | |
} | |
.leaflet-control-layers-selector { | |
margin-top: 2px; | |
position: relative; | |
top: 1px; | |
} | |
.leaflet-control-layers label { | |
display: block; | |
} | |
.leaflet-control-layers-separator { | |
height: 0; | |
border-top: 1px solid #ddd; | |
margin: 5px -10px 5px -6px; | |
} | |
/* attribution and scale controls */ | |
.leaflet-container .leaflet-control-attribution { | |
background-color: rgba(255, 255, 255, 0.7); | |
box-shadow: 0 0 5px #bbb; | |
margin: 0; | |
} | |
.leaflet-control-attribution, | |
.leaflet-control-scale-line { | |
padding: 0 5px; | |
color: #333; | |
} | |
.leaflet-container .leaflet-control-attribution, | |
.leaflet-container .leaflet-control-scale { | |
font-size: 11px; | |
} | |
.leaflet-left .leaflet-control-scale { | |
margin-left: 5px; | |
} | |
.leaflet-bottom .leaflet-control-scale { | |
margin-bottom: 5px; | |
} | |
.leaflet-control-scale-line { | |
border: 2px solid #777; | |
border-top: none; | |
color: black; | |
line-height: 1.1; | |
padding: 2px 5px 1px; | |
font-size: 11px; | |
text-shadow: 1px 1px 1px #fff; | |
background-color: rgba(255, 255, 255, 0.5); | |
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2); | |
white-space: nowrap; | |
overflow: hidden; | |
} | |
.leaflet-control-scale-line:not(:first-child) { | |
border-top: 2px solid #777; | |
border-bottom: none; | |
margin-top: -2px; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
} | |
.leaflet-control-scale-line:not(:first-child):not(:last-child) { | |
border-bottom: 2px solid #777; | |
} | |
.leaflet-touch .leaflet-control-attribution, | |
.leaflet-touch .leaflet-control-layers, | |
.leaflet-touch .leaflet-control-zoom { | |
box-shadow: none; | |
} | |
.leaflet-touch .leaflet-control-layers, | |
.leaflet-touch .leaflet-control-zoom { | |
border: 4px solid rgba(0,0,0,0.3); | |
} | |
/* popup */ | |
.leaflet-popup { | |
position: absolute; | |
text-align: center; | |
} | |
.leaflet-popup-content-wrapper { | |
padding: 1px; | |
text-align: left; | |
-webkit-border-radius: 20px; | |
border-radius: 20px; | |
} | |
.leaflet-popup-content { | |
margin: 14px 20px; | |
line-height: 1.4; | |
} | |
.leaflet-popup-content p { | |
margin: 18px 0; | |
} | |
.leaflet-popup-tip-container { | |
margin: 0 auto; | |
width: 40px; | |
height: 20px; | |
position: relative; | |
overflow: hidden; | |
} | |
.leaflet-popup-tip { | |
width: 15px; | |
height: 15px; | |
padding: 1px; | |
margin: -8px auto 0; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
.leaflet-popup-content-wrapper, .leaflet-popup-tip { | |
background: white; | |
box-shadow: 0 3px 14px rgba(0,0,0,0.4); | |
} | |
.leaflet-container a.leaflet-popup-close-button { | |
position: absolute; | |
top: 0; | |
right: 0; | |
padding: 4px 5px 0 0; | |
text-align: center; | |
width: 18px; | |
height: 14px; | |
font: 16px/14px Tahoma, Verdana, sans-serif; | |
color: #c3c3c3; | |
text-decoration: none; | |
font-weight: bold; | |
background: transparent; | |
} | |
.leaflet-container a.leaflet-popup-close-button:hover { | |
color: #999; | |
} | |
.leaflet-popup-scrolled { | |
overflow: auto; | |
border-bottom: 1px solid #ddd; | |
border-top: 1px solid #ddd; | |
} | |
/* div icon */ | |
.leaflet-div-icon { | |
background: #fff; | |
border: 1px solid #666; | |
} | |
.leaflet-editing-icon { | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
/* Legend info */ | |
.info { | |
padding: 6px 8px; | |
font: 14px/16px Arial, Helvetica, sans-serif; | |
background: white; | |
background: rgba(255,255,255,0.8); | |
box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
border-radius: 5px; | |
} | |
.info h4 { | |
margin: 0 0 5px; | |
color: #777; | |
} | |
.legend { | |
line-height: 18px; | |
color: #555; | |
} | |
.legend i { | |
width: 18px; | |
height: 18px; | |
float: left; | |
margin-right: 8px; | |
opacity: 0.7; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment