a2q/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise 5</title>
		<script type="text/javascript" src="http://d3js.org./d3.v3.js"></script>
		<style type="text/css">

			<!--
			body {
				background-color: white;
                font-family:Times, "Times New Roman", Georgia, serif;

			}
            -->

            body {
             background-color: white;
             font-family:'Merriweather', serif;
            }
             #main{
                width:900px;
                margin:auto;
                border:1px solid rgb(150,150,150);
                padding: 20px 30px;
            }

            h1 {
				font-size: 25px;
				margin: 0;
                color:rgb(80,80,80);
			}

             h2 {
				font-size: 18px;
				margin: 0;
                color:rgb(80,80,80);
                 display: block;
                 padding: 0;
			}

             hr {
                height:4px;
               background-color:rgb(80,80,80);
                border: none;
            }


             p {
				font-size: 20px;
				margin: 10px 0 0 0;
                color:rgb(90,90,90);

			}


            a {
                text-decoration:none;
                color: rgb(94, 182, 239);
            }
			svg {
				background-color: white;
			}

			circle:hover {
				fill: rgb(255, 102, 0);
			}

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

			.axis text {
                font-family:'Merriweather', serif;

				font-size: 15px;
			}


            #viz{
                    width:600;
                    height:400;


                    float:left;
            }


        #contenido2{
            margin-top: 40px;
            width:300px;
            height:210px;
            background-color:rgb(210,210,210);
            float:left;
            padding:0;
        }

        .cleaner{
            clear:both;}

            #textCont2 {

                position:relative;
                    top:50px;
                    left:0px;
                width:300px;
                height:200px;
                background-color: rgb(250,250,250);
            }

    #textCont2 p{
        margin: 8px;
        padding-top: 5px;
       font-size: 18px;
        color:rgb(90,90,90);
        }

		</style>
	</head>
	<body>
        <div id="main">
        <hr>
		<h1>ALUMNOS INTEGRADOS A LA EDUCACIÓN COMÚN</h1>
        <hr>
		<p>La Dirección Nacional de Información y Evaluación de la Calidad Educativa (DiNIECE)
            releva la integración de alumnos con capacidades especiales que se integran a la educación común.</br>Fuente: <a href="http://datospublicos.gov.ar/data/dataset/indicadores-de-educacion/resource/1349b1fc-4a72-43ca-8136-14f5355634eb">Portal de datos públicos</a>.</p>
        </br>


        <div id="viz">

        </div>

        <div id="contenido2">

            <div id="textCont2">
            <p> El eje Y expresa la cantidad de alumnos con capacidades especiales integrados a la escuela primaria común,
                mientras que el eje X muestra la cantidad de alumnos integrados al secundario común.
                <br>Nota: Se omitió Buenas Aires para poder apreciar el detalle del resto de las provincias. </p>
            </div>
        </div>

        <div class="cleaner"></div> <!--limpia la flotación de los elementos anteriores-->

		<script type="text/javascript">


			var w = 600;
			var h = 400;
			var padding = [ 40, 20, 30, 100 ];  //Top, right, bottom, left


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

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


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

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");


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


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

				data.sort(function(a, b) {
					return d3.descending(+a.SecundarioComun, +b.SecundarioComun);
				});

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

				yScale.domain([
                    d3.max(data,function(d){
                        return +d.PrimarioComun;
                }),
                d3.min(data,function(d){
                        return +d.PrimarioComun;
                })
                ]);

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

				circles.attr("cx", function(d){
                    return xScale(d.SecundarioComun);
                    })
					.attr("cy", function(d) {
						return yScale(d.PrimarioComun);
					})
					.attr("r", 4)

					.attr("fill", "rgb(255, 153, 102)")
					.append("title")
					.text(function(d) {

                        return d.divPoliticaTerritorial + " tiene " + d.PrimarioComun+ " alumnos integrados  a primaria y " +d.SecundarioComun+ " a secundario";

					});


                // borro de arriba .attr("height", heightScale.rangeBand())
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]+10) + ")")
					.call(xAxis);

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

			});


		</script>
        </div>
	</body>
</html>

## integradosPrimarioySecundarioComunBIS.csv

          
            divPoliticaTerritorial
            PrimarioComun
            SecundarioComun

            
              Ciudad de Buenos Aires
              3074
              163

            
              Catamarca
              73
              26

            
              Córdoba
              1157
              168

            
              Corrientes
              344
              95

            
              Chaco
              2227
              306

            
              Chubut
              390
              233

            
              Entre Ríos
              424
              58

            
              Formosa
              905
              58

            
              Jujuy
              1062
              144

            
              La Pampa
              560
              399

            
              La Rioja
              51
              18

            
              Mendoza
              2139
              64

            
              Misiones
              531
              10

            
              Neuquén
              800
              23

            
              Río Negro
              1441
              173

            
              Salta
              529
              33

            
              San Juan
              56
              39

            
              San Luis
              187
              4

            
              Santa Cruz
              580
              193

            
              Santa Fe
              4232
              379

            
              Santiago del Estero
              142
              13

            
              Tucumán
              325
              72

            
              Tierra del Fuego
              75
              27
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Exercise 5</title>
	<script type="text/javascript" src="http://d3js.org./d3.v3.js"></script>
	<style type="text/css">

	<!--
	body {
	background-color: white;
	font-family:Times, "Times New Roman", Georgia, serif;

	}
	-->

	body {
	background-color: white;
	font-family:'Merriweather', serif;
	}
	#main{
	width:900px;
	margin:auto;
	border:1px solid rgb(150,150,150);
	padding: 20px 30px;
	}

	h1 {
	font-size: 25px;
	margin: 0;
	color:rgb(80,80,80);
	}

	h2 {
	font-size: 18px;
	margin: 0;
	color:rgb(80,80,80);
	display: block;
	padding: 0;
	}

	hr {
	height:4px;
	background-color:rgb(80,80,80);
	border: none;
	}


	p {
	font-size: 20px;
	margin: 10px 0 0 0;
	color:rgb(90,90,90);

	}




	a {
	text-decoration:none;
	color: rgb(94, 182, 239);
	}
	svg {
	background-color: white;
	}

	circle:hover {
	fill: rgb(255, 102, 0);
	}

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

	.axis text {
	font-family:'Merriweather', serif;

	font-size: 15px;
	}


	#viz{
	width:600;
	height:400;


	float:left;
	}


	#contenido2{
	margin-top: 40px;
	width:300px;
	height:210px;
	background-color:rgb(210,210,210);
	float:left;
	padding:0;
	}

	.cleaner{
	clear:both;}

	#textCont2 {

	position:relative;
	top:50px;
	left:0px;
	width:300px;
	height:200px;
	background-color: rgb(250,250,250);
	}

	#textCont2 p{
	margin: 8px;
	padding-top: 5px;
	font-size: 18px;
	color:rgb(90,90,90);
	}

	</style>
	</head>
	<body>
	<div id="main">
	<hr>
	<h1>ALUMNOS INTEGRADOS A LA EDUCACIÓN COMÚN</h1>
	<hr>
	<p>La Dirección Nacional de Información y Evaluación de la Calidad Educativa (DiNIECE)
	releva la integración de alumnos con capacidades especiales que se integran a la educación común.</br>Fuente: <a href="http://datospublicos.gov.ar/data/dataset/indicadores-de-educacion/resource/1349b1fc-4a72-43ca-8136-14f5355634eb">Portal de datos públicos</a>.</p>
	</br>


	<div id="viz">

	</div>

	<div id="contenido2">

	<div id="textCont2">
	<p> El eje Y expresa la cantidad de alumnos con capacidades especiales integrados a la escuela primaria común,
	mientras que el eje X muestra la cantidad de alumnos integrados al secundario común.
	<br>Nota: Se omitió Buenas Aires para poder apreciar el detalle del resto de las provincias. </p>
	</div>
	</div>

	<div class="cleaner"></div> <!--limpia la flotación de los elementos anteriores-->

	<script type="text/javascript">


	var w = 600;
	var h = 400;
	var padding = [ 40, 20, 30, 100 ]; //Top, right, bottom, left



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

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



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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");



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



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

	data.sort(function(a, b) {
	return d3.descending(+a.SecundarioComun, +b.SecundarioComun);
	});

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

	yScale.domain([
	d3.max(data,function(d){
	return +d.PrimarioComun;
	}),
	d3.min(data,function(d){
	return +d.PrimarioComun;
	})
	]);

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

	circles.attr("cx", function(d){
	return xScale(d.SecundarioComun);
	})
	.attr("cy", function(d) {
	return yScale(d.PrimarioComun);
	})
	.attr("r", 4)

	.attr("fill", "rgb(255, 153, 102)")
	.append("title")
	.text(function(d) {

	return d.divPoliticaTerritorial + " tiene " + d.PrimarioComun+ " alumnos integrados a primaria y " +d.SecundarioComun+ " a secundario";

	});


	// borro de arriba .attr("height", heightScale.rangeBand())
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]+10) + ")")
	.call(xAxis);

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

	});


	</script>
	</div>
	</body>
	</html>
divPoliticaTerritorial	PrimarioComun	SecundarioComun
Ciudad de Buenos Aires	3074	163
Catamarca	73	26
Córdoba	1157	168
Corrientes	344	95
Chaco	2227	306
Chubut	390	233
Entre Ríos	424	58
Formosa	905	58
Jujuy	1062	144
La Pampa	560	399
La Rioja	51	18
Mendoza	2139	64
Misiones	531	10
Neuquén	800	23
Río Negro	1441	173
Salta	529	33
San Juan	56	39
San Luis	187	4
Santa Cruz	580	193
Santa Fe	4232	379
Santiago del Estero	142	13
Tucumán	325	72
Tierra del Fuego	75	27