Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/index.html

Last active December 21, 2015 01:09
Show Gist options
  • Save naxxateux/6225660 to your computer and use it in GitHub Desktop.
Save naxxateux/6225660 to your computer and use it in GitHub Desktop.
Download ZIP
Movie scenarios over the years
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
<title></title>
</head>
<body>
<div id="chart" align="center"></div>
<script type="text/javascript">
// Global variables
var margin = {top: 40, right: 40, bottom: 40, left: 40};
var width = 1200 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var scenarioTypes = ["original", "adaptation", "remake", "chronology"];
var scenarioColors = ["#EB3F2A", "#FF5879", "#FA6E21", "#FFCE18"];
var pathDefaultOpacity = 0.9;
var pathHoverOpacity = 0.5;
var pathDefaultStrokeWidth = 0;
var pathHoverStrokeWidth = 0.5;
var circleDefaultOpacity = 0.1;
var circleHoverOpacity = 0.5;
var circleRadius = 3;
var tickTextPadding = {top: 3};
var hoverAnimationDuration = 250;
// Utilities
// Main unit
d3.csv("years-scenarios.csv", function(error, stackData) {
if (error) {
console.log(error);
} else {
// Create initial SVG
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Transpose the data into layers by scenario
var stack = d3.layout.stack()
.offset("silhouette");
var scenarios = stack(scenarioTypes.map(function(scenario) {
return stackData.map(function(d) {
return {x: d.year, y: +d[scenario]};
});
}));
// Create scales
var x = d3.scale.linear()
.domain(d3.extent(stackData, function(d) { return d.year; }))
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(scenarios, function(scenario) { return d3.max(scenario, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);
// Create area data for path
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
// Draw year ticks
var ticks = svg
.append("g")
.attr("class", "ticks")
.selectAll("g")
.data(stackData)
.enter()
.append("g")
.attr("class", "tick")
.attr("id", function(d) { return d.year; })
.attr("transform", function(d, i) { return ("translate(" + x(d.year) + ", 0)"); });
ticks
.append("line")
.attr("class", "tick-line")
.attr("y2", height);
ticks
.append("text")
.attr("class", "tick-name")
.attr("y", height + tickTextPadding.top)
.text(function(d) { return d.year; });
// Draw paths
var streamgraph = svg
.append("g")
.attr("class", "streamgraph");
streamgraph
.append("g")
.attr("class", "paths")
.selectAll("path")
.data(scenarios)
.enter()
.append("path")
.attr("class", "scenario")
.attr("d", area)
.attr("opacity", pathDefaultOpacity)
.style("fill", function(d, i) { return scenarioColors[i]; })
.style("stroke-width", pathDefaultStrokeWidth)
.on("mouseover", function(d, i) {
svg.selectAll(".scenario")
.transition()
.duration(hoverAnimationDuration)
.attr("opacity", function(d, j) {
return j != i ? pathHoverOpacity : pathDefaultOpacity;
})
.style("stroke-width", function(d, j) {
return j != i ? pathDefaultStrokeWidth : pathHoverStrokeWidth;
})
})
.on("mouseout", function(d, i) {
svg.selectAll(".scenario")
.transition()
.duration(hoverAnimationDuration)
.attr("opacity", pathDefaultOpacity)
.style("stroke-width", pathDefaultStrokeWidth);
});
// Draw detailed info circles
var circles = streamgraph
.append("g")
.attr("class", "circles");
for (i = 0; i < scenarios.length; i++) {
for (j = 0; j < scenarios[0].length; j++) {
if (scenarios[i][j].y != 0) {
circles
.append("circle")
.attr("class", "detailed-info-circle")
.attr("id", i)
.attr("cx", x(scenarios[i][j].x))
.attr("cy", (y((scenarios[i][j].y0 + scenarios[i][j].y/2))))
.attr("r", circleRadius)
.attr("opacity", circleDefaultOpacity)
.on("mouseover", function() {
var id = d3.select(this).attr("id");
d3.select(this)
.transition()
.attr("opacity", circleHoverOpacity);
svg.selectAll(".scenario")
.transition()
.duration(hoverAnimationDuration)
.attr("opacity", function(d, index) {
return index != +id ? pathHoverOpacity : pathDefaultOpacity;
})
.style("stroke-width", function(d, index) {
return index != +id ? pathDefaultStrokeWidth : pathHoverStrokeWidth;
})
})
.on("mouseout", function() {
d3.select(this)
.transition()
.attr("opacity", circleDefaultOpacity);
svg.selectAll(".scenario")
.transition()
.duration(hoverAnimationDuration)
.attr("opacity", pathDefaultOpacity)
.style("stroke-width", pathDefaultStrokeWidth);
});
}
}
}
}
});
</script>
</body>
</html>
Raw
style.css
body {
background-color: #ffffff;
}
path.scenario {
stroke: #000000;
}
text {
font-family: Arial, sans-serif;
dominant-baseline: hanging;
}
text.tick-name {
font-size: 10px;
text-anchor: middle;
}
line.tick-line {
stroke-width: 0.07;
stroke: #000000;
}
circle.detailed-info-circle {
fill: #000000;
}
Raw
years-scenarios.csv
year original adaptation remake chronology
1980 274437848 324719322 0 675195037
1981 752264782 182742420 0 162998508
1982 1235070569 372114541 0 203962088
1983 262893670 164223489 65884703 763522214
1984 1208068996 0 0 409578317
1985 571295415 360280192 0 697647348
1986 1087792200 84542002 0 355877359
1987 747956726 487926653 76270454 299965036
1988 1051411161 790061040 0 428621821
1989 755584101 834035882 0 1249370532
1990 1647751219 906811876 0 484068530
1991 179033791 2149355330 0 519843345
1992 995478094 1146250412 0 947554906
1993 461678651 3061119019 0 0
1994 1795008128 1586489018 378882411 0
1995 953488815 1252043149 0 1046639232
1996 2162351567 1412015629 273961019 0
1997 3938383575 589390539 0 957979101
1998 2407616371 589764857 673470899 0
1999 1856509954 448191819 726825574 1872909770
2000 1907052690 970109890 330444045 545902562
2001 1012037201 2692906653 450717150 1153492862
2002 1160251174 1180081477 0 3328455281
2003 1406316096 456758981 0 4057114996
2004 1541482883 1109309272 0 3017653591
2005 1396825297 2185946079 550517357 1746908683
2006 846312083 1332720692 0 3563994161
2007 623722818 2278195822 0 4050500745
2008 1777399543 1191533465 0 3400851116
2009 4769713107 1009959495 0 3367230198
2010 1368645015 2109891805 0 4096594547
2011 0 563750323 0 7354461910
2012 0 1641030344 752215857 6848446200
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment