Last active
August 29, 2015 14:05
-
-
Save peachyo/1be0eddaa0fa20386619 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 5<!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .bar { | |
| fill: steelblue; | |
| } | |
| .bar:hover { | |
| fill: brown; | |
| } | |
| .title { | |
| font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .axis { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <svg class="chart"></svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 120, left: 80}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1, .3); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(8) | |
| .tickFormat(function(d){return "$"+d;}); | |
| var svg = d3.select("body").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 + ")"); | |
| d3.tsv("movies.csv", type, function(error, data) { | |
| var minBudget=d3.min(data,function(d){return d.budget;}); | |
| var maxBudget = d3.max(data, function(d){return d.budget;}); | |
| x.domain(data.map(function(d) { return d.movie; })); | |
| y.domain([minBudget*.95, maxBudget]); | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("x", x(data[1].name)) | |
| .attr("y", -26) | |
| .text("Biggest Budget Movies"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll(".tick text") | |
| .call(wrap, x.rangeBand()); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .transition() | |
| .duration(500) | |
| .delay(function(d,i){return i*30;}) | |
| .ease("elastic") | |
| .attr("class", "bar") | |
| .attr("x", function(d) {return x(d.movie); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { console.log(d.budget); return y(d.budget); }) | |
| .attr("height", function(d) { return height - y(d.budget); }); | |
| }); | |
| function wrap(text, width) { | |
| text.each(function() { | |
| var text = d3.select(this), | |
| words = text.text().split(/\s+/).reverse(), | |
| word, | |
| line = [], | |
| lineNumber = 0, | |
| lineHeight = 1.1, // ems | |
| y = text.attr("y"), | |
| dy = parseFloat(text.attr("dy")), | |
| tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); | |
| while (word = words.pop()) { | |
| line.push(word); | |
| tspan.text(line.join(" ")); | |
| if (tspan.node().getComputedTextLength() > width) { | |
| line.pop(); | |
| tspan.text(line.join(" ")); | |
| line = [word]; | |
| tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
| } | |
| } | |
| }); | |
| } | |
| function type(d) { | |
| d.budget = +d.budget; | |
| d.domestic = +d.domestic; | |
| d.world = +d.world; | |
| return d; | |
| } | |
| </script> |
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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