Skip to content

Instantly share code, notes, and snippets.

@alansmithy alansmithy/index.html

Last active Nov 1, 2015
Embed
What would you like to do?
The Costner Effect
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>The Costner Effect</title>
<style>
body{font-family:sans-serif;background-color:#dedede}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background-color: white;
box-shadow: 2px 2px 4px 5px #ccc;
}
.yaxis path{fill:none;stroke:none;}
.yaxis line{
fill: none;
stroke: #333333;
stroke-width: 0.1%
}
.yaxis text{
font-size:12px;
}
.xaxis path,line{fill:none;stroke:none;}
.xaxis text{
font-size:10px;
}
g.bar {
cursor:pointer;
}
g.bar text {
fill:#fff;
font-size:10px;
text-anchor:middle;
opacity:0;
}
g.bar:hover rect {
fill: skyblue;
}
g.bar:hover text {
opacity: 1;
}
g.lines {
pointer-events:none;
fill:none;
stroke-width:6px;
stroke:white;
stroke-linecap:round;
stroke-linejoin:round;
}
.titles {
font-weight:bold;
fill-opacity:0.2;
}
</style>
</head>
<body>
<div id="container">
</div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var w = 700;
var h = 300;
var margin={'left':50,
'right':20,
'top':70,
'bottom':50};
var parseDate = d3.time.format("%Y").parse;
d3.csv("kevin.csv", function(error, data) {
//parse the data
data.forEach(function(d) {
d.babies=+d.babies;
d.gross=+d.gross;
});
var dates = data.map(function(d){return d.date});
//extent,scales,axes
//var xDomain = d3.extent(data, function(d) {return d.date;});
var max = d3.max([d3.max(data, function(d) {return d.babies;}),d3.max(data, function(d) {return d.gross;})]);
var yDomain = [0,max]
var xScale = d3.scale.ordinal()
.domain(dates)
.rangeRoundBands([0,w],0.05)
var yScale = d3.scale.linear()
.domain(yDomain)
.range([h,0])
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(4)
//document structure
var svg = d3.select("#container").append("svg")
.attr("width",function(){
return margin.left+w+margin.right;
})
.attr("height",function(){
return margin.top+h+margin.bottom;
})
//call y axis
svg.append("g").attr("class","yaxis").attr("transform",function(){
return "translate("+margin.left+","+margin.top+")";
}).call(yAxis);
svg.append("g").attr("class","xaxis").attr("transform",function(){
return "translate("+margin.left+","+(margin.top+h)+")";
}).call(xAxis);
//create groups with bars for baby births
var groups = svg.append("g").attr("transform",function(){
return "translate(+"+margin.left+",0)"
}).selectAll("g").data(data).enter().append("g")
.attr("class","bar").attr("transform",function(d,i){
return "translate("+xScale(d.date)+",0)"
});
var rects = groups.append("rect")
.attr("height",function(d){
return 0;
//return h-yScale(d.babies)
})
.attr("width",xScale.rangeBand)
.attr("y",function(d){
return h+margin.top
//return (h+margin.top)-(h-yScale(d.babies))
})
.attr("fill","steelblue");
groups.append("text")
.attr("x",function(d){
return xScale.rangeBand()/2
})
.attr("y",function(d){
return (h+margin.top)-15;
})
.text(function(d){
return d.babies;
})
.append("tspan")
.attr("x",function(d){
return xScale.rangeBand()/2
})
.attr("dy",12)
.text("Kevs")
//line generator
var lineGen = d3.svg.line()
.x(function(d) {
return xScale.rangeBand()/2+(xScale(d.date));
})
.y(function(d) {
return yScale(d.gross);
})
//annotations
svg.append("text")
.attr("id","babyText")
.attr("fill-opacity",0)
.attr("x",260)
.attr("y",215)
.attr("fill","steelblue")
.text("babies called Kevin")
.append("tspan")
.attr("x",260)
.attr("dy",20)
.text("born in Zurich");
//annotations
svg.append("text")
.attr("id","grossText")
.attr("fill-opacity",0)
.attr("text-anchor","end")
.attr("x",margin.left+w)
.attr("y",285)
.attr("fill","orange")
.text("Costner's box office Gross")
.append("tspan")
.attr("x",margin.left+w)
.attr("dy",20)
.text("($m)");
//prepare data for line
var lineData=[];
lineData[0] = data.map(function(d){return{ "date":d.date,"gross":d.gross}});
//create group and append line
var lineGroup = svg.append("g").attr("class","lines").attr("transform",function(){
return "translate("+margin.left+","+margin.top+")";
})
var line1 = lineGroup.selectAll("path").data(lineData).enter().append("path").attr('d', function(d){ return lineGen(d); });
lineGroup.append("path").attr("d",function(){
return line1.attr("d");
}).attr("stroke","orange").attr("stroke-width","4px")
//hide line till animation
var lineLen = line1.node().getTotalLength()*2;
lineGroup.attr("stroke-dasharray",lineLen + ", "+lineLen).attr("stroke-dashoffset",lineLen);
var titles = svg.append("g").attr("class","titles");
titles.append("text")
.attr("x",margin.left)
.attr("y",30)
.attr("font-size",24)
.attr("font-weight","normal")
.text("The")
titles.append("text")
.attr("x",margin.left+10)
.attr("y",60)
.attr("font-size",48)
.text("Costner");
titles.append("text")
.attr("x",margin.left)
.attr("y",85)
.attr("font-size",36)
.attr("font-weight","normal")
.text("Effect");
//source
svg.append("text")
.attr("x",margin.left)
.attr("y",margin.top+h+margin.bottom-5)
.attr("font-size",12)
.attr("fill","#aaa")
.text("Source: canton of Zurich, TheNumbers.com");
//mouseover text
var mousetext = svg.append("text")
.attr("x",margin.left+w-10)
.attr("y",margin.top+20)
.attr("text-anchor","end")
.attr("fill","#aaa")
.text("")
var mouseinfo =svg.append("text")
.attr("x",margin.left+w-10)
.attr("y",margin.top+50)
.attr("style","fill:orange;font-size:24px;font-weight:bold")
.attr("text-anchor","end")
.text("")
groups.on("mouseover",function(d){
mousetext.text("Kevin's highlights this year:");
mouseinfo.text(d.highlights)
})
groups.on("mouseout",function(d){
mousetext.text("")
mouseinfo.text("")
})
//transitions
rects.transition()
.duration(500)
.delay(function(d,i){
return i*100;
})
.attr("height",function(d){
return h-yScale(d.babies)
})
.attr("y",function(d){
return (h+margin.top)-(h-yScale(d.babies))
})
d3.select("#babyText").transition().duration(500).delay(2500).attr("fill-opacity",1)
lineGroup.transition()
.duration(4000)
.delay(3000)
.attr("stroke-dashoffset", 0);
d3.select("#grossText").transition().duration(500).delay(5500).attr("fill-opacity",1)
});//end data load
</script>
</body>
</html>
We can make this file beautiful and searchable if this error is corrected: It looks like row 13 should actually have 4 columns, instead of 3. in line 12.
date,babies,gross,highlights
1987,41,111.78,The Untouchables
1988,62,50.8887,Bull Durham
1989,92,64.4316,Field of Dreams
1990,110,199.854,Dances With Wolves
1991,168,235.899,JFK/Robin Hood
1992,115,122.007,The Bodyguard
1993,101,31.131,A Perfect World
1994,77,41.9806,Wyatt Earp
1995,61,88.2462,Waterworld
1996,67,53.8546,Tin Cup
1997,51,17.6262,The Postman
1998,49,0
1999,46,88.0687,Play it to the Bone
2000,54,34.5921,Thirteen Days
2001,37,15.75,3000 miles to Graceland
2002,39,30.3234,Dragonfly
2003,34,58.3313,Open Range
2004,36,0
2005,27,43.0003,The Upside of Anger/Rumour Has It
2006,24,55.029,The Guardian
2007,23,28.5493,Mr. Brooks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.