D3 Examples - Line Chart Issues

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.js"></script>
    <!--    // <script type="text/javascript" src="/../js/d3.min.js"></script> -->
        <style>
        h1 {
            border-bottom: 2px solid green;
            width: auto;
        }
/*      .axis line {
            stroke: #000;
            stroke-width: .1;
        }
        .axis path {
            display:none;
        }
        .axis text {
            font-size: 14px;
        }*/
        
        </style>
​
    </head>
    <body>
        <div class="allContent">
            <div class="barGraph-title"></div>
            <div class="playAll">
                    <div class="switch"></div>
            </div>
            <div class="buttonContainer"></div>
            <div class="clearfix"></div>
            <div class="lineGraph"></div>
            <div class="source"
                <span>Source:</span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
            </div>
        </div>
​
        
        <script type="text/javascript">     
​
            var margin = {top:50,right:80,bottom:50,left:40};
            var width = 300 - margin.left - margin.right;
            var height = 200- margin.top - margin.bottom;
​
          var color = d3.scale.linear().range(['#B8B800','#296629'])
​
            var tempColor, playInterval, worldTotal;
            var activeCircle,innerCircle,tooltipcolor,oldColor;
            var years = ["2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012"]
            //var years = d3.range(2002, 2012+1)
            var currentYear = 2002; 
            var dateFormat = d3.time.format("%Y")
            // var testdate = dateFormat.parse(currentYear)
            // console.log(testdate)
​
            var source = d3.select("body")
            var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)        
                .append("g").attr("transform","translate(90,30)")
            var dateFormat = d3.time.format("%Y")
​
            //Define Y
            var yScale = d3.scale.linear().range(height,0)//.domain([100,0])
            var yAxis = d3.svg.axis().orient("left").scale(yScale)
​
            //Define X
            var xScale = d3.time.scale().range([0,width])//.domain([0,100]) 
            var xAxis = d3.svg.axis().orient("bottom").scale(xScale)
                .tickFormat(function(d) { return dateFormat(d) } ) //.tickFormat(dateFormat)
​
            //svg.append("g").attr("class", "y axis").call(yAxis)
            svg.append("g").attr("class", "x axis").call(xAxis)//.attr("transform","translate(0,100)")
​
            //valueLine
            var valueLine = d3.svg.line()
                .x(function(d) { console.log( dateFormat.parse(d.year)); return xScale(dateFormat.parse(d.year)) })
                .y(function(d) { return yScale(+d.amount)})
        
            // barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
            // barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
            var dataNest =[];
            var dataset = [];
​
            d3.csv("data.csv", function(error,data) {
​
                for(i = 0; i < data.length; i++) {
                    dataset[i] = { country: data[i].Location,
                    years: []
                    }
​
                    for(j = 0; j < years.length; j++) {
                        dataset[i].years.push({ 
                            year: years[j],
                            amount: data[i][years[j]]
                        })
                    }
                }
                    console.log(dataset)
​
                xScale.domain([2002,2012])
                // .domain([
                //      d3.min(years, function(d) { return dateFormat.parse(d)}),
                //      d3.max(years, function(d) { return dateFormat.parse(d)} )
                //])
                yScale.domain([
                    d3.max(dataset, function(d) { 
                        return d3.max(d.years, function(d) { 
                        return +d.amount 
                            })
                    })
                ])
​
                var groups = svg.selectAll("g").data(dataset).enter().append("g")
​
                groups.append("title").text(function(d) { return d.country })
​
                groups.selectAll("path").data(function(d) {  return [d.years] })
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("d", valueLine)
                    .attr("fill", "none")
                    .attr("stroke", "#981E32")
                    .attr("stroke-width", 2);
​
            svg.append("g").attr("class", "x axis").attr("transform","translate(0," + width + ")").call(xAxis)
            svg.append("g").attr("class", "y axis").call(yAxis)
​
            })
    
        </script>
    </body>
</html>
    