alcohol consumption

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        
        <style type="text/css">
			
			body {
				
                background-color: #ffffff;
			}

svg {
				background-color: #ffffff;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
            circle:hover {
				fill: #adff2f;
      
			}

}

</style>
        
	</head>
	<body>
        <h1>About alcohol consumption</h1>
        <h3>Data taken from <strong>fivethirtyeight.com</strong></h3>
        <p>How much alcohol is consumed per country. Data is divided in beer consumption (x-axis), spirits consumption(y-axis) and wine consumption (size)</p>
        <p>All data can found here: be https://fivethirtyeight.com/datalab/dear-mona-followup-where-do-people-drink-the-most-beer-wine-and-spirits/ </p>
        <p><strong>cheers!</strong></p>

circ=svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            
            circ.attr("cy",function(d){
                return yScale(d.wine_servings);
            })
            .attr("r", 1)
            .attr("cx",function(d){
                return xScale(d.beer_servings);  
                  })
            .attr("r",3)
            .attr("fill","#BF7500")
            .append("title")
            .text(function(d){
                return "In total " +d.country + " consumes " + d.total_litres_of_pure_alcohol + " total litres of pure alcohol";
            })
            
            circ.transition()
                    .delay(function(d,i){
                    return i*100;
            })
					.duration(5)
					.attr("r", 7)
                    .attr("r", function(d){
                return zSizeScale(d.spirit_servings);  
                  })
                
                    .style("stroke", "black")
                    .style("fill-opacity", .8)
            
                   
                
            	svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);
                
                	svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);
               
                // labels
                svg.append("text")      // text label for the x axis
                    .attr("x", w/2 )
                    .attr("y", h-(padding[3]/4) )
                    .style("text-anchor", "middle")
                    .style("fill", "#BF7500")
                    .text("Beer");
                
                svg.append("text")      // text label for the y axis
                //check this for orientation
                //https://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html
                    .attr("y",30 )
                    .attr("x", -h/2)
                    .style("text-anchor", "middle")
                    .text("Spirits")
                    .style("fill", "#BF7500")
                    .attr("transform", "rotate(-90)");

});
            
            d3.select("body")
            .append("p")
            .text("To have a fair comparison data average alcohol content is taken as well as average serving size. For more info read the reference ")
		</script>

</body>
</html>

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

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