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: #ddddff; } svg { background-color: white; } </style> </head> <body> <script type="text/javascript"> //All variables var margin = {top:50, right:10, bottom:0, left:10} body = d3.select("body") svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 800), barX = 400, barHeight = 17, barSpacing = 20, labelSpacing = 10 //Loading Data and Render d3.csv("Oscar Winner.csv", function(data) { svg.selectAll("g") .data(data) .enter() .append("g") var barGroup = d3.selectAll("g") //Drawing the banding barGroup.append("rect") .attr({ 'x':0, 'y':function(d, i) { return i * barSpacing + margin.top;}, 'width': 800, 'height':barSpacing, 'fill': function(d,i){if (i%2==0) {return 'gray';} return 'white';}, 'fill-opacity':'0.05' }) //Drawing the bars barGroup.append("rect") .attr('width',0) .attr("fill","#fff") .transition() .duration(1000) .attr({ 'x':barX, 'y':function(d, i) { return i * barSpacing + margin.top;}, 'width': function(d) {return d.BoxOfficeMM / 5000000;}, 'height':barHeight, 'stroke':"#ccc", 'fill':"steelblue" }) //Drawing the titles of the movies barGroup.append("text") .text(function(d) { return d.Picture + " (" + d.Year + ")"; }) .attr({ "font-size":12, "x":barX - 10, "y":function(d, i) {return i * 20 + 10 + margin.top+3;}, "text-anchor":"end", "font-family":"Georgia", "fill":"black" }) //Drawing the Box Office of the movies barGroup.append("text") .text(function(d) { return "$" + d.BoxOfficeMM/1000000 + "M"; }) .attr({ "font-size":12, "x":function(d) {return d.BoxOfficeMM / 5000000 +barX +labelSpacing;}, "y":function(d, i) {return i * 20 + 10 + margin.top;}, "text-anchor":"start", "font-family":"Georgia", "fill":"gray" }) }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js