D3 Examples - Doctor Who Earth-Based Time Travel Adventures

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Doctor Who Earth-Based Time Travel Adventures</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        
        <style type="text/css">
            
            body {
                background-color: #E0E1DD;
            }
            
            svg {
                background-color: #c8c8c8;
            }
            
            rect {
                fill: #AC98DB;
            }
        
            h1 {
                font-family: sans-serif;
                font-size: 18px;
                position: relative;
                left: 10px;
                color: #333333;
            }
     
            h2 {
                font-family: sans-serif;
                font-size: 14px;
                position: relative;
                left: 10px;
                color: #333333;
            }
            
           p {
                font-family: sans-serif;
                font-size: 12px;
                position: relative;
                left: 10px;
                color: #333333;
            }
            rect:hover {
                fill: #A5D867;
                transition: fill 0.5s;
            }
            
​
        </style>
        
    </head>
    
    
    <body>
​
        <script type="text/javascript"> 
            
              
            var body = d3.select('body');
​
                body.append('h1')
                    .text('(DW1) Hartnell through (DW11) Smith')
      
                body.append('h2')
                    .text('Time Jumps between 100 and 1000 years - By Episode.')
                
                body.append('p')
                    .text('The premise of Doctor Who is that he is a Time Lord, capable of ridiculously epic travels throughout time and space - even if it is billions of years into the past or future and/or numerous time jumps in a single episode / story arc. This dataset represents a fraction of his Earth-based Time Travel. The Time Jumps are the Sum of DateTo and DateFrom per the episode Date references themselves as scripted) ... the glory of Science Fiction!')
                
                 body.append('p')
                    .text('The source file includes data originally crowd-sourced by Doctor Who fans for the Guardian Data Blog and verified and/or adjusted by me: https://www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful from 2010.')
                
                
      
 //Create the SVG
                
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 400)
                        .attr("height", 300);
​
//Load in contents of CSV file 
​
            d3.csv("DW EARTH Time Journeys_000s_LE.csv", function(data) {
                
                    //Now CSV contents have been transformed into
                //an array of JSON objects.
​
                //Log 'data' to the console, for verification.
                    console.log(data);
                
                
//Load in contents of CSV file 
                
                data.sort(function(a, b) {
                    return d3.descending(a.TimeJumpYrs, b.TimeJumpYrs);
​
                    //If your numeric values aren't sorting properly,
                    //try commenting out the line above, and instead using:
                    //
                    //return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
                    //
                    //Data coming in from the CSV is saved as strings (text),
                    //so the + signs here force JavaScript to treat those
                    //strings instead as numeric values, thereby fixing the
                    //sort order (hopefully!).
                });
​
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects.attr("x", 0)
                    .attr("y", function(d, i) {
                        return i * 25;
                    })
                    .attr("width", function(d) {
                        return d.TimeJumpYrs * 0.5;
                    })
                    .attr("height", 15)
                    .append("title")
                    .text(function(d) {
                        return d.EpTitle + "'s Time Jump in Years for The Doctor is " + d.TimeJumpYrs;
                    });
                
            
            });
​
​
​
        </script>
​
    </body>
</html>
    