Data Viz 3 Group C

This scatterplot was based on a movies dataset consisting of Movie Name, Revenue (in millions), Budget (in millions), ROI, Genre, and Rating. The plot shows the relationship between Revenue (x-axis) and Budget (on the y-axis), with visual encodings of ROI as size and Genre as color.

Detail on demand (the Movie name and exact Revenue and Budget amounts) is available by hovering over each circle.

Filtering is also available by clicking on a specific genre in the legend, so that only that genre is displayed. Clicking again on the genre will again display all genres.

Built with blockbuilder.org

<!DOCTYPE html>
		<html>
		  <head>
		    <meta charset="utf-8">
        <h1 style="font-size:34px">Comparing Movie Budget vs. Revenue</h1>
      
		   
        	<script src="https://d3js.org/d3.v3.min.js"></script>
		    <link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet"> 
		  </head>
		  
		  <style>
        
        
		body {
		  font: 12px "Raleway Dots";
		}
        
		.axis path,
		.axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}
    
    
		.dot {
		  stroke: #FFF;
		}
		
		.tooltip {
		  position: absolute;
		  width: 200px;
		  height: 28px;
		  pointer-events: none;
		}
		  </style>
		 <body>		
	
	<script>

// setup margins
    var margin = {top: 20, right: 22, bottom: 30, left: 40},
		    width = 900 - margin.left - margin.right,
		    height = 400 - margin.top - margin.bottom;
		
		// setup x 
    		// returns the value to encode
		var xValue = function(d) { return d.Revenue;},
        // maps value to a visual display encoding, such as a pixel position
		    xScale = d3.scale.linear().range([0, width]), 
        // maps from data value to display value
		    xMap = function(d) { return xScale(xValue(d));}, 
        //sets up axis
		    xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 
		
		// setup y
		var yValue = function(d) { return d["Budget cost"];}, 
		    yScale = d3.scale.linear().range([height, 0]), 
		    yMap = function(d) { return yScale(yValue(d));},
		    yAxis = d3.svg.axis().scale(yScale).orient("left");
		
		// setup range for radius
		var r = d3.scale.linear()
		    .range([7, 25]);
		
		// setup fill color based on genre
		var cValue = function(d) { return d.Genre;},
		    color = d3.scale.category10();
		      
		// add the graph canvas to the body of the webpage
		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 + ")");
		
    // set up tooltip
		var tooltip = d3.select("body").append("div")
		    .attr("class", "tooltip")
		    .style("opacity", 0);   
			    
		//loading the data   
		    d3.csv("movies.csv", function (error, data) {
		      
		// change string (from CSV) into number format
		  data.forEach(function(d) {
		    d.Revenue = +d.Revenue;
		    d["Budget cost"] = +d["Budget cost"];
		    d.ROI = +d.ROI;
		//    console.log(d);
		  });
		
		// create domains for x, y, and radius
		  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
		  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
		  r.domain(d3.extent (data, function (d)  {return d.ROI;}));
		
		  // create x-axis
		  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("Revenue in millions");
		
		  // create y-axis
		  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 in millions");
		
		  // draw dots
		  svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")   
        .attr("r", function(d) {return r(d.ROI)})
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("opacity", 0.8)
        .style("fill", function(d) { return color(cValue(d));}) 
        .on("mouseover", function(d) {
         // on mouseout, use D3 to select element and double size
			    d3.select(this).attr({
			      r: function(d) {return r(d.ROI)*2}
			    });
        	//on mouseover, show tooltip by increasing opacity
		          tooltip.transition()
		               .duration(200)
		               .style("opacity", .9);
		          tooltip.html(d["Movie"] + "<br/> ($" + xValue(d) 
			        + ", $" + yValue(d) + ")")
		               .style("left", (d3.event.pageX + 5) + "px")
		               .style("top", (d3.event.pageY - 28) + "px");
		      })
		      .on("mouseout", function(d) {
         // on mouseout, use D3 to select element and reduce size to normal
			    d3.select(this).attr({
			      r: function(d) {return r(d.ROI)}
			    });
        	// on mouseout, hide tooltip by setting opacity to 0
		          tooltip.transition()
		               .duration(500)
		               .style("opacity", 0);
		      });
		
			// setup clicked variable
      var clicked = ""
			    
		  // draw legend
		  var legend = svg.selectAll(".legend")
		      .data(color.domain())
		    	.enter().append("g")
		      .attr("class", "legend")
		      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
		
		  // draw legend colored rectangles
		  legend.append("rect")
		      .attr("x", width - 18)
      		.attr("y", 20)
		      .attr("width", 18)
		      .attr("height", 18)
		      .style("fill", color)
  				.on("click",function(d){
  					 d3.selectAll(".dot").style("opacity",0.8)
   
   //filter genres on legend click
   if (clicked !== d){
     d3.selectAll(".dot")
       .filter(function(e){
       return e.Genre !== d;
     })
       .style("opacity",0.1)
     clicked = d
   }
    else{
      clicked = ""
    }
  });
		  // draw legend text
		  legend.append("text")
		      .attr("x", width - 24)
		      .attr("y", 30)
		      .attr("dy", ".35em")
		      .style("text-anchor", "end")
		      .text(function(d) { return d;})
		    });
		   </script>
		  </body>
		</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js