D3 Examples - Assignment4 Line Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> D3: A Line Chart for Hong Kong GDP per Capita</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <style type>
            .line{
                fill: none;
                stroke:teal;
                stroke-width: 2px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            // Reference: https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0
​
            var title = "Hong Kong GDP per capita Since 1960";
​
            var margin = {top:5, right:5, bottom:100, left:100};
            var w_full = 1200;
            var h_full = 600;
​
            var w = w_full - margin.right - margin.left;
            var h = h_full - margin.top - margin.bottom;
​
            var x = d3.scaleTime()
                      .range([0,w]);
​
            var y = d3.scaleLinear()
                      .range([h,0]);
​
            var parseTime = d3.timeParse("%Y");
​
            var valueLine = d3.line()
                              .x(function(d){return x(d.Year); })
                              .y(function(d){return y(d.GDPperCapita); });
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",w_full)
                        .attr("height",50)
                        .append("g")
                        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
            svg.append("text")
               .text(title)
               .attr("x",w_full/2)
               .attr("y",25)
               .style("text-anchor","middle")
               .style("fill","black")
               .style("font-size",16);
            // Set up a svg on the top to put title
​
​
            d3.csv("hkgdppercapita.csv", function(error, data){
                if(error) throw error;
​
                data.forEach(function(d){
                    d.Year = parseTime(d.Year.toString());
                    d.GDPperCapita = +d.GDPperCapita;
                });
​
                x.domain(d3.extent(data,function(d){return d.Year;}));
                y.domain([0,d3.max(data,function(d){return 1.2*d.GDPperCapita;})]);
​
                svg = d3.select('body').append('svg')
                        .attr("width",w_full)
                        .attr("height",h_full)
                        .append("g")
                        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
                var xAxis = d3.axisBottom(x);
                var yAxis = d3.axisLeft(y);
​
                var xAxisEle = svg.append('g')
                          .classed('x axis',true)
                          .attr('transform','translate(0,'+h+')')
                          .call(xAxis);
                // Append x-axis and its labels
​
                xAxisEle.append("text")
                        .attr("x",w_full/2)
                        .attr("y",100)
                        .style("text-anchor","middle")
                        .style("fill","black")
                        .attr("dy","-4.5em")
                        .style("font-size",12)
                        .text("Year");
​
                var yAxisEle = svg.append("g")
                                  .classed("y axis",true)
                                  .call(yAxis);
​
                var yText = yAxisEle.append("text")
                                    .attr('transform', 'rotate(-90)translate(-' + h/2 + ',0)')
                                    .style("text-anchor","middle")
                                    .style("fill","black")
                                    .attr("dy","-4.5em")
                                    .style("font-size",12)
                                    .text("GDP per Capita (US$)");
                // Append y-axis and its labels
​
                svg.append("path")
                   .data([data])
                   .attr("class","line")
                   .attr("d",valueLine);
                // Plot the Line
​
            })
        </script>
    </body>
</html>
    