D3 Examples - alcohol consumption

xxxxxxxxxx
 
<!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>
            
​
        <script type="text/javascript">     
            
            var w=800;
            var h=600;
            var padding=[20, 10, 50, 70];
            
            var xScale = d3.scale.linear()
                                .range([padding[3], w-padding[1] - padding[3]]);
            var yScale = d3.scale.linear()
                                .range([padding[0],h-padding[2] ]);
            var zSizeScale= d3.scale.linear()
                                .range([1, 20]);
            
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .ticks(5)
                            .tickFormat(d3.format(",.0f"))
                            .orient("bottom");
            
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .tickFormat(d3.format(",.0f"))
                            .orient("left");
            
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            
            //Load in contents of CSV file
            d3.csv("drinks.csv", function(data) {
                
            data.sort(function(a,b){
                return d3.descending(+a.wine_servings,+b.wine_servings);
            });
                
            xScale.domain([
                d3.min(data, function(d){
                return +d.beer_servings;
            }), d3.max(data, function(d){
                return +d.beer_servings;
            }) ]);
                
            yScale.domain([d3.max(data, function(d){
                return +d.wine_servings;
            }),d3.min(data, function(d){
                return +d.wine_servings;
            }) ]);
            zSizeScale.domain([d3.min(data, function(d){
                return +d.spirit_servings;
            }),d3.max(data, function(d){
                return +d.spirit_servings;
            }) ]);
                
                
​
            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>
    