Oscar Winners Using D3 Bar Chart

<!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: #ddddff;
			}

svg {
				background-color: white;
			}

</style>
	</head>
	<body>

//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