ruimgbarros/edu_patentes.csv

## edu_patentes.csv

          
            ano
            despesa
            n_patentes

            
              1972
              22.3
              6

            
              1973
              24.7
              8

            
              1974
              30.4
              5

            
              1975
              54.2
              54

            
              1976
              70
              16

            
              1977
              120.5
              54

            
              1978
              143.2
              77

            
              1979
              174.1
              55

            
              1980
              258.5
              74

            
              1981
              322.3
              68

            
              1982
              393.6
              36

            
              1983
              483.9
              19

            
              1984
              575.3
              53

            
              1985
              708.1
              261

            
              1986
              926.7
              153

            
              1987
              1120
              30

            
              1988
              1415.3
              56

            
              1989
              1737.9
              27

            
              1990
              2091
              16

            
              1991
              2722.2
              42

            
              1992
              3267.7
              114

            
              1993
              3429.8
              41

            
              1994
              3617.8
              92

            
              1995
              4013.8
              75

            
              1996
              4430.3
              37

            
              1997
              4863.8
              53

            
              1998
              5354.1
              85

            
              1999
              5813
              127

            
              2000
              6202.6
              61

            
              2001
              6729.8
              56

            
              2002
              7276.7
              40

            
              2003
              7005
              142

            
              2004
              7132.1
              156

            
              2005
              7316.1
              208

            
              2006
              7263.4
              139

            
              2007
              7232.1
              182

            
              2008
              7348.6
              184

            
              2009
              8507.4
              180

            
              2010
              8559.2
              174

            
              2011
              7878.5
              144

            
              2012
              6622.4
              139

            
              2013
              7108.4
              162

            
              2014
              6959.1
              139

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Educação e Patentes </title>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style type="text/css">

		body {
			text-align: left;
			font-family: Helvetica, Arial, Sans-serif;
			margin-left: 30px;
		}

		h1 {
			font-size: 2em;
			margin-bottom:4px;
		}

		h2 {
			font-style: italic;
			font-weight: normal;
			font-size: 1,5em;
			margin-top: 0px;
		}

		circle:hover {
			fill:rgb(201,84,74)!important;
		}

		.axis path,
		.axis line {
			fill:none;
			stroke:black;
			shape-rendering:crispEdges;
		}

		.axis text {
			font-family: sans-serif;
			font-size: 14px;
		}


		.y.axis text {
			font-size: 14px;
		}

	</style>

</head>
<body>

	<h1>Educação e Patentes</h1>
	<h2>Relação entre o investimento público em educação e o número de patentes</h2>

<script type="text/javascript">

	var w = 600;
	var h = 600;
	var padding = [20,10,30,60];


	var xScale = d3.scale.linear()
						.range([padding[3],w - padding[1]]);

	var yScale = d3.scale.linear()
						.range([ padding[0], h - padding[2]]);

	var svg = d3.select("body")
				.append("svg")
				.attr("width",w)
				.attr("height",h);


	var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("bottom")
					.ticks(4);

	var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient("left")
					.tickFormat(function(d){
						return d + "€";
					});

	d3.csv("edu_patentes.csv",function(data) {


		xScale.domain([0,d3.max(data, function(d){
				return +d.n_patentes;
		})]);

		yScale.domain([
				d3.max(data, function(d){
				return +d.despesa;
			})
			,0

				]);


		var circles = svg.selectAll("circle")
						.data(data)
						.enter()
						.append("circle");

		circles .attr("cx",function(d){
			return xScale(d.n_patentes);
		})
			.attr("cy",function(d){
				return yScale(d.despesa);
			})
			.attr("r",0.1)
			.attr("style","stroke: gray; fill:rgb(4,91,114);");


		circles.sort(function(a,b){
			return d3.ascending(+a.n_patentes,+b.n_patentes);
		})

			.transition()
			.delay(function(d,i){
				return i * 50;
			})
			.duration(500)
			.attr("r",4);


		svg.append("g")
			.attr("class","x axis")
			.attr("transform", "translate(0," + (h - padding[2]) + ")")
			.call(xAxis)

		svg.append("g")
			.attr("class","y axis")
			.attr("transform", "translate(" + (padding[3]) + ",0)")
			.call(yAxis);


	});

</script>

<p>Source: <a href="http://www.pordata.pt">Pordata</a><br>
Autoria: <a href="http://www.ruimgbarros.com"><em>Rui Barros</em></p>


</body>
</html>
ano	despesa	n_patentes
1972	22.3	6
1973	24.7	8
1974	30.4	5
1975	54.2	54
1976	70	16
1977	120.5	54
1978	143.2	77
1979	174.1	55
1980	258.5	74
1981	322.3	68
1982	393.6	36
1983	483.9	19
1984	575.3	53
1985	708.1	261
1986	926.7	153
1987	1120	30
1988	1415.3	56
1989	1737.9	27
1990	2091	16
1991	2722.2	42
1992	3267.7	114
1993	3429.8	41
1994	3617.8	92
1995	4013.8	75
1996	4430.3	37
1997	4863.8	53
1998	5354.1	85
1999	5813	127
2000	6202.6	61
2001	6729.8	56
2002	7276.7	40
2003	7005	142
2004	7132.1	156
2005	7316.1	208
2006	7263.4	139
2007	7232.1	182
2008	7348.6	184
2009	8507.4	180
2010	8559.2	174
2011	7878.5	144
2012	6622.4	139
2013	7108.4	162
2014	6959.1	139
	<!DOCTYPE html>
	<html>
	<head>
	<title>Educação e Patentes </title>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	text-align: left;
	font-family: Helvetica, Arial, Sans-serif;
	margin-left: 30px;
	}

	h1 {
	font-size: 2em;
	margin-bottom:4px;
	}

	h2 {
	font-style: italic;
	font-weight: normal;
	font-size: 1,5em;
	margin-top: 0px;
	}

	circle:hover {
	fill:rgb(201,84,74)!important;
	}

	.axis path,
	.axis line {
	fill:none;
	stroke:black;
	shape-rendering:crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 14px;
	}


	.y.axis text {
	font-size: 14px;
	}

	</style>

	</head>
	<body>

	<h1>Educação e Patentes</h1>
	<h2>Relação entre o investimento público em educação e o número de patentes</h2>

	<script type="text/javascript">

	var w = 600;
	var h = 600;
	var padding = [20,10,30,60];


	var xScale = d3.scale.linear()
	.range([padding[3],w - padding[1]]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2]]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width",w)
	.attr("height",h);


	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(4);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d){
	return d + "€";
	});

	d3.csv("edu_patentes.csv",function(data) {


	xScale.domain([0,d3.max(data, function(d){
	return +d.n_patentes;
	})]);

	yScale.domain([
	d3.max(data, function(d){
	return +d.despesa;
	})
	,0

	]);




	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles .attr("cx",function(d){
	return xScale(d.n_patentes);
	})
	.attr("cy",function(d){
	return yScale(d.despesa);
	})
	.attr("r",0.1)
	.attr("style","stroke: gray; fill:rgb(4,91,114);");


	circles.sort(function(a,b){
	return d3.ascending(+a.n_patentes,+b.n_patentes);
	})

	.transition()
	.delay(function(d,i){
	return i * 50;
	})
	.duration(500)
	.attr("r",4);




	svg.append("g")
	.attr("class","x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis)

	svg.append("g")
	.attr("class","y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);





	});

	</script>

	<p>Source: <a href="http://www.pordata.pt">Pordata</a><br>
	Autoria: <a href="http://www.ruimgbarros.com"><em>Rui Barros</em></p>



	</body>
	</html>