Skip to content

Instantly share code, notes, and snippets.

@graus

graus/README.md

Forked from dodijk/README.md
Created June 26, 2013 17:46
Show Gist options
  • Save graus/5869616 to your computer and use it in GitHub Desktop.
Save graus/5869616 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Timeline for yHistory project.

Created by Daan Odijk.

Raw
data.js
var data = {
"child": {
"26845057": {
"event_title": "July 12, 2007 Baghdad airstrike",
"event_date": "2007-07-12",
"related_entity_title": "Bradley Manning",
"related_entity_id": 27630477
},
"16760": {
"event_title": "Kosovo War",
"event_date": "1999-06-10",
"related_entity_title": "Germany",
"related_entity_id": 11867
}
},
"global": {
"540056": {
"event_title": "Euroleague Basketball",
"event_date": "2004-10-20",
"related_entity_title": "Athens",
"related_entity_id": 1216
},
"60904": {
"event_title": "Sergey Brin",
"event_date": "2003-10-14",
"related_entity_title": "Google",
"related_entity_id": 1092923
}
},
"parent1": {
"44534": {
"event_title": "Tiananmen Square protests of 1989",
"event_date": "1989-04-15",
"related_entity_title": "Google",
"related_entity_id": 1092923
},
"3975": {
"event_title": "United Kingdom general election, 2001",
"event_date": "2001-06-07",
"related_entity_title": "European Union",
"related_entity_id": 9317
},
"9288": {
"event_title": "Elvis Presley",
"event_date": "2005-02-06",
"related_entity_title": "Hot Chocolate (band)",
"related_entity_id": 1421165
}
},
"parent2": {
"11785932": {
"event_title": "Oxegen 2007",
"event_date": "2007-07-09",
"related_entity_title": "Badly Drawn Boy",
"related_entity_id": 428029
},
"23275551": {
"event_title": "Granai airstrike",
"event_date": "2009-05-04",
"related_entity_title": "Bradley Manning",
"related_entity_id": 27630477
}
}
};
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
<script src="data.js"></script>
<script src="timeline.js"></script>
</body>
</html>
Raw
style.css
text {
color: #666;
}
.brush {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.hide {
display: none;
}
Raw
timeline.js
var width = 960,
height = 440,
height2 = 60,
padding = [20, 80, 20, 20];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height+height2);
var x = d3.time.scale()
.domain([new Date(1900, 1, 1), new Date()])
.range([padding[3], width-padding[1]-padding[3]]);
var xs = x.copy().clamp(x);
var y = d3.scale.linear()
.range([padding[0], height-padding[2]])
.domain([1, 20]);
var yc = d3.scale.ordinal()
.range([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
var c = d3.scale.ordinal()
.domain(["child", "parent1", "parent2", "global"])
.range(["#d7191c","#fdae61","#abd9e9","#2c7bb6"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var xsAxis = d3.svg.axis()
.scale(xs)
.orient("bottom");
svg.append("g")
.attr("class", "xs-axis")
.attr("transform", "translate(0," + y.range()[1] + ")")
.call(xsAxis);
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + (y.range()[1]+height2) + ")")
.call(xAxis);
var brush = d3.svg.brush()
.x(x)
.on("brush", brushed);
svg.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", height)
.attr("height", height2-padding[2]);
function inDomain(value, domain) {
if (value < domain.domain()[0])
return false;
if (value > domain.domain()[1])
return false;
return true;
}
function redraw() {
if((xs.domain()[1]-xs.domain()[0]) <= 1) {
xs.domain(x.domain());
}
d3.select(".x-axis").call(xAxis);
d3.select(".xs-axis").call(xsAxis);
svg.selectAll("circle")
.attr("cx", function(d) { return xs(d.event_date); })
.attr("class", function(d) {
return inDomain(d.event_date, xs) ? "" : "hide";
})
.transition()
.attr("cy", function(d, i) { return y(yc(d.event_date)); });
svg.selectAll("text.event")
.attr("x", function(d) { return xs(d.event_date); })
.attr("class", function(d) {
return (inDomain(d.event_date, xs)) ? "event" : "event hide";
})
.transition()
.style("opacity", function(d) {
if(d.category == "child" ||
d3.selectAll('circle[class=""]')[0].length < 100) {
return 1;
}
return 0;
})
.attr("y", function(d, i) { return y(yc(d.event_date)); });
svg.selectAll("g.brush")
.call(brush);
}
function brushed() {
xs.domain(brush.empty() ? x.domain() : brush.extent());
redraw();
}
function update(dataObject) {
var data = [];
for (cat in dataObject) {
for (key in dataObject[cat]) {
var datum = dataObject[cat][key];
datum.event_date = new Date(datum.event_date);
datum["category"] = cat;
data.push(datum);
}
}
data = data.sort(function(a, b) { return a.event_date-b.event_date; });
var dates = data.map(function(d) { return d.event_date; });
yc.domain(dates);
var bars = svg.selectAll("rect.bar")
.data(data, function(d) { return d.event_title; });
var newBars = bars.enter();
bars.exit().remove();
newBars
.append("rect")
.attr("class", "bar")
.attr("y", height+height2/4)
.attr("x", function(d) { return x(d.event_date); })
.attr("width", 2)
.attr("height", height2/4)
.style("fill", function(d) { return c(d.category); });
var circles = svg.selectAll("circle")
.data(data, function(d) { return d.event_title; });
var newCircles = circles.enter();
circles.exit().remove();
newCircles
.append("circle")
.attr("cx", function(d) { return x(d.event_date); })
.attr("cy", function(d, i) { return y(yc(d.event_date)); })
.style("fill", function(d) { return c(d.category); })
.attr("r", 4)
.on("mouseout", redraw)
.on("mouseover", function(d, i) {
d3.selectAll('text.event')
.filter(function (dt) { return dt.event_title == d.event_title; })
.transition()
.style("opacity", 1);
});
var text = svg.selectAll("text.event")
.data(data, function(d) { return d.event_title; });
var newText = text.enter();
text.exit().remove();
newText
.append("text")
.attr("class", "event")
.attr("text-anchor", "begin")
.attr("dy", ".3em")
.attr("dx", ".5em")
.attr("x", function(d) { return x(d.event_date); })
.attr("y", function(d) { return y(yc(d.event_date)); })
.text(function(d) { return d.event_title; });
redraw();
}
update(data);
brushed();
var zoom = d3.behavior.zoom()
.x(xs)
.on("zoom", function() {
brush.extent(xs.domain());
redraw();
});
svg.call(zoom);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment