Skip to content

Instantly share code, notes, and snippets.

@peachyo

peachyo/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peachyo/38e8d842c984b261383a to your computer and use it in GitHub Desktop.
Save peachyo/38e8d842c984b261383a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.legend circle {
fill: none;
stroke: #000;
}
.legend text {
fill: brown;
font: 10px sans-serif;
text-anchor: middle;
}
path.line {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
path.area {
fill: #e7e7e7;
}
button {
position: absolute;
top: 20px;
left: 20px;
}
.title {
position: absolute;
top: 40px;
left: 300px;
font: 20px sans-serif;
fill: #000;
}
text {
position: absolute;
font: 16px sans-serif;
fill: #000;
}
.label {
font: 10px sans-serif;
fill: #000;
}
.bubble {
fill-opacity: .5;
stroke: #fff;
stroke-width: .5px;
}
.bubble :hover {
stroke: #000;
}
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
stroke-width: 1.5px;
}
.left {
position: absolute;
left: 50px;
}
</style>
<body>
<button>Toggle</button>
<div class="title"><h6>Top 20 Biggest Budget Movies</h6></div>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 50, right: 80, bottom: 30, left: 40},
width = 960-margin.left -margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
c = d3.scale.category20(),
r = d3.scale.linear().range([5,50]),
xAxis = d3.svg.axis().scale(x).tickSize(3),
yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");
d3.select("button")
.on("click", clicked);
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 + ")");
svg.append("text")
.attr("x", -20)
.attr("y", 50)
.attr("text-anchor", "start")
.text("Domestic Gross");
var legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + 20 + "," + 120 + ")")
.selectAll("g")
.data([1e8, 5e8, 1e9])
.enter().append("g");
var formatDate = d3.time.format("%m/%d/%Y");
var toggle;
var movies_data;
d3.csv("movies.csv", function(data) {
data.forEach(function(d){
d.date=formatDate.parse(d.date);
d.budget = +d.budget;
//convert string into number
d.domestic = +d.domestic;
d.world = +d.world;
});
var mindate = new Date(2006,1,1),
maxdate = new Date(2014,12,31);
var minBudget = d3.min(data, function(d){ return d.budget;}),
maxBudget = d3.max(data, function(d){ return d.budget;}),
minDomestic = d3.min(data, function(d){ return d.domestic;}),
maxDomestic = d3.max(data, function(d){ return d.domestic;}),
minWorld = d3.min(data, function(d){ return d.world;}),
maxWorld = d3.max(data, function(d){ return d.world;});
x.domain([mindate, maxdate]);
y.domain([minBudget*0.9, maxBudget*1.2]);
r.domain([d3.min([minDomestic,minWorld]), d3.max([maxDomestic, maxWorld])]);
legend.append("circle")
.attr("cy", function(d) { return -r(d); })
.attr("r", r);
legend.append("text")
.attr("y", function(d) { return -2 * r(d); })
.attr("dy", "1.3em")
.text(d3.format(".1s"));
//define the data for the circle
var elemEnter = svg.append("g").attr("class","circles")
.selectAll("circle").data(data).enter();
elemEnter.append("circle")
.attr("class", "bubble")
.attr("cx", function(d){ return x(d.date); })
.attr("cy", function(d){ return y(d.budget); })
.attr("r", function(d){ return r(d.domestic);})
.style("fill", function(d){ return c(d.domestic);});
elemEnter.append("text")
.attr("class", "label")
.attr("x", function(d){ return x(d.date)-5;})
.attr("y", function(d){ return y(d.budget)-10;})
.attr("text-anchor", "start")
.text(function(d){return d.movie;});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
movies_data = data;
});
function clicked(){
console.log("clicked");
toggle = !toggle;
if(toggle){
svg.select(".circles").selectAll("circle").data(movies_data).transition().ease("linear")
.attr("r", function(d){ return r(d.world);})
.style("fill", function(d){ return c(d.world);})
svg.select("text")
.attr("class", "title").transition().ease("linear")
.text("Worldwide Gross");
}
else{
svg.select(".circles").selectAll("circle").data(movies_data).transition().ease("linear")
.attr("r", function(d){ return r(d.domestic);})
.style("fill", function(d){ return c(d.domestic);})
svg.select("text")
.attr("class", "title").transition().ease("linear")
.text("Domestic Gross");
}
}
</script>
Raw
movies.csv
date movie budget domestic world
12/18/2008 Avatar 425000000 760507625 2783918982
5/24/2007 Pirates of the Caribbean: At World's End 300000000 309420425 960996492
7/20/2012 The Dark Knight Rises 275000000 448139099 1079343943
3/9/2012 John Carter 275000000 73058679 282778100
7/2/2013 The Lone Ranger 275000000 89289910 259989910
11/24/2010 Tangled 260000000 200821936 586581936
5/4/2007 Spider-Man 3 258000000 336530303 890875303
12/13/2013 The Hobbit: The Desolation of Smaug 250000000 258366855 950466855
5/20/2011 Pirates of the Caribbean: On Stranger Tides 250000000 241063875 1043663875
7/15/2009 Harry Potter and the Half-Blood Prince 250000000 301959197 934416487
12/14/2012 The Hobbit: An Unexpected Journey 250000000 303003568 1014703568
6/28/2006 Superman Returns 232000000 200120000 390874000
11/14/2008 Quantum of Solace 230000000 169368427 591692078
6/14/2013 Man of Steel 225000000 291045518 667999518
7/7/2006 Pirates of the Caribbean: Dead Man's Chest 225000000 423315812 1060615812
5/16/2008 The Chronicles of Narnia: Prince Caspian 225000000 141621490 419490286
5/4/2012 Marvel's The Avengers 225000000 623279547 1514279547
7/3/2012 The Amazing Spider-Man 220000000 262030663 757890267
5/25/2012 Men in Black 3 215000000 179020854 624821154
6/24/2009 Transformers: Revenge of the Fallen 210000000 402111870 836519699
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment