Boeing 777 Descent Profiles, SFO

<html>
<meta charset="utf-8">
<head>
</head>
  <body>
    <style>
      body {
        font: 16px sans-serif;
      }

#chart {
        font: 10px sans-serif;
      }

#chart2 {
        font: 10px sans-serif;
      }

.line {
          fill: none;
          stroke: #bbb;
          stroke-width: 1.0px;
      }

.highlighted {
        fill:none;
        stroke: black;
       }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.copy {
        clear: both;
        padding-top: 20px;
      }

.crashhighlight .accident {
        stroke: black;
      }

.brhighlight .br {
        stroke: #1B9E77;
      }
      .jahighlight .ja {
        stroke: #F2594B;
      }
      .ozhighlight .oz {
        stroke: #7570B3;
      }

.carrierselect {
        width: 130px;
        float: left;
        font: 16px sans-serif;
        margin-right: 10px;
        padding: 5px;
      }
      .carrierbr {
        background-color: #1B9E77;
      }
      .carrierja {
        background-color: #F2594B;
      }
      .carrieroz {
        background-color: #7570B3;
      }
      .crashed {
        background-color: black;
        color: white;
      }

</style>

<h1>Boeing 777 Descent Profiles, SFO</h1>
    <h2 id="tooltip">Hover to highlight a flight.</h2>

<div id="chart2">
    </div>
    <div id="options">
    </div>
    <p class="copy">
      All data is from FlightAware. Flights are regularly scheduled Boeing 777s into SFO. 
    </p>
    <p>
      This graph has a flaw: Notice that the X-axis is seconds until an arbitrary event (when the tracking ends), the fact that AAR214 on 7/6 is offset to the left does not correspond to physical location.
    </p>
    <p>
      Other graphics:
      <ul>
        <li>The New York Times, <a href="https://www.nytimes.com/interactive/2013/07/07/us/asiana214-uneven-descent.html?ref=us">An Uneven Descent.</a></li>
        <li><a href="https://twitter.com/sbaker">@sbaker</a>, <a href="https://twitter.com/sbaker/status/353611787750494208/photo/1">FlightAware data for AAR 214. Yesterday (safe) vs. today (crash). Much steeper descent today. #asiana #sfocrash #SFO</a></li>
        <li><a href="https://twitter.com/sbaker">@DaveMcLauchlan</a>, <a href="https://twitter.com/DaveMcLauchlan/status/353667122716614656/photo/1">@Queenstown_NZ Actually, today's approach into @flySFO was right about normal. Yesterday's was unusually low.</a></li>
      </ul>
    </p>
    <p>
      ADDENDUM: added chart of rate of descent. Working on getting the highlighting right...
    </p>
    <p>
      Contact: <a href="https://bdon.org">Brandon Liu</a>, <a href="https://twitter.com/bdon">@bdon</a>
    </p>

</body>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    var margin = {top: 20, right: 20, bottom: 40, left: 50},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    heightRate = 200 - margin.top - margin.bottom;

var timeScale = d3.scale.linear().range([0,width]);
    var altitudeScale = d3.scale.linear().range([height,0]);
    var accelScale = d3.scale.linear().range([heightRate,0]);

var xAxis = d3.svg.axis()
    .scale(timeScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(altitudeScale)
        .orient("left");

var yAxis2 = d3.svg.axis()
        .scale(accelScale)
        .orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svg2 = d3.select("#chart2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", heightRate + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json('flights.json', function(data) {
      var paths = data;
      var minUntil = d3.min(paths, function(d) { return d3.min(d.points, function(d) { return d.until}); })
      
      timeScale.domain([-300, 0])
      var maxAlt = d3.max(paths, function(d) { return d3.max(d.points, function(d) { return +d.altitude}); })
      var minAccel = d3.min(paths, function(d) { return d3.min(d.points, function(d) { return +d.accel}); })
      var maxAccel = d3.max(paths, function(d) { return d3.max(d.points, function(d) { return +d.accel}); })
      
      altitudeScale.domain([0, 3000]);
      accelScale.domain([minAccel, maxAccel]);

var line = d3.svg.line()
      .x(function(d) { return timeScale(d.until); })
      .y(function(d) { return altitudeScale(+d.altitude); });

var lineAccel = d3.svg.line()
      .x(function(d) { return timeScale(d.until); })
      .y(function(d) { return accelScale(d.accel); });

svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis)
        .append("text")
        .attr("y", 30)
        .attr("x", 15)
        .text("Time until final data point (seconds)")

svg2.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + heightRate + ")")
       .call(xAxis)
        .append("text")
        .attr("y", 30)
        .attr("x", 15)
        .text("Time until final data point (seconds)")

svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", -50)
          .attr("x", -15)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("altitude (ft)");

svg2.append("g")
          .attr("class", "y axis")
          .call(yAxis2)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", -50)
          .attr("x", -15)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("rate of descent (ft/s)");

d3.select("#options")
        .append("div")
        .attr("class", "carrierselect crashed")
        .text("Highlight Accident")
        .on("mouseover", function(d) {
          d3.select("#chart").classed("crashhighlight", true);
          d3.select("#chart2").classed("crashhighlight", true);
        })
        .on("mouseout", function(d) {
          d3.select("#chart").classed("crashhighlight", false);
          d3.select("#chart2").classed("crashhighlight", false);
        });

d3.select("#options")
        .append("div")
        .attr("class", "carrierselect carrieroz")
        .text("Highlight Asiana")
        .on("mouseover", function(d) {
          d3.select("#chart").classed("ozhighlight", true);
          d3.select("#chart2").classed("ozhighlight", true);
        })
        .on("mouseout", function(d) {
          d3.select("#chart").classed("ozhighlight", false);
          d3.select("#chart2").classed("ozhighlight", false);
        });

d3.select("#options")
        .append("div")
        .attr("class", "carrierselect carrierbr")
        .text("Highlight EVA")
        .on("mouseover", function(d) {
          d3.select("#chart").classed("brhighlight", true);
          d3.select("#chart2").classed("brhighlight", true);
        })
        .on("mouseout", function(d) {
          d3.select("#chart").classed("brhighlight", false);
          d3.select("#chart2").classed("brhighlight", false);
        });
      d3.select("#options")
        .append("div")
        .attr("class", "carrierselect carrierja")
        .text("Highlight JAL")
        .on("mouseover", function(d) {
          d3.select("#chart").classed("jahighlight", true);
          d3.select("#chart2").classed("jahighlight", true);
        })
        .on("mouseout", function(d) {
          d3.select("#chart").classed("jahighlight", false);
          d3.select("#chart2").classed("jahighlight", false);
        });

var pathElem = svg.append("g");
      var pathElem2 = svg2.append("g");

pathElem.selectAll("path")
        .data(paths).enter()
        .append('path')
        .classed("line", true)
        .classed("br", function(d) { return d.carrier == "EVA18" })
        .classed("ja", function(d) { return d.carrier == "JAL2" })
        .classed("oz", function(d) { return d.carrier == "AAR214"})
        .classed("accident", function(d) { return d.last_timestamp == "2013-07-06T18:28:29+00:00"})
        .attr("d", function(d) { return line(d.points) })
        .on("mouseover", function(d) { 
           d3.select(this).classed("highlighted", true); 
           d3.select("#tooltip").text(d.carrier + " last timestamp " + d.last_timestamp);
        })
        .on("mouseout", function(d) { 
           d3.select(this).classed("highlighted", false);
           d3.select("#tooltip").text("Hover to highlight a flight.");
        })

pathElem2.selectAll("path")
        .data(paths).enter()
        .append('path')
        .classed("line", true)
        .classed("br", function(d) { return d.carrier == "EVA18" })
        .classed("ja", function(d) { return d.carrier == "JAL2" })
        .classed("oz", function(d) { return d.carrier == "AAR214"})
        .classed("accident", function(d) { return d.last_timestamp == "2013-07-06T18:28:29+00:00"})
        .attr("uid", function(d) { return d.id })
        .attr("d", function(d) { return lineAccel(d.points) })
        .on("mouseover", function(d) { d3.select(this).classed("highlighted", true) 
           d3.select("#tooltip").text(d.carrier + " last timestamp " + d.last_timestamp);
        })
        .on("mouseout", function(d) { d3.select(this).classed("highlighted", false) 
           d3.select("#tooltip").text("Hover to highlight a flight.");
        })
    });
  </script>
</html>

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

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