|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Bike Data</title> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script type="text/javascript" src="./takeOffBABS.js"></script> |
|
<style type="text/css"> |
|
svg{ |
|
background:#DCDCDC; |
|
} |
|
.bars { |
|
fill:#00FFFF; |
|
} |
|
.rwc{ |
|
fill:green; |
|
} |
|
.pab{ |
|
fill:yellow; |
|
} |
|
.sj{ |
|
fill:#B22222; |
|
|
|
} |
|
.mtv{ |
|
fill:purple; |
|
} |
|
|
|
.labmtv{ |
|
font: 8px sans-serif; |
|
text-shadow: 0 0 0.2em #87F, 0 0 0.2em purple, |
|
0 0 0.2em purple; |
|
} |
|
.labsf{ |
|
font: 8px sans-serif; |
|
background:orange; |
|
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #00FFFF, |
|
0 0 0.2em #00FFFF; |
|
} |
|
.labsj{ |
|
font: 8px sans-serif; |
|
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #B22222, |
|
0 0 0.2em #B22222; |
|
} |
|
|
|
.labpab{ |
|
font: 8px sans-serif; |
|
text-shadow: 0 0 0.2em #87F, 0 0 0.2em yellow, |
|
0 0 0.2em yellow; |
|
} |
|
.labrwc{ |
|
font: 8px sans-serif; |
|
text-shadow: 0 0 0.2em #87F, 0 0 0.2em green, |
|
0 0 0.2em green; |
|
} |
|
|
|
.bars:hover { |
|
fill: brown; |
|
font: 10px sans-serif; |
|
color:black |
|
} |
|
|
|
.axis { |
|
font: 9px sans-serif; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.x.axis path { |
|
stroke:black; |
|
} |
|
#key{ |
|
background:white; |
|
width:180px; |
|
padding:5px; |
|
position:absolute; |
|
margin-left: 220px; |
|
margin-top:35px; |
|
border-style:solid; |
|
border-width:3px; |
|
} |
|
.sfer{ |
|
background:#00FFFF; |
|
width:20px; |
|
height:15px; |
|
float:right; |
|
margin-right:10px |
|
} |
|
.sjer{ |
|
background:#B22222; |
|
width:20px; |
|
height:15px; |
|
float:right; |
|
margin-right:10px |
|
} |
|
.mtver{ |
|
background:purple; |
|
width:20px; |
|
height:15px; |
|
float:right; |
|
margin-right:10px |
|
} |
|
.rwer{ |
|
background:green; |
|
width:20px; |
|
height:15px; |
|
float:right; |
|
margin-right:10px |
|
} |
|
.paer{ |
|
background:yellow; |
|
width:20px; |
|
height:15px; |
|
float:right; |
|
margin-right:10px |
|
} |
|
/* No style rules here yet */ |
|
|
|
.hov{ |
|
fill:white; |
|
opacity:0; |
|
} |
|
.tooltip{ |
|
position:absolute; |
|
background:white; |
|
margin:5px 5 5 5; |
|
|
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id='key'>San Francisco<div class="sfer"></div> |
|
<div>San Jose <div class="sjer"></div> </div> |
|
<div>Mountain View <div class="mtver"></div> </div> |
|
<div>Palo Alto <div class="paer"></div> </div> |
|
<div>Redwood City <div class="rwer"></div> </div> |
|
</div> |
|
|
|
<div class="tooltip"></div> |
|
<script type="text/javascript"> |
|
|
|
//Width and height |
|
var margin = {top: 20, right: 20, bottom: 30, left: 85}; |
|
var w = 1000- margin.left - margin.right, |
|
barheight= 20; |
|
var h= 500 - margin.top - margin.bottom, |
|
barPadding = 16; |
|
|
|
|
|
|
|
var x = d3.scale.ordinal() |
|
.range([0, w+20]) |
|
.domain(50); |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("bottom") |
|
; |
|
|
|
|
|
var y = d3.scale.linear() |
|
.domain([0,10000]) |
|
.range([ h,40]); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(y) |
|
.orient("left") |
|
.ticks(10); |
|
|
|
var axisp= h; |
|
|
|
/* |
|
|
|
var tooltip = d3.select("body") |
|
.append("div") |
|
.style("position", "absolute") |
|
.style("z-index", "10") |
|
.style("visibility", "hidden") |
|
// .text("a simple tooltip"); |
|
; |
|
*/ |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w + margin.left + margin.right) |
|
.attr("height", h + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
|
|
svg.selectAll("rect") |
|
.data(leave) |
|
.enter() |
|
.append("rect") |
|
.attr("x", function(d, i) { return i * (w / leave.length) + 15; }) |
|
.attr("y", function(d) { |
|
return h - (d.numTrips / 25); |
|
}) |
|
.attr("width", w / leave.length - barPadding) |
|
.attr("height", function(d) { |
|
//console.log(d) |
|
return d.numTrips / 25; |
|
}) |
|
.attr("class",function(d){ |
|
if(d.city === "Redwood City"){ |
|
return "rwc" |
|
} |
|
else if(d.city ==="Palo Alto"){return "pab"} |
|
else if(d.city ==="San Jose"){return "sj"} |
|
else if(d.city ==="Mountain View"){return "mtv"} |
|
else{return "bars"} |
|
}) |
|
.on("click", function(d){ |
|
console.log(d) |
|
}) |
|
|
|
|
|
svg.selectAll("text") |
|
.data(leave).enter().append("text") |
|
.attr("x", function(d, i) { |
|
return i * (w / leave.length) +35; |
|
|
|
} ) |
|
.attr("y", function(d,i){ |
|
if(i%2===0){ |
|
return h+20; |
|
} |
|
else{return h+10} |
|
}) |
|
// .attr("transform", "rotate(-45)") |
|
.attr("class", function(d){ |
|
if(d.city === "Redwood City"){ |
|
return "labrwc" |
|
} |
|
else if(d.city ==="Palo Alto"){return "labpab"} |
|
else if(d.city ==="San Jose"){return "labsj"} |
|
else if(d.city ==="Mountain View"){return "labmtv"} |
|
else{return "labsf"} |
|
}) |
|
.text(function(d,i){ |
|
return (d._id) |
|
}) |
|
.style("text-anchor","middle") |
|
|
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.call(xAxis) |
|
.attr("transform", "translate(0," + axisp + ")") |
|
|
|
.append("text") |
|
.style("text-anchor","middle") |
|
.text("Bike Share Stations") |
|
.attr("y", 30) |
|
.attr("x",axisp); |
|
|
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 10) |
|
.attr("x", -40) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end") |
|
.text("Trips Total"); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.call(xAxis) |
|
.attr("transform", "translate(0," + axisp + ")") |
|
|
|
.append("text") |
|
.style("text-anchor","middle") |
|
.text("Bike Share Stations") |
|
.attr("y", 30) |
|
.attr("x",axisp) |
|
|
|
svg.selectAll("hovs") |
|
.data(leave) |
|
.enter() |
|
.append("rect") |
|
.attr("x", function(d, i) { |
|
return i * (w / leave.length) + 15; |
|
|
|
}) |
|
.attr("height", function(d) { |
|
//console.log(d) |
|
return d.numTrips / 25; |
|
}) |
|
.attr("width", w / leave.length - barPadding) |
|
.attr("height", function(d) { |
|
//console.log(d) |
|
return h -30; |
|
}) |
|
|
|
.attr("class",function(d){ |
|
|
|
return "hov" |
|
|
|
}) |
|
// some events going on |
|
.on("click", function(d,i){ |
|
console.log(d._id +i) |
|
}) |
|
|
|
.on("mouseover", function(d,i){ |
|
var xposit = function() { |
|
// console.log(i) |
|
var left = 55; |
|
return left*i+"px"; |
|
|
|
}; |
|
//parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2; |
|
var yposit = 200; |
|
|
|
d3.select(".tooltip") |
|
.style("left", xposit ) |
|
.style("top", yposit + "px") |
|
// .select("#value") |
|
.text(d._id +" with "+ d.numTrips + " trips") |
|
// .append("<a href=\'www.openstreetmap.org/#map=18/37.79231/-122.39723&layers=C\'>OSM</a>"); |
|
|
|
//show the tooltip |
|
d3.select(".tooltip").classed("hidden",false); |
|
|
|
}) |
|
.on("mouseout",function(){ |
|
|
|
//take away the tooltip |
|
d3.select(".tooltip").classed("hidden",true); |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |