D3 Examples - DVD32015 : Module 6

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style>
            .axis path,
            .axis line {
                fill: none;
                stroke: #aaaaaa;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
    </style>
</head>
<body>
    <h1>The delivery amount of liquor in Korea</h1>
    <p><strong style="color:#00A178">Soju</strong> and <strong style="color:#FFC800">Beer</strong>, unit: 1000kl</p>
    <script>
    var width=890,
        height=500,
        padding = [ 20, 10, 50, 100 ],
        dateFormat = d3.time.format("%Y");   
​
        //scales
        xScale = d3.time.scale()
                    .range([ padding[3] ,width-padding[3]]),
​
​
        yScale = d3.scale.linear()
                .range([ padding[0], height - padding[2] ]),
​
​
        //Axis
​
        xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(15)
                            .tickFormat(function(d){
                                return dateFormat(d);
                            });
​
​
        yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left");
​
​
        //line generator
​
        var line = d3.svg.line()
                   .x(function(d){ return xScale(dateFormat.parse(d.year)); })
                   .y(function(d){ return yScale(+d.value);  });
​
        svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
​
        //France data
        d3.csv('soju.csv',function(sojudata){
​
    
            //Italy data
            d3.csv('beer.csv',function(beerdata){
​
                var merged = sojudata.concat(beerdata);
                console.log(merged);
​
                xScale.domain([
                        d3.min(merged,function(d){
                            return dateFormat.parse(d.year);
                        }),
                        d3.max(merged,function(d){
                            return dateFormat.parse(d.year);
                        })
​
                    ]);
​
                yScale.domain([
                      d3.max(merged,function(d){
                          return +d.value;
                      }), 0 ]);
​
                svg.data([ sojudata ])
                        .append("path")
                        .attr("class", "line soju")
                        .attr("d", line)
                        .attr("fill", "none")
                        .attr("stroke", "#00A178")
                        .attr("stroke-width", 4);
​
                svg.data([ beerdata ])
                        .append("path")
                        .attr("class", "line beer")
                        .attr("d", line)
                        .attr("fill", "none")
                        .attr("stroke", "#FFC800")
                        .attr("stroke-width", 4);
​
                svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (height - padding[2]) + ")")
                        .call(xAxis);
                svg.append("g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (padding[3]) + ",0)")
                        .call(yAxis);
            });
});
    </script>
</body>
</html>
    