Skip to content

Instantly share code, notes, and snippets.

@chiufin

chiufin/index.html

Last active May 12, 2016 05:56
Show Gist options
  • Save chiufin/3409e779d927e633b6f6fd54d1234953 to your computer and use it in GitHub Desktop.
Save chiufin/3409e779d927e633b6f6fd54d1234953 to your computer and use it in GitHub Desktop.
Download ZIP
Users in Each State
Raw
index.html
<!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