alkoholi-kulutus-kuolema

forked from Sokrates86's block: scatterplot-lines-SAINTS

<!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 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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js