a2q/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sorting Elements</title>

        <!--<script type="text/javascript" src="../d3.v3.js"></script>-->
        <script type="text/javascript" src="http://d3js.org./d3.v3.js"></script>
		<style type="text/css">


			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}


			h1 {
				font-size: 25px;
				margin: 0;
                color:#B5B1B1;
			}
            p {
				font-size: 16px;
				margin: 10px 0 0 0;
                color:#B5B1B1;

			}

			a {
                text-decoration:none;
                color:rgb(216,83,43);
            }

			svg {
				background-color: white;
			}

			rect:hover {
				fill: orange;
			}

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

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

			}

			.y.axis path,
			.y.axis line {
				opacity: 0;}

            <!--gridline nuevo -->
            .tick.minor line {
              stroke: #777;
              stroke-dasharray: 2,2;
            }
             <!--gridline nuevo -->

		</style>
	</head>
	<body>

        <hr>
		<h1>Alumnos Integrados a la Educación Común</h1>
        <hr>
		<p>Los datos corresponden a cantidad de alumnos con discapacidad integrados</br> a la educación: <a href="http://www.datospublicos.gob.ar/data/dataset/indicadores-de-educacion/resource/553d7102-f42b-4b65-8fd5-faf268788eb0">Portal de datos públicos</a>, 2012</p>
        </br>

		<script type="text/javascript">

            //define variables fijas
            var w = 700;
			var h = 650;
			var padding = [ 20, 20, 20, 250 ];  //Top, right, bottom, left


           //fin define variables fijas

            //escala


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


            //Nombre Provincias
			var heightScaleNames = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

            //Valores por provincia
            var heightScaleNumbers = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2]-5 ], 0.2);


            //fin escala

			//ejes
            var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom").tickValues([0, 1000, 2000, 3000, 4000, 5000, 6000]).tickSize(h-padding[2]);

			var yAxisNames = d3.svg.axis()
							.scale(heightScaleNames)
							.orient("left");
            // eje izq numeros
            var yAxisNumbers = d3.svg.axis()
							.scale(heightScaleNumbers)
							.orient("left");


            //grid lines nuevas

            //var xAxis = d3.svg.axis()
            //.scale(y)
            //.tickSize(width) esto lo pase al eje
                //            .orient("bottom");

                 //grid lines nuevas


            //fin ejes
            //gRID

            //function make_x_axis() {
            //return d3.svg.axis()
            //.scale(widthScale)
            //.orient("top")
            //.tickValues([0, 1000, 2000, 3000, 4000, 5000, 6000]);
            //}

            //FIN Grid
            //define svg

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

            //fin define svg

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

				data.sort(function(a, b) {

					return d3.descending(+a.SecundarioComun, +b.SecundarioComun);

				});
                //
                widthScale.domain([ 1, d3.max(data, function(d) {
					return +d.SecundarioComun;
				}) ]);

				heightScaleNames.domain(data.map(function(d) { return d.divPoliticaTerritorial; } ));

                //segundo eje y con los valores

                heightScaleNumbers.domain(data.map(function(d) { return d.SecundarioComun; } ));


                // crea rectas

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

                // fin crea rectas
                // aplica atributos

                rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScaleNames(d.divPoliticaTerritorial);
					})
					.attr("width", function(d) {
						return widthScale(d.SecundarioComun);
					})
					.attr("height", heightScaleNames.rangeBand())
					.attr("fill", "rgb(216,83,43)")
					.append("title")
					.text(function(d) {
						return d.divPoliticaTerritorial + " su nivel de integración es " + d.SecundarioComun;
					});
                //fin crea atributos

                //"#D8532B" color anterior relleno

                //texto

                //grid


                //    svg.append("g")
            //.attr("class", "grid")
            //.attr("transform", "translate(0," + 0 + ")")
            //.call(make_x_axis()
              //  .tickSize(h, 0, 0)
                //.tickFormat("")
            //)


                //grid
               //h - padding[2]


                //aplica ejes
              //  svg.append("g")
				//	.attr("class", "x axis")
				//	.attr("transform", "translate(" + padding[3] + "," + (0) + ")").call(xAxis);
                //nuevo gridlines

            var gx = svg.append("g")
            .attr("class", "x axis").attr("transform", "translate("+ padding[3] + "," + (0) + ")")
            .call(xAxis);


            gx.selectAll("g").filter(function(d) { return d; })
                .classed("minor", true);

                gx.selectAll("text")
            .attr("y", 2)
            .attr("dx", 4)
            .attr("fill","#B5B1B1");
                //nuevo gridlines

				svg.append("g")
					.attr("class", "y axis names")
					.attr("transform", "translate(" + padding[3]+ ",0)")
                    .call(yAxisNames)
                    .selectAll("text")
                    .style("text-anchor", "start")
                    .attr("transform","translate(-"+padding[3]*5/6+",0)").attr("fill","#B5B1B1");

                svg.append("g")
					.attr("class", "y axis numbers")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxisNumbers)
                    .selectAll("text").attr("fill","#B5B1B1");


                //fin aplica ejes


			});


		</script>

	</body>
</html>

## integradosSecundarioComun.csv

          
            divPoliticaTerritorial
            SecundarioComun

            
              Ciudad de Buenos Aires
              163

            
              Buenos Aires
              6019

            
              Catamarca
              26

            
              Córdoba
              168

            
              Corrientes
              95

            
              Chaco
              306

            
              Chubut
              233

            
              Entre Ríos
              59

            
              Formosa
              58

            
              Jujuy
              144

            
              La Pampa
              399

            
              La Rioja
              18

            
              Mendoza
              64

            
              Misiones
              10

            
              Neuquén
              23

            
              Río Negro
              173

            
              Salta
              33

            
              San Juan
              39

            
              San Luis
              4

            
              Santa Cruz
              193

            
              Santa Fe
              379

            
              Santiago del Estero
              13

            
              Tucumán
              72

            
              Tierra del Fuego
              27
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sorting Elements</title>

	<!--<script type="text/javascript" src="../d3.v3.js"></script>-->
	<script type="text/javascript" src="http://d3js.org./d3.v3.js"></script>
	<style type="text/css">



	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}



	h1 {
	font-size: 25px;
	margin: 0;
	color:#B5B1B1;
	}
	p {
	font-size: 16px;
	margin: 10px 0 0 0;
	color:#B5B1B1;

	}

	a {
	text-decoration:none;
	color:rgb(216,83,43);
	}

	svg {
	background-color: white;
	}

	rect:hover {
	fill: orange;
	}

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

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

	}

	.y.axis path,
	.y.axis line {
	opacity: 0;}

	<!--gridline nuevo -->
	.tick.minor line {
	stroke: #777;
	stroke-dasharray: 2,2;
	}
	<!--gridline nuevo -->

	</style>
	</head>
	<body>

	<hr>
	<h1>Alumnos Integrados a la Educación Común</h1>
	<hr>
	<p>Los datos corresponden a cantidad de alumnos con discapacidad integrados</br> a la educación: <a href="http://www.datospublicos.gob.ar/data/dataset/indicadores-de-educacion/resource/553d7102-f42b-4b65-8fd5-faf268788eb0">Portal de datos públicos</a>, 2012</p>
	</br>

	<script type="text/javascript">

	//define variables fijas
	var w = 700;
	var h = 650;
	var padding = [ 20, 20, 20, 250 ]; //Top, right, bottom, left



	//fin define variables fijas

	//escala




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


	//Nombre Provincias
	var heightScaleNames = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

	//Valores por provincia
	var heightScaleNumbers = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2]-5 ], 0.2);


	//fin escala

	//ejes
	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom").tickValues([0, 1000, 2000, 3000, 4000, 5000, 6000]).tickSize(h-padding[2]);

	var yAxisNames = d3.svg.axis()
	.scale(heightScaleNames)
	.orient("left");
	// eje izq numeros
	var yAxisNumbers = d3.svg.axis()
	.scale(heightScaleNumbers)
	.orient("left");


	//grid lines nuevas

	//var xAxis = d3.svg.axis()
	//.scale(y)
	//.tickSize(width) esto lo pase al eje
	// .orient("bottom");

	//grid lines nuevas


	//fin ejes
	//gRID

	//function make_x_axis() {
	//return d3.svg.axis()
	//.scale(widthScale)
	//.orient("top")
	//.tickValues([0, 1000, 2000, 3000, 4000, 5000, 6000]);
	//}

	//FIN Grid
	//define svg

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

	//fin define svg

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

	data.sort(function(a, b) {

	return d3.descending(+a.SecundarioComun, +b.SecundarioComun);

	});
	//
	widthScale.domain([ 1, d3.max(data, function(d) {
	return +d.SecundarioComun;
	}) ]);

	heightScaleNames.domain(data.map(function(d) { return d.divPoliticaTerritorial; } ));

	//segundo eje y con los valores

	heightScaleNumbers.domain(data.map(function(d) { return d.SecundarioComun; } ));


	// crea rectas

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	// fin crea rectas
	// aplica atributos

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScaleNames(d.divPoliticaTerritorial);
	})
	.attr("width", function(d) {
	return widthScale(d.SecundarioComun);
	})
	.attr("height", heightScaleNames.rangeBand())
	.attr("fill", "rgb(216,83,43)")
	.append("title")
	.text(function(d) {
	return d.divPoliticaTerritorial + " su nivel de integración es " + d.SecundarioComun;
	});
	//fin crea atributos

	//"#D8532B" color anterior relleno

	//texto

	//grid



	// svg.append("g")
	//.attr("class", "grid")
	//.attr("transform", "translate(0," + 0 + ")")
	//.call(make_x_axis()
	// .tickSize(h, 0, 0)
	//.tickFormat("")
	//)


	//grid
	//h - padding[2]


	//aplica ejes
	// svg.append("g")
	// .attr("class", "x axis")
	// .attr("transform", "translate(" + padding[3] + "," + (0) + ")").call(xAxis);
	//nuevo gridlines

	var gx = svg.append("g")
	.attr("class", "x axis").attr("transform", "translate("+ padding[3] + "," + (0) + ")")
	.call(xAxis);


	gx.selectAll("g").filter(function(d) { return d; })
	.classed("minor", true);

	gx.selectAll("text")
	.attr("y", 2)
	.attr("dx", 4)
	.attr("fill","#B5B1B1");
	//nuevo gridlines

	svg.append("g")
	.attr("class", "y axis names")
	.attr("transform", "translate(" + padding[3]+ ",0)")
	.call(yAxisNames)
	.selectAll("text")
	.style("text-anchor", "start")
	.attr("transform","translate(-"+padding[3]*5/6+",0)").attr("fill","#B5B1B1");

	svg.append("g")
	.attr("class", "y axis numbers")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxisNumbers)
	.selectAll("text").attr("fill","#B5B1B1");


	//fin aplica ejes


	});


	</script>

	</body>
	</html>
	divPoliticaTerritorial	SecundarioComun
	Ciudad de Buenos Aires	163
	Buenos Aires	6019
	Catamarca	26
	Córdoba	168
	Corrientes	95
	Chaco	306
	Chubut	233
	Entre Ríos	59
	Formosa	58
	Jujuy	144
	La Pampa	399
	La Rioja	18
	Mendoza	64
	Misiones	10
	Neuquén	23
	Río Negro	173
	Salta	33
	San Juan	39
	San Luis	4
	Santa Cruz	193
	Santa Fe	379
	Santiago del Estero	13
	Tucumán	72
	Tierra del Fuego	27