D3 Examples - Module 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        
        <script type="text/javascript">     
​
            // some predefined graphic properties
​
            var chart_width = 1024 ;
            var chart_height = 6000 ; 
​
            //Load in contents of CSV file
            d3.csv("eva.csv", function(data) {
​
                data.sort(function(a,b){
                     return d3.ascending(Number(a.duration),Number(b.duration));
                })
​
                //Now CSV contents have been transformed into
                //an array of JSON objects.
​
                //Log 'data' to the console, for verification.
                svg = d3.select('body').append('svg')
                .attr('width',chart_width)
                .attr('height',chart_height);
                
​
                svg.selectAll('rect').data(data).enter().append('rect')
                .attr('x',0)
                .attr('y',function(d,i){
                    return i * 6 ; 
                })
                .attr('height',4)
                .attr('width', function(d){
                     // return d *  20 ;
                     //console.log(d);
                     return d.duration ;  
                })
                .append('title')
                .text(function(d){return d.astronautName + "EVA duration : " + Math.floor(d.duration/60)+ " Hours" + Math.floor(d.duration%60) + " Minutes " ; });
            });
​
​
        </script>
​
    </body>
</html>
    