Oscar Winner Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Oscar Winners</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
			}

h1 {
                color: orange;
            }
            
			svg {
				background-color: white;
			}
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            
            .text {
                font-family: sans-serif;
            }
            
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

rect:hover {
                fill: orange;   
            }

</style>
	</head>
	<body>
		<h1>Academy Awards Winners</h1>

<p>A list of Academy Awards winners from 1987 to 2004. Source: <a href="https://www.boxofficemojo.com/oscar/">Box Office Mojo</a></p>

//Drawing the circles
				circles.append("circle")
                        .attr({
                                'r': 1,
                                'cy': -100,
                                'cx': function(d) {return xScale(d.BoxOfficeMM/1000000);},
                                'stroke':"#ccc",
                                'fill':"steelblue"
                              })
                        .append("title")
                        .text(function(d) {
						return d.Picture +"("+ d.Year + ")'s budget was $" + d.ProdBudget/1000000 + "M, and generated $" + d.BoxOfficeMM/1000000 + " of box office";
					           });
                
                //circle transition
                d3.selectAll("circle")
                    .transition()
                    .delay(function(d,i){ return (d.Year-1978)*500;})
                    .duration(2000)
                    .attr({
                                'r': 10,
                                'cy': function(d) {return yScale(d.ProdBudget/1000000);},
                                'cx': function(d) {return xScale(d.BoxOfficeMM/1000000);},
                                'stroke':"#ccc",
                                'fill':"steelblue"
                              });
                
                
                //Drawing the Y-axis
                svg.append("g")
                    .attr("class","y axis")
                    .attr("transform", "translate(" + (margin.left-10) + ",0)")
                    .attr("font-size",12)
                    .call(yAxis);
                
                //Drawing the X-axis
                svg.append("g")
                    .attr("class","x axis")
                    .attr("transform", "translate(0," + (h - margin.bottom+10) + ")")
                    .attr("font-size",12)
                    .call(xAxis);                
                
                //Drawing the X-axis label
                svg.append("text")
                    .attr("x", (w-margin.right-margin.left)/2)
                    .attr("y", h-margin.bottom/2)
                    .attr("font-size",12)
                    .text("Box Office ($ Millions)");

//Drawing the Y-axis label
                svg.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", margin.left/2)
                    .attr("x", 0 - (h) / 2)
                    .attr("font-size",12)
                    .text("Budget ($ Millions)")
                    .style("text-anchor", "middle")
            });

</script>

</body>
</html>

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

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