D3 Examples - Exercise 5

xxxxxxxxxx
 
<!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: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="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>
​
        <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>
    