Skip to content

Instantly share code, notes, and snippets.

@Sokrates86

Sokrates86/README.md

Last active April 5, 2016 18:15
Show Gist options
  • Save Sokrates86/8b4ac02c3870a832cfb5e2420cdf07e8 to your computer and use it in GitHub Desktop.
Save Sokrates86/8b4ac02c3870a832cfb5e2420cdf07e8 to your computer and use it in GitHub Desktop.
Download ZIP
alkoholi-kulutus-kuolema2
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment