finish draft 1

p5/index-initial.html

@@ -19,10 +19,23 @@
       function draw(data) {
         'use strict';
 
+        var minOnTimeValue = (function(data, field) {
+          var minimum = 1;
+          data.forEach(function(record) {
+            if (record[field] < minimum) {
+              minimum = record[field];
+            }
+          });
+          return minimum;
+        })(data, 'on_time');
+
+        var minY = Math.round(minOnTimeValue*10)/10,
+            maxY = 1;
+
         d3.select('#content')
           .append('h2')
           .attr('id', 'title')
-          .text('Airline Performance, 2003-2014');
+          .text('Top U.S. Domestic Airline Performance, 2003-2014');
 
         var width = 960,
             height = 640;
@@ -31,13 +44,21 @@
 
         var myChart = new dimple.chart(svg, data);
 
-        var x = myChart.addCategoryAxis('x', 'year');
-        x.addOrderRule('Date');
+        // set x axis
+        var x = myChart.addTimeAxis('x', 'year');
+        x.tickFormat = '%Y';
+        x.title = 'Year';
 
-        myChart.addMeasureAxis('y', 'on_time')
+        // set y axis
+        var y = myChart.addMeasureAxis('y', 'on_time');
+        y.tickFormat = '%';
+        y.overrideMin = minY;
+        y.overrideMax = maxY;
+        y.title = 'Percentage of Arrivals on Time (within 15 minutes)';
         myChart.addSeries('carrier_name', dimple.plot.line);
+        myChart.addSeries('carrier_name', dimple.plot.scatter);
 
-        myChart.addLegend(width*3/4, height/2 - 30, width/4, 60, 'right');
+        myChart.addLegend(width*0.65, 60, width*0.25, 60, 'right');
 
         myChart.draw();
       }