<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.dot {
stroke: #000;
}
.legend {
padding: 5px;
font: 10px sans-serif;
background: yellow;
box-shadow: 2px 2px 1px #888;
}
</style>
</head>
<body>
<div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Messages per hour <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="m" value="2014-02-19" href="#">2014-02-19</a></li>
<li><a class="m" value="2014-02-20" href="#">2014-02-20</a></li>
<li><a class="m" value="2014-02-21" href="#">2014-02-21</a></li>
<li><a class="m" value="2014-02-22" href="#">2014-02-22</a></li>
<li><a class="m" value="2014-02-23" href="#">2014-02-23</a></li>
</ul>
</div>
<div id="mbars">
</div>
</div>
<script type="text/javascript">
var w = 600; //width
var h = 500; //height
var padding = {top: 40, right: 40, bottom: 40, left:40};
var dataset;
//Set up stack method
var stack = d3.layout.stack();
d3.json("mperday.json",function(json){
dataset = json;
//Data, stacked
stack(dataset);
var color_hash = {
0 : ["Invite","#1f77b4"],
1 : ["Accept","#2ca02c"],
2 : ["Decline","#ff7f0e"]
};
//Set up scales
var xScale = d3.time.scale()
.domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
.rangeRound([0, w-padding.left-padding.right]);
var yScale = d3.scale.linear()
.domain([0,
d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([h-padding.bottom-padding.top,0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(d3.time.days,1);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("#mbars")
.append("svg")
.attr("width", w)
.attr("height", h);
// Add a group for each row of data
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class","rgroups")
.attr("transform","translate("+ padding.left + "," + (h - padding.bottom) +")")
.style("fill", function(d, i) {
return color_hash[dataset.indexOf(d)][1];
});
// Add a rect for each data value
var rects = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("width", 2)
.style("fill-opacity",1e-6);
rects.transition()
.duration(function(d,i){
return 500 * i;
})
.ease("linear")
.attr("x", function(d) {
return xScale(new Date(d.time));
})
.attr("y", function(d) {
return -(- yScale(d.y0) - yScale(d.y) + (h - padding.top - padding.bottom)*2);
})
.attr("height", function(d) {
return -yScale(d.y) + (h - padding.top - padding.bottom);
})
.attr("width", 15)
.style("fill-opacity",1);
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(40," + (h - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class","y axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
// adding legend
var legend = svg.append("g")
.attr("class","legend")
.attr("x", w - padding.right - 65)
.attr("y", 25)
.attr("height", 100)
.attr("width",100);
legend.selectAll("g").data(dataset)
.enter()
.append('g')
.each(function(d,i){
var g = d3.select(this);
g.append("rect")
.attr("x", w - padding.right - 65)
.attr("y", i*25 + 10)
.attr("width", 10)
.attr("height",10)
.style("fill",color_hash[String(i)][1]);
g.append("text")
.attr("x", w - padding.right - 50)
.attr("y", i*25 + 20)
.attr("height",30)
.attr("width",100)
.style("fill",color_hash[String(i)][1])
.text(color_hash[String(i)][0]);
});
svg.append("text")
.attr("transform","rotate(-90)")
.attr("y", 0 - 5)
.attr("x", 0-(h/2))
.attr("dy","1em")
.text("Number of Messages");
svg.append("text")
.attr("class","xtext")
.attr("x",w/2 - padding.left)
.attr("y",h - 5)
.attr("text-anchor","middle")
.text("Days");
svg.append("text")
.attr("class","title")
.attr("x", (w / 2))
.attr("y", 20)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Number of messages per day.");
//On click, update with new data
d3.selectAll(".m")
.on("click", function() {
var date = this.getAttribute("value");
var str;
if(date == "2014-02-19"){
str = "19.json";
}else if(date == "2014-02-20"){
str = "20.json";
}else if(date == "2014-02-21"){
str = "21.json";
}else if(date == "2014-02-22"){
str = "22.json";
}else{
str = "23.json";
}
d3.json(str,function(json){
dataset = json;
stack(dataset);
console.log(dataset);
xScale.domain([new Date(0, 0, 0,dataset[0][0].time,0, 0, 0),new Date(0, 0, 0,dataset[0][dataset[0].length-1].time,0, 0, 0)])
.rangeRound([0, w-padding.left-padding.right]);
yScale.domain([0,
d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([h-padding.bottom-padding.top,0]);
xAxis.scale(xScale)
.ticks(d3.time.hour,2)
.tickFormat(d3.time.format("%H"));
yAxis.scale(yScale)
.orient("left")
.ticks(10);
groups = svg.selectAll(".rgroups")
.data(dataset);
groups.enter().append("g")
.attr("class","rgroups")
.attr("transform","translate("+ padding.left + "," + (h - padding.bottom) +")")
.style("fill",function(d,i){
return color(i);
});
rect = groups.selectAll("rect")
.data(function(d){return d;});
rect.enter()
.append("rect")
.attr("x",w)
.attr("width",1)
.style("fill-opacity",1e-6);
rect.transition()
.duration(1000)
.ease("linear")
.attr("x",function(d){
return xScale(new Date(0, 0, 0,d.time,0, 0, 0));
})
.attr("y",function(d){
return -(- yScale(d.y0) - yScale(d.y) + (h - padding.top - padding.bottom)*2);
})
.attr("height",function(d){
return -yScale(d.y) + (h - padding.top - padding.bottom);
})
.attr("width",15)
.style("fill-opacity",1);
rect.exit()
.transition()
.duration(1000)
.ease("circle")
.attr("x",w)
.remove();
groups.exit()
.transition()
.duration(1000)
.ease("circle")
.attr("x",w)
.remove();
svg.select(".x.axis")
.transition()
.duration(1000)
.ease("circle")
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.ease("circle")
.call(yAxis);
svg.select(".xtext")
.text("Hours");
svg.select(".title")
.text("Number of messages per hour on " + date + ".");
});
});
});
</script>
</body>
</html>19.json#
[
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 45
},
{
"time": "15",
"y": 23
},
{
"time": "16",
"y": 21
},
{
"time": "17",
"y": 12
},
{
"time": "18",
"y": 42
},
{
"time": "19",
"y": 12
},
{
"time": "20",
"y": 10
},
{
"time": "21",
"y": 11
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 1
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 4
},
{
"time": "15",
"y": 8
},
{
"time": "16",
"y": 1
},
{
"time": "17",
"y": 10
},
{
"time": "18",
"y": 1
},
{
"time": "19",
"y": 3
},
{
"time": "20",
"y": 4
},
{
"time": "21",
"y": 6
},
{
"time": "22",
"y": 2
},
{
"time": "23",
"y": 1
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 4
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
]
]20.json#
[
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 3
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 12
},
{
"time": "9",
"y": 30
},
{
"time": "10",
"y": 7
},
{
"time": "11",
"y": 21
},
{
"time": "12",
"y": 7
},
{
"time": "13",
"y": 6
},
{
"time": "14",
"y": 10
},
{
"time": "15",
"y": 9
},
{
"time": "16",
"y": 3
},
{
"time": "17",
"y": 2
},
{
"time": "18",
"y": 3
},
{
"time": "19",
"y": 10
},
{
"time": "20",
"y": 4
},
{
"time": "21",
"y": 2
},
{
"time": "22",
"y": 5
},
{
"time": "23",
"y": 1
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 1
},
{
"time": "9",
"y": 7
},
{
"time": "10",
"y": 3
},
{
"time": "11",
"y": 9
},
{
"time": "12",
"y": 3
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 5
},
{
"time": "15",
"y": 1
},
{
"time": "16",
"y": 1
},
{
"time": "17",
"y": 2
},
{
"time": "18",
"y": 1
},
{
"time": "19",
"y": 1
},
{
"time": "20",
"y": 1
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 2
},
{
"time": "23",
"y": 1
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 1
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 1
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 5
},
{
"time": "20",
"y": 1
},
{
"time": "21",
"y": 1
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
]
]21.json#
[
[
{
"time": "0",
"y": 8
},
{
"time": "1",
"y": 1
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 3
},
{
"time": "10",
"y": 12
},
{
"time": "11",
"y": 36
},
{
"time": "12",
"y": 34
},
{
"time": "13",
"y": 13
},
{
"time": "14",
"y": 6
},
{
"time": "15",
"y": 9
},
{
"time": "16",
"y": 2
},
{
"time": "17",
"y": 8
},
{
"time": "18",
"y": 9
},
{
"time": "19",
"y": 6
},
{
"time": "20",
"y": 8
},
{
"time": "21",
"y": 7
},
{
"time": "22",
"y": 7
},
{
"time": "23",
"y": 7
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 1
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 1
},
{
"time": "11",
"y": 14
},
{
"time": "12",
"y": 17
},
{
"time": "13",
"y": 2
},
{
"time": "14",
"y": 5
},
{
"time": "15",
"y": 2
},
{
"time": "16",
"y": 1
},
{
"time": "17",
"y": 1
},
{
"time": "18",
"y": 2
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 3
},
{
"time": "21",
"y": 2
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 2
}
],
[
{
"time": "0",
"y": 1
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 2
},
{
"time": "11",
"y": 1
},
{
"time": "12",
"y": 4
},
{
"time": "13",
"y": 3
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 1
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 2
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 1
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
]
]22.json#
[
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 1
},
{
"time": "2",
"y": 1
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 3
},
{
"time": "9",
"y": 3
},
{
"time": "10",
"y": 1
},
{
"time": "11",
"y": 22
},
{
"time": "12",
"y": 9
},
{
"time": "13",
"y": 3
},
{
"time": "14",
"y": 12
},
{
"time": "15",
"y": 6
},
{
"time": "16",
"y": 4
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 7
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 3
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 8
},
{
"time": "23",
"y": 4
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 1
},
{
"time": "7",
"y": 1
},
{
"time": "8",
"y": 1
},
{
"time": "9",
"y": 2
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 1
},
{
"time": "12",
"y": 4
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 3
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 1
},
{
"time": "21",
"y": 2
},
{
"time": "22",
"y": 1
},
{
"time": "23",
"y": 1
}
],
[
{
"time": "0",
"y": 0
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 1
},
{
"time": "12",
"y": 3
},
{
"time": "13",
"y": 1
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
]
]23.json#
[
[
{
"time": "0",
"y": 1
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 3
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
],
[
{
"time": "0",
"y": 1
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 1
},
{
"time": "8",
"y": 0
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
],
[
{
"time": "0",
"y": 1
},
{
"time": "1",
"y": 0
},
{
"time": "2",
"y": 0
},
{
"time": "3",
"y": 0
},
{
"time": "4",
"y": 0
},
{
"time": "5",
"y": 0
},
{
"time": "6",
"y": 0
},
{
"time": "7",
"y": 0
},
{
"time": "8",
"y": 1
},
{
"time": "9",
"y": 0
},
{
"time": "10",
"y": 0
},
{
"time": "11",
"y": 0
},
{
"time": "12",
"y": 0
},
{
"time": "13",
"y": 0
},
{
"time": "14",
"y": 0
},
{
"time": "15",
"y": 0
},
{
"time": "16",
"y": 0
},
{
"time": "17",
"y": 0
},
{
"time": "18",
"y": 0
},
{
"time": "19",
"y": 0
},
{
"time": "20",
"y": 0
},
{
"time": "21",
"y": 0
},
{
"time": "22",
"y": 0
},
{
"time": "23",
"y": 0
}
]
]mperday.json#
[
[
{
"time": "2014-02-19",
"y": 177
},
{
"time": "2014-02-20",
"y": 135
},
{
"time": "2014-02-21",
"y": 176
},
{
"time": "2014-02-22",
"y": 87
},
{
"time": "2014-02-23",
"y": 4
}
],
[
{
"time": "2014-02-19",
"y": 40
},
{
"time": "2014-02-20",
"y": 38
},
{
"time": "2014-02-21",
"y": 53
},
{
"time": "2014-02-22",
"y": 18
},
{
"time": "2014-02-23",
"y": 2
}
],
[
{
"time": "2014-02-19",
"y": 4
},
{
"time": "2014-02-20",
"y": 9
},
{
"time": "2014-02-21",
"y": 15
},
{
"time": "2014-02-22",
"y": 5
},
{
"time": "2014-02-23",
"y": 2
}
]
]
2711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
