Ejercicio 4 knightd3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sorting Elements</title>
		
        
        <script type="text/javascript" src="https://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;}
		
            
            .tick.minor line {
              stroke: #777;
              stroke-dasharray: 2,2;
            }

</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="https://www.datospublicos.gob.ar/data/dataset/indicadores-de-educacion/resource/553d7102-f42b-4b65-8fd5-faf268788eb0">Portal de datos públicos</a>, 2012</p>
        </br>

//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

//"#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>

Modified http://d3js.org./d3.v3.js to a secure url

https://d3js.org./d3.v3.js