| license: mit |
Built with blockbuilder.org
Movie Success Rate and MPAA rating
Scatter Plot
Marks Used:
Points
Channels Used:
Identity Channel
-Color Hue : MPAA rating,movie rating is represnted through color.
-Spacial Region:Gross,Movie gross collection in millions is represented through the size of the point.
Mouseover:tooltip.
forked from Mrajyalakshmi's block: Scatter Plot
| Title | MPAA | Budget | Gross | Length | Rating | |
|---|---|---|---|---|---|---|
| 8 Mile | R | 41 | 117 | 110 | 6.7 | |
| Alone in the Dark | R | 20 | 5 | 96 | 2.2 | |
| Aviator | PG-13 | 116 | 103 | 170 | 7.6 | |
| Big Fish | PG-13 | 70 | 66 | 125 | 8 | |
| Bourne Identity | PG-13 | 75 | 121 | 119 | 7.4 | |
| Break-Up | PG-13 | 52 | 116 | 105 | 5.8 | |
| Charlie's Angels: Full Throttle | PG-13 | 120 | 101 | 106 | 4.8 | |
| Collateral | R | 65 | 100 | 120 | 7.7 | |
| Crash | R | 6.5 | 55 | 113 | 8.3 | |
| Daddy Day Care | PG | 60 | 104 | 92 | 5.7 | |
| DaVinci Code | PG-13 | 125 | 213 | 149 | 6.5 | |
| Eternal Sunshine of the Spotless Mind | R | 20 | 34 | 108 | 8.6 | |
| From Justin to Kelly | PG | 5 | 12 | 81 | 1.9 | |
| Harry Potter Goblet of Fire | PG-13 | 150 | 290 | 157 | 7.8 | |
| Hostel | R | 4.5 | 47 | 94 | 5.8 | |
| House of the Dead | R | 7 | 10 | 90 | 2 | |
| Last Samurai | R | 100 | 111 | 154 | 7.8 | |
| Million Dollar Baby | PG-13 | 30 | 100 | 132 | 8.4 | |
| Pirates of the Carribbean (II) | PG-13 | 225 | 322 | 150 | 7.5 | |
| Rollerball | PG-13 | 70 | 19 | 97 | 2.7 | |
| S.W.A.T. | PG-13 | 80 | 117 | 117 | 6 | |
| Secret Window | PG-13 | 40 | 48 | 96 | 6.3 | |
| Signs | PG-13 | 70 | 228 | 106 | 7 | |
| Silent Hill | R | 50 | 47 | 127 | 6.6 | |
| Son of the Mask | PG | 74 | 17 | 94 | 2 | |
| Spider-Man 2 | PG-13 | 200 | 373 | 127 | 7.8 | |
| Star Wars III | PG-13 | 113 | 380 | 140 | 8 | |
| Sum of All Fears | PG-13 | 68 | 118 | 124 | 6.4 | |
| The Pianist | R | 35 | 33 | 150 | 8.5 | |
| The Village | PG-13 | 72 | 114 | 108 | 6.6 | |
| Van Helsing | PG-13 | 160 | 120 | 132 | 5.3 | |
| Vanilla Sky | R | 68 | 101 | 136 | 6.8 | |
| Walk the Line | PG-13 | 29 | 120 | 136 | 8.1 | |
| War of the Worlds | PG-13 | 132 | 234 | 116 | 6.7 | |
| Wedding Crashers | R | 40 | 209 | 119 | 7.3 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .dot { | |
| stroke: #000; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font-weight: bold; | |
| padding: 12px; | |
| background: #fff899; | |
| color: #ff1414; | |
| border-radius: 2px; | |
| } | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: #fff; | |
| content: #0013ef; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <center><h2>Movie Rating</h2></center> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.linear() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var color = d3.scale.category10(); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| 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 + ")"); | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<strong>Movie:</strong> <span style='color:red'>" + d.Title + "</span><br> <strong>Gross:</strong> <span style='color:red'>" + d.Gross + " million</span>"; | |
| }) | |
| svg.call(tip); | |
| d3.tsv("data.tsv", function(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| d.Gross = +d.Gross; | |
| d.Budget = +d.Budget; | |
| }); | |
| var size = d3.scale.sqrt().domain([ | |
| d3.min(data, function (d) { return d.Gross; }), | |
| d3.max(data, function (d) { return d.Gross; }) | |
| ]).range([2, 20]); | |
| x.domain(d3.extent(data, function(d) { return d.Gross; })).nice(); | |
| y.domain(d3.extent(data, function(d) { return d.Budget; })).nice(); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", -6) | |
| .style("text-anchor", "end") | |
| .text("Gross (million)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Budget (million)") | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide) | |
| .attr("opacity", 0.8) | |
| .attr("cx", function(d) { return x(d.Gross); }) | |
| .attr("cy", function(d) { return y(d.Budget);}) | |
| .attr("r", function (d) { return size(d.Gross); }) | |
| .style("fill", function(d) { return color(d.MPAA);}) | |
| var legend = svg.selectAll(".legend") | |
| .data(color.domain()) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| legend.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "end") | |
| .text(function(d) { return d;}) | |
| }) | |
| </script> |