xxxxxxxxxx<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> <script type="text/javascript"> //All variables var w = 800, h = 800, margin = {top:50, right:50, bottom:100, left:100} body = d3.select("body") svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h), barSpacing = 20, labelSpacing = 10 var xScale = d3.scale.linear() .range([margin.left, w - margin.right - margin.left]); var yScale = d3.scale.linear() .range([margin.top, h - margin.bottom]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //Loading Data and Render d3.csv("Oscar Winner.csv", function(data) { svg.selectAll("g") .data(data) .enter() .append("g") var circles = d3.selectAll("g") //Add the domain to the scale. Now that the data is loaded, we can start mapping the domain xScale.domain([d3.min(data, function(d) { return +d.BoxOfficeMM/1000000.0}) , d3.max(data, function(d) { return +d.BoxOfficeMM/1000000.0})]); yScale.domain([d3.max(data, function(d) { return +d.ProdBudget/1000000.0}) , d3.min(data, function(d) { return +d.ProdBudget/1000000.0})]); //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