D3 Examples - Killings by year

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title> Oakland murder data</title>
        <meta name="description" content="Murders in Oakland, by year from 2000 to 2012.">
        <link rel="stylesheet" href="murder.css">
          <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        
        
        
      <script>
          
          
    var ecks;
          var wye;
           
           var w=960;
           var h=350;
           var padding = [10, 10, 50, 50];
          var dateFormat = d3.time.format("%Y");
          
          var xscale = d3.time.scale()
          .range([padding[3], w-padding[1]-padding[3]]);
          
          
          var yscale = d3.scale.linear()
          .range([10, h-50]);
          
       // yscale.domain(d3.range(150));
        
          
          
          var murderscale = d3.scale.linear()
          .domain([0, 160])
          .range([0, h-padding[0] - padding[2]]);
             
          
d3.csv("murder.csv", function(data) {
        
    
    xscale.domain([
        d3.min(data, function(d) {
            return dateFormat.parse(d.year);
        }),
        d3.max(data, function(d) {
         return dateFormat.parse(d.year);
        })
    ]);
        
    yscale.domain([160, 0
                  ]);
        
    
          
           
        var xAxis=d3.svg.axis()
           .scale(xscale)
           .orient("bottom")
           .ticks(16)
    
           .tickFormat(function (d) {
            return dateFormat(d)
           
           });
          
          var Yaxis = d3.svg.axis()
          .scale(yscale)
          .orient("left");
    
     var line = d3.svg.line()
       .x(function (d) {
    return xscale(dateFormat.parse(d.year)); 
          
       })
          .y(function (d) {
              return h-  padding[2] - (murderscale(d.killings));
          });
        
    
    
    var svg = d3.select("body")
                        .append("svg")
                         .attr("width", w)
                         .attr("height", h);
           console.log("working on data: " + w + " " + h);
  
    
    
         
             svg.data([data])
            // .enter()
             .append("path")
             .attr("class", "lineMurder")
             .attr("d", line)
             .attr ("fill", "none")
             .attr("stroke", "steelblue")
             .attr("stroke-width", 2);
             
        svg.append("g") 
          .attr("class", "xaxis")
         .attr("transform", "translate(0," + (h- padding[2] + 10)+ ")")
          .call(xAxis);
         // .orient("bottom");
          
        svg.append("g")
          .attr("class", "Yaxis")
          .attr("transform", "translate(" + (padding[3] - 15) + ",0)")
          .call(Yaxis);
            
             
          });
        </script>
  
​
    </body>
</html>
    