Skip to content

Instantly share code, notes, and snippets.

@hepplerj

hepplerj/data.json

Last active November 16, 2015 21:17
Show Gist options
  • Save hepplerj/0bf5a4ac4491a406bc1f to your computer and use it in GitHub Desktop.
Save hepplerj/0bf5a4ac4491a406bc1f to your computer and use it in GitHub Desktop.
Download ZIP
Punchcard Visualization
Raw
data.json
[
{
"tasks": [
[
12,
6
],
[
13,
10
],
[
14,
11
],
[
15,
23
],
[
8,
1
]
],
"total": 51,
"name": "Sunday"
},
{
"tasks": [
[
10,
1
],
[
12,
3
],
[
13,
4
],
[
14,
17
],
[
15,
10
]
],
"total": 35,
"name": "Monday"
},
{
"tasks": [
[
11,
1
],
[
12,
2
],
[
13,
8
],
[
14,
13
],
[
15,
11
]
],
"total": 35,
"name": "Tuesday"
},
{
"tasks": [
[
9,
1
],
[
11,
3
],
[
12,
5
],
[
13,
7
],
[
14,
9
],
[
15,
9
]
],
"total": 34,
"name": "Wednesday"
},
{
"tasks": [
[
11,
2
],
[
12,
3
],
[
13,
4
],
[
14,
8
],
[
15,
9
]
],
"total": 26,
"name": "Thursday"
},
{
"tasks": [
[
11,
2
],
[
12,
2
],
[
13,
3
],
[
14,
9
],
[
15,
7
]
],
"total": 23,
"name": "Friday"
},
{
"tasks": [
[
10,
1
],
[
12,
5
],
[
13,
10
],
[
14,
3
],
[
15,
3
]
],
"total": 22,
"name": "Saturday"
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
font-size:10px;}
.axis path,.axis line {
fill: none;
stroke:#b6b6b6;
shape-rendering: crispEdges;}
.tick text {
fill:#999;}
g.journal.active{
cursor:pointer;}
text.label {
font-size:12px;
font-weight:bold;
cursor:pointer;}
text.value {
font-size:12px;
font-weight:bold;}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var margin = {top: 20, right: 200, bottom: 0, left: 20},
width = 400,
height = 650;
var start_time = 01,
end_time = 24;
var c = d3.scale.category20c();
var x = d3.scale.linear()
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
if (error) throw error;
x.domain([start_time, end_time]);
var xScale = d3.scale.linear()
.domain([start_time, end_time])
.range([0, width]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 0 + ")")
.call(xAxis);
// console.log(data);
for (var j = 0; j < data.length; j++) {
var g = svg.append("g").attr("class","task");
var circles = g.selectAll("circle")
.data(data[j]['tasks'])
.enter()
.append("circle");
var text = g.selectAll("text")
.data(data[j]['tasks'])
.enter()
.append("text");
var rScale = d3.scale.linear()
.domain([0, d3.max(data[j]['tasks'], function(d) { return d[1]; })])
.range([2, 9]);
circles
.attr("cx", function(d, i) { return xScale(d[0]); })
.attr("cy", j * 20 + 20)
.attr("r", function(d) { return rScale(d[1]); })
.style("fill", function(d) { return c(j); });
text
.attr("y", j * 20 + 25)
.attr("x",function(d, i) { return xScale(d[0])-5; })
.attr("class","value")
.text(function(d){ return d[1]; })
.style("fill", function(d) { return c(j); })
.style("display","none");
g.append("text")
.attr("y", j * 20 + 25)
.attr("x",width + 20)
.attr("class","label")
.text(data[j]['name'],30,"...")
.style("fill", function(d) { return c(j); })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
};
function mouseover(p) {
var g = d3.select(this).node().parentNode;
d3.select(g).selectAll("circle").style("display","none");
d3.select(g).selectAll("text.value").style("display","block");
}
function mouseout(p) {
var g = d3.select(this).node().parentNode;
d3.select(g).selectAll("circle").style("display","block");
d3.select(g).selectAll("text.value").style("display","none");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment