Exercise 5

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise 5</title>
		<script type="text/javascript" src="https://d3js.org./d3.v3.js"></script>
		<style type="text/css">
            
			
           
            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="https://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>

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>

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

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