Last active
May 12, 2016 05:56
-
-
Save chiufin/3409e779d927e633b6f6fd54d1234953 to your computer and use it in GitHub Desktop.
Users in Each State
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 charset="utf-8"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> | |
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> | |
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'><style> | |
<style> | |
body *{ | |
font-family: 'Playfair Display', serif; | |
} | |
h1,h2,h3,h4,h5,h6{ | |
margin:0; | |
} | |
#container{ | |
position:relative; | |
} | |
.state:hover { | |
opacity: 1; | |
} | |
.state text { | |
font: 12px sans-serif; | |
text-anchor: middle; | |
cursor: default; | |
} | |
.tooltip{ | |
position:absolute; | |
top:100%; | |
left:100%; | |
width:200px; | |
height:120px; | |
background:rgba(0,0,0,0.9); | |
border-radius:10px; | |
padding:10px 15px; | |
box-sizing: border-box; | |
color:#fff; | |
} | |
.tooltip h5{ | |
border-bottom:1px solid #eee; | |
} | |
.tooltip p{ | |
margin-top:10px; | |
} | |
.tooltip span{ | |
display:block; | |
font-size:20px; | |
color:orange; | |
} | |
.tooltip .arrow{ | |
position: absolute; | |
top:0; | |
right:-15px; | |
line-height:120px; | |
color:rgba(0,0,0,0.9); | |
cursor:default; | |
} | |
.tooltip .figure{ | |
position:absolute; | |
top:40px; | |
right:15px; | |
font-size:50px; | |
} | |
.lengend{ | |
position:absolute; | |
/*border:1px solid #aaa;*/ | |
/*padding:15px 15px 10px 0;*/ | |
bottom:50px; | |
right:250px; | |
} | |
.lengend ul{ | |
margin:0; | |
padding:0; | |
line-height:12px; | |
} | |
.lengend ul li{ | |
list-style-type: none; | |
color:#333; | |
} | |
.lengend ul li span.lengendColor{ | |
display:inline-block; | |
width:10px; | |
height:10px; | |
background:#666; | |
margin-right: 3px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<svg width="800" height="400"></svg> | |
<div class="tooltip"> | |
<i class="material-icons arrow">play_arrow</i> | |
<h5>New York</h5> | |
<p>Subscribe num<span>20,000</span></p> | |
<i class="material-icons figure">person_pin_circle</i> | |
</div> | |
<div class="lengend"></div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script> | |
<script src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js" charset="utf-8"></script> | |
<script id="grid" type="text/plain"> | |
ME | |
WI VT NH | |
WA ID MT ND MN IL MI NY MA | |
OR NV WY SD IA IN OH PA NJ CT RI | |
CA UT CO NE MO KY WV VA MD DE | |
AZ NM KS AR TN NC SC | |
OK LA MS AL GA | |
HI AK TX FL | |
</script> | |
<script> | |
(function(d3) { | |
'use strict'; | |
var states = [], | |
statesNum = [ | |
{'state':'ME','name':'Maine','num':200}, | |
{'state':'NH','name':'222','num':100}, | |
{'state':'RI','name':'3','num':200}, | |
{'state':'VT','name':'4','num':200}, | |
{'state':'MA','name':'5','num':200}, | |
{'state':'CT','name':'6','num':200}, | |
{'state':'DE','name':'7','num':200}, | |
{'state':'NY','name':'New York','num':200}, | |
{'state':'NJ','name':'9','num':200}, | |
{'state':'MD','name':'10','num':200}, | |
{'state':'FL','name':'Florida','num':200}, | |
{'state':'PA','name':'12','num':200}, | |
{'state':'VA','name':'13','num':200}, | |
{'state':'SC','name':'14','num':1200}, | |
{'state':'GA','name':'15','num':800}, | |
{'state':'MI','name':'Michigan','num':200}, | |
{'state':'OH','name':'OHHHH','num':200}, | |
{'state':'WV','name':'18','num':200}, | |
{'state':'NC','name':'19','num':200}, | |
{'state':'AL','name':'20','num':300}, | |
{'state':'WI','name':'21','num':200}, | |
{'state':'IL','name':'22','num':1500}, | |
{'state':'IN','name':'23','num':1600}, | |
{'state':'KY','name':'24','num':200}, | |
{'state':'TN','name':'25','num':1700}, | |
{'state':'MS','name':'26','num':200}, | |
{'state':'MN','name':'Minnesota','num':200}, | |
{'state':'IA','name':'Iowa','num':200}, | |
{'state':'MO','name':'Missourl','num':200}, | |
{'state':'AR','name':'arkansas','num':200}, | |
{'state':'LA','name':'louisiana','num':200}, | |
{'state':'ND','name':'North Dakota','num':200}, | |
{'state':'SD','name':'South Dakota','num':200}, | |
{'state':'NE','name':'Nebraska','num':200}, | |
{'state':'KS','name':'Kansas','num':200}, | |
{'state':'OK','name':'Oklahoma','num':2000}, | |
{'state':'TX','name':'Texas','num':200}, | |
{'state':'MT','name':'Montana','num':200}, | |
{'state':'WY','name':'Wyoming','num':200}, | |
{'state':'CO','name':'Colorado','num':200}, | |
{'state':'NM','name':'Nwe Mexico','num':200}, | |
{'state':'ID','name':'Idaho','num':200}, | |
{'state':'NV','name':'Nevada','num':200}, | |
{'state':'UT','name':'Utah','num':200}, | |
{'state':'AZ','name':'Arizona','num':200}, | |
{'state':'WA','name':'Washington','num':200}, | |
{'state':'OR','name':'Oregon','num':300}, | |
{'state':'CA','name':'California','num':200}, | |
{'state':'AK','name':'','num':200}, | |
{'state':'HI','name':'','num':200} | |
]; | |
d3.select("#grid").text().split("\n").forEach(function(line, i) { | |
var re = /\w+/g, m; | |
while (m = re.exec(line)) states.push({ | |
name: m[0], | |
num: _.find(statesNum, {'state': m[0]}).num, | |
stateName:_.find(statesNum, {'state': m[0]}).name, | |
x: m.index / 3, | |
y: i | |
}); | |
}); | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var scale = d3.scale.linear() | |
.domain([0,1000,2000]) | |
.range(['pink','orange','red']); | |
console.log(scale.domain()); | |
var gridWidth = d3.max(states, function(d) { return d.x; }) + 1, | |
gridHeight = d3.max(states, function(d) { return d.y; }) + 1, | |
cellSize = 40; | |
var state = svg.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
.selectAll(".state") | |
.data(states) | |
.enter().append("g") | |
.attr("class", "state") | |
.attr("transform", function(d) { | |
return "translate(" + (d.x - gridWidth / 2) * cellSize + "," | |
+ (d.y - gridHeight / 2) * cellSize + ")"; | |
}); | |
state.append("rect") | |
.attr("x", -cellSize / 2) | |
.attr("y", -cellSize / 2) | |
.attr("width", cellSize - 1) | |
.attr("height", cellSize - 1) | |
.attr({ | |
'fill': function(d){ return scale(d.num)}, | |
'stroke-width':'0', | |
'stroke':'rgba(0,0,0,0.8)' | |
}); | |
state.append("text") | |
.attr("dy", ".35em") | |
.text(function(d) { return d.name; }); | |
state.on('mouseover', function(d){ | |
var _this = d3.select(this); | |
_this.select('rect').style({ | |
'transform':'scale(1.2)', | |
'stroke-width':'2' | |
}); | |
this.parentElement.appendChild(this); | |
var tooltip = d3.select('.tooltip'); | |
tooltip.style({ | |
'display':'block' | |
}); | |
tooltip.select('h5').html(d.stateName); | |
tooltip.select('span').html(d.num); | |
}); | |
state.on('mousemove', function(d){ | |
var top = (d.y - gridHeight / 2) * cellSize + 170; | |
var left = (d.x - gridWidth / 2) * cellSize +170; | |
var x = d3.mouse(this)[0]; | |
var y = d3.mouse(this)[1]; | |
var tooltip = d3.select('.tooltip'); | |
tooltip.style({ | |
'top': (top+y) + 'px', | |
'left': (left+x) + 'px' | |
}); | |
}); | |
state.on('mouseout', function(){ | |
var _this = d3.select(this); | |
_this.select('rect').style({ | |
'transform':'scale(1)', | |
'stroke-width':'0' | |
}); | |
d3.select('.tooltip') | |
.style({ | |
'display':'none' | |
}) | |
}); | |
var lengend = d3.select('#container').select('.lengend').append('ul'); | |
for(var i = 0 ; i < 5 ; i++){ | |
var each = lengend.append('li'); | |
each.append('span').attr({'class':'lengendColor'}) | |
.style({ | |
'width': function(){ | |
return (i*5 + 10) + 'px'; | |
}, | |
'margin-left': function(){ | |
return ((5-i)*5 + 10) + 'px'; | |
}, | |
'background': scale(1800/(5-i)) | |
}); | |
each.append('span').attr({'class':'lengendText'}).html(200*i); | |
} | |
})(window.d3); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment