Skip to content

Instantly share code, notes, and snippets.

@aliavni

aliavni/index.html

Created April 25, 2016 23:50
Show Gist options
  • Save aliavni/91c8b92ec1d2b39903c0a4a4b3238034 to your computer and use it in GitHub Desktop.
Save aliavni/91c8b92ec1d2b39903c0a4a4b3238034 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'arial', sans-serif;
font-size: 12px;
margin: 20px auto;
}
svg {
border:1px solid #f0f;
}
.axis text {
font-size: 12px;
fill: #777;
}
.axis path {
display: none;
}
.axis line {
stroke-width:1px;
stroke: #ccc;
stroke-dasharray: 2px 2px;
}
.g-chart {
margin: 20px auto;
max-width: 75%;
}
</style>
<body>
<div class="g-chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 70, bottom: 20, left: 10};
var chart = d3.select(".g-chart");
var width = chart.node().clientWidth - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var yScale = d3.scale.linear()
.range([height, 0]);
var xScale = d3.scale.linear()
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(-height)
.tickPadding(8)
.orient("bottom")
.tickFormat(d3.round);
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(-width)
.tickPadding(8)
.orient("right");
var svg = chart.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.select(window)
.on("resize", resized)
function resized() {
var newWidth = chart.node().clientWidth
xScale.range([0, newWidth]);
yAxis.tickSize(-newWidth);
var svg = d3.select(".g-chart svg")
svg
.attr("width", newWidth + margin.left + margin.right)
d3.select(".x.axis")
.call(xAxis);
d3.select(".y.axis")
.attr("transform", "translate(" + (newWidth) + ",0)")
.call(yAxis);
}
// station 1
d3.tsv("selected-countries.tsv", ready);
function ready(err, data) {
if (err) throw err;
// format your data
data.forEach( function (d) {
d.val = +d.val;
d.year = +d.year;
});
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain(d3.extent(data, function(d) { return d.val; }));
// // get a list of unique countries and draw buttons when -- nav
// var allCountries = d3.set(data.map(function(d) { return d.country; })).values();
// d3.select("body").append("div").selectAll(".g-country-buttons")
// .data(allCountries)
// .enter().append("button")
// .attr("class", "g-country-buttons")
// .text(function(d) { return d; })
// .on("click", function(d) {
// console.log("d", d);
// drawCutoffPoints(d);
// });
var xAxisGroup = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
var yAxisGroup = svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width) + ",0)")
.call(yAxis);
// d3.select(window).on("resize", resized);
// function resized() {
// width = chart.node().clientWidth - margin.left - margin.right;
// d3.select("svg")
// .attr("width", width + margin.left + margin.right);
// xScale
// .range([0, width]);
// xAxisGroup
// .transition().duration(2000)
// .call(xAxis);
// yAxisGroup
// .transition().duration(2000)
// .attr("transform", "translate(" + (width) + ",0)")
// .call(yAxis);
// }
// function drawCutoffPoints(countryName) {
// var thisCountry = data.filter(function(d) { return d.country == countryName; });
// xScale.domain(d3.extent(thisCountry, function(d) { return d.year; }));
// yScale.domain(d3.extent(thisCountry, function(d) { return d.val; }));
// resized();
// }
// drawCutoffPoints("United States");
}
</script>
</body>
Raw
selected-countries.tsv
val cutoff year country
7718 cop5 1985 Belgium
7956 cop5 1988 Belgium
8287 cop5 1992 Belgium
8312 cop5 1995 Belgium
8188 cop5 1997 Belgium
8593 cop5 2000 Belgium
6203 cop5 1981 Sweden
6107 cop5 1987 Sweden
6897 cop5 1992 Sweden
6151 cop5 1995 Sweden
7801 cop5 2000 Sweden
9611 cop5 2005 Sweden
7143 cop5 1979 United States
6753 cop5 1986 United States
6674 cop5 1991 United States
6503 cop5 1994 United States
7142 cop5 1997 United States
7809 cop5 2000 United States
7226 cop5 2004 United States
7285 cop5 2007 United States
6410 cop5 2010 United States
8920 cop10 1985 Belgium
9182 cop10 1988 Belgium
9942 cop10 1992 Belgium
9864 cop10 1995 Belgium
9951 cop10 1997 Belgium
10531 cop10 2000 Belgium
7819 cop10 1981 Sweden
7764 cop10 1987 Sweden
9037 cop10 1992 Sweden
8831 cop10 1995 Sweden
9758 cop10 2000 Sweden
11369 cop10 2005 Sweden
9726 cop10 1979 United States
9187 cop10 1986 United States
8996 cop10 1991 United States
8954 cop10 1994 United States
9799 cop10 1997 United States
10641 cop10 2000 United States
10396 cop10 2004 United States
10423 cop10 2007 United States
9645 cop10 2010 United States
10524 cop20 1985 Belgium
10900 cop20 1988 Belgium
11717 cop20 1992 Belgium
12354 cop20 1995 Belgium
12539 cop20 1997 Belgium
12883 cop20 2000 Belgium
9380 cop20 1981 Sweden
9625 cop20 1987 Sweden
11121 cop20 1992 Sweden
11083 cop20 1995 Sweden
11923 cop20 2000 Sweden
13699 cop20 2005 Sweden
13762 cop20 1979 United States
13168 cop20 1986 United States
13008 cop20 1991 United States
13000 cop20 1994 United States
13838 cop20 1997 United States
14914 cop20 2000 United States
14932 cop20 2004 United States
14932 cop20 2007 United States
14378 cop20 2010 United States
11821 cop30 1985 Belgium
12386 cop30 1988 Belgium
13256 cop30 1992 Belgium
14418 cop30 1995 Belgium
14510 cop30 1997 Belgium
15249 cop30 2000 Belgium
10503 cop30 1981 Sweden
11124 cop30 1987 Sweden
12887 cop30 1992 Sweden
12447 cop30 1995 Sweden
13820 cop30 2000 Sweden
15812 cop30 2005 Sweden
17312 cop30 1979 United States
17101 cop30 1986 United States
16706 cop30 1991 United States
16569 cop30 1994 United States
17488 cop30 1997 United States
18994 cop30 2000 United States
18960 cop30 2004 United States
19142 cop30 2007 United States
18396 cop30 2010 United States
13368 cop40 1985 Belgium
14038 cop40 1988 Belgium
15020 cop40 1992 Belgium
16648 cop40 1995 Belgium
16448 cop40 1997 Belgium
17692 cop40 2000 Belgium
11545 cop40 1981 Sweden
12337 cop40 1987 Sweden
14422 cop40 1992 Sweden
13583 cop40 1995 Sweden
15514 cop40 2000 Sweden
17807 cop40 2005 Sweden
20541 cop40 1979 United States
20759 cop40 1986 United States
20417 cop40 1991 United States
20159 cop40 1994 United States
21331 cop40 1997 United States
23079 cop40 2000 United States
23269 cop40 2004 United States
23432 cop40 2007 United States
22559 cop40 2010 United States
14987 cop50 1985 Belgium
15623 cop50 1988 Belgium
16673 cop50 1992 Belgium
19092 cop50 1995 Belgium
18636 cop50 1997 Belgium
20037 cop50 2000 Belgium
12601 cop50 1981 Sweden
13562 cop50 1987 Sweden
15744 cop50 1992 Sweden
14739 cop50 1995 Sweden
17163 cop50 2000 Sweden
19743 cop50 2005 Sweden
23583 cop50 1979 United States
24267 cop50 1986 United States
24189 cop50 1991 United States
24054 cop50 1994 United States
25413 cop50 1997 United States
27320 cop50 2000 United States
27559 cop50 2004 United States
27970 cop50 2007 United States
27058 cop50 2010 United States
16559 cop60 1985 Belgium
17307 cop60 1988 Belgium
18524 cop60 1992 Belgium
21067 cop60 1995 Belgium
21066 cop60 1997 Belgium
22485 cop60 2000 Belgium
13768 cop60 1981 Sweden
14805 cop60 1987 Sweden
17318 cop60 1992 Sweden
15955 cop60 1995 Sweden
18959 cop60 2000 Sweden
21713 cop60 2005 Sweden
27024 cop60 1979 United States
28403 cop60 1986 United States
28356 cop60 1991 United States
28434 cop60 1994 United States
29852 cop60 1997 United States
31990 cop60 2000 United States
32405 cop60 2004 United States
33039 cop60 2007 United States
32212 cop60 2010 United States
18351 cop70 1985 Belgium
19082 cop70 1988 Belgium
20693 cop70 1992 Belgium
23756 cop70 1995 Belgium
23636 cop70 1997 Belgium
24887 cop70 2000 Belgium
14987 cop70 1981 Sweden
16051 cop70 1987 Sweden
19107 cop70 1992 Sweden
17391 cop70 1995 Sweden
21036 cop70 2000 Sweden
23955 cop70 2005 Sweden
30981 cop70 1979 United States
33162 cop70 1986 United States
33107 cop70 1991 United States
33559 cop70 1994 United States
35024 cop70 1997 United States
37161 cop70 2000 United States
38156 cop70 2004 United States
38891 cop70 2007 United States
38072 cop70 2010 United States
20624 cop80 1985 Belgium
21470 cop80 1988 Belgium
22948 cop80 1992 Belgium
26680 cop80 1995 Belgium
26803 cop80 1997 Belgium
28446 cop80 2000 Belgium
16536 cop80 1981 Sweden
17881 cop80 1987 Sweden
21291 cop80 1992 Sweden
19499 cop80 1995 Sweden
24000 cop80 2000 Sweden
27036 cop80 2005 Sweden
35931 cop80 1979 United States
39504 cop80 1986 United States
39207 cop80 1991 United States
40109 cop80 1994 United States
41983 cop80 1997 United States
44422 cop80 2000 United States
45590 cop80 2004 United States
46689 cop80 2007 United States
45801 cop80 2010 United States
24345 cop90 1985 Belgium
25466 cop90 1988 Belgium
26988 cop90 1992 Belgium
31916 cop90 1995 Belgium
31748 cop90 1997 Belgium
34850 cop90 2000 Belgium
18999 cop90 1981 Sweden
20418 cop90 1987 Sweden
25086 cop90 1992 Sweden
23033 cop90 1995 Sweden
28917 cop90 2000 Sweden
32072 cop90 2005 Sweden
43946 cop90 1979 United States
49365 cop90 1986 United States
49226 cop90 1991 United States
51504 cop90 1994 United States
54422 cop90 1997 United States
57430 cop90 2000 United States
58657 cop90 2004 United States
60544 cop90 2007 United States
59356 cop90 2010 United States
28044 cop95 1985 Belgium
29779 cop95 1988 Belgium
31007 cop95 1992 Belgium
38511 cop95 1995 Belgium
37025 cop95 1997 Belgium
42283 cop95 2000 Belgium
21027 cop95 1981 Sweden
22915 cop95 1987 Sweden
28914 cop95 1992 Sweden
26403 cop95 1995 Sweden
34379 cop95 2000 Sweden
37237 cop95 2005 Sweden
51871 cop95 1979 United States
59514 cop95 1986 United States
58986 cop95 1991 United States
64090 cop95 1994 United States
68912 cop95 1997 United States
73551 cop95 2000 United States
73921 cop95 2004 United States
77663 cop95 2007 United States
74768 cop95 2010 United States
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment