D3 Examples - Proyecto

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.js"></script>
    <script type="text/javascript" src="parallelCoordinates.js"></script>
    <link href="parallelCoordinates.css" rel="stylesheet">
</head>
​
<script>
    function GraficarTalla(){
        //vectores talla niño
        var t40_boy = [46.32,47.92,49.88,51.84, 53.44];
        var t3_boy = [57.55,59.28,61.40,63.52,65.24];
        var t6_boy = [63.51, 65,32, 67.53, 69.75, 71.56];
        var t9_boy = [67.58,69.47,71.79,74.11,76.00];
        var t12_boy = [71.27,73.27,75.73,78.2,80.2];
​
        GraphParallelCoordinates(t40_boy,t3_boy,t6_boy,t9_boy,t12_boy,"talla.csv");
​
    }
    
    function GraficarPeso(){
        //vectores peso niño
        var p40_boy = [2507,2865,3346,3878,4350];
        var p3_boy = [5065,5611,6346,7158,7882];
        var p6_boy = [6410,7046,7900,8844,9684];
        var p9_boy = [7211,7916,8866,9918,10858];
        var p12_boy = [7813,8576,9608,10755,11783];
        
        GraphParallelCoordinates(p40_boy,p3_boy,p6_boy,p9_boy,p12_boy,"peso.csv");
    }
    
    function GraficarPc(){
        //vectores perimetro cefálico
        var pc40_boy = [32.07,33.14,34.46,35.77,36.85];
        var pc3_boy = [38.23,39.23,40.46,41.68,42.68];
        var pc6_boy = [40.97,42.00,43.26,44.53,45.56];
        var pc9_boy = [42.58,43.64,44.94,46.24,47.30];
        var pc12_boy = [43.60,44.68,46.01,47.34,48.42];
        
        GraphParallelCoordinates(pc40_boy,pc3_boy,pc6_boy,pc9_boy,pc12_boy,"pc.csv");
​
    }
</script>
​
<body onload="GraficarPeso()">
    &nbsp;&nbsp;&nbsp;&nbsp;Peso:<input type="radio" name="opcionGrafica" id="peso" value="peso" checked = "checked" onclick="GraficarPeso()" >
    Talla:<input type="radio" name="opcionGrafica" id="talla" value="talla" onclick="GraficarTalla()">
    Pc:<input type="radio" name="opcionGrafica" id="pc" value="pc" onclick="GraficarPc()">
    <div style="width:35px; height:25px; background-color:#FF0000; float:left; color:white; text-align:center">3%</div>
    <div style="width:35px; height:25px; background-color:#FE9A2E; float:left; color:white; text-align:center">15%</div>
    <div style="width:35px; height:25px; background-color:#3ADF00; float:left; color:white; text-align:center">50%</div>
    <div style="width:35px; height:25px; background-color:#FE9A2E; float:left; color:white; text-align:center">85%</div>
    <div style="width:35px; height:25px; background-color:#FF0000; float:left; color:white; text-align:center">97%</div>
    <hr>
    <div id="parallelFamily">
    </div>
</body>
</html>
​
    