D3 Examples - alkoholi-kulutus-kuolema2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .axis path,
.axis line {
  fill: none;
  stroke: #d3d3d3;
  shape-rendering: crispEdges;
}
​
.axis text  {
  font-family: sans-serif;
  font-size: 12px;
}
  </style>
</head>
​
<body>
  <script>
    //DATA
​
var tilasto =[
                    {"year": 2002, "kulutus": 11.2, "kuolema": 28.2},
                    {"year": 2003, "kulutus": 11.3, "kuolema": 29.9},
                    {"year": 2004, "kulutus": 12.5, "kuolema": 35.6},
                    {"year": 2005, "kulutus": 12.7, "kuolema": 38.3},
                    {"year": 2006, "kulutus": 12.3, "kuolema": 38.4},
                    {"year": 2007, "kulutus": 12.7, "kuolema": 41},
                    {"year": 2008, "kulutus": 12.5, "kuolema": 40.2},
                    {"year": 2009, "kulutus": 12.3, "kuolema": 38.7},
                    {"year": 2010, "kulutus": 12, "kuolema": 36.6},
                    {"year": 2011, "kulutus": 12.1, "kuolema": 35.1},
                    {"year": 2012, "kulutus": 11.5, "kuolema": 36.2},
                    {"year": 2013, "kulutus": 11.6, "kuolema": 35.4},
                    {"year": 2014, "kulutus": 11.2, "kuolema": 33.7}
             ];    
 
    
    
  //Tausta-asetukset
    var margin = {top: 30, right: 20, bottom: 30, left: 30},
    w = 900 - margin.left - margin.right
    h = 500 - margin.top - margin.bottom;
    
  var svg = d3.select("body")
  .append("svg")
  .attr("width", w + margin.left + margin.right)
  .attr("height", h + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
  //akselisto
            
    var xScale = d3.scale.linear()
        .domain([11, d3.max(tilasto, function(d) { return d.kulutus; })])
        .range([0, (w-margin.left)])
    
    var yScale = d3.scale.linear()
        .domain([27, d3.max(tilasto, function(d) { return d.kuolema; })])
        .range([(h-margin.top), 0])
​
    var xAxis = d3.svg.axis()
            .scale(xScale)
      .orient("bottom")
      .ticks(5);
    
    var yAxis = d3.svg.axis()
            .scale(yScale)
      .orient("left")
      .ticks(5);
​
        svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + margin.left + "," + (h - margin.bottom) + ")")
      .call(xAxis);
    
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin.left +  ",0)")
      .call(yAxis);
    
 //ViivaTilasto
    
var lineFunction = d3.svg.line()
                .x(function(d) { return xScale(d.kulutus); })
                .y(function(d) { return yScale(d.kuolema); })
                .interpolate("cardinal");
    
        svg.selectAll("#line")
            .data(tilasto)
            .enter()
                .append("path")
            .attr("d", lineFunction(tilasto))
            .attr("stroke", "#A1003E")
            .attr("stroke-width", 1)
            .attr("fill", "none")
            .attr("opacity", 0.1);;
​
   
   
    
    //PallotTilasto
    
    svg.selectAll("circle")
        .data(tilasto)
        .enter()
        .append("circle")
        .attr("cx", function(d) { return xScale(d.kulutus)})
        .attr("cy", function(d) { return yScale(d.kuolema)})
        .attr("r", function(d) { return 2})
        .attr("fill", "white")
        .attr("stroke-width", 2)
        .attr("stroke", "#A1003E")
        .on("mouseover", function(d) { return d3.select(this).attr("fill", "yellow");})
        .on("mouseout", function(d) { return d3.select(this).attr("fill", "white");}); 
    
    svg.selectAll("#labels")
        .data(tilasto)
        .enter()
        .append("text")
        .text(function(d) { return d.year; })
        .attr("x", function(d) { return xScale(d.kulutus) + 10; })
        .attr("y", function(d) { return yScale(d.kuolema) + 5; })
        .attr("font-family", "sans-serif");
     
    
        
    
  </script>
</body>
​
    