gps proto

by Igor Cuckovic

CSS

body {
  /*  background: grey*/
    
}

svg {
    font: 10px sans-serif;
}
.area {
    fill: steelblue;
    clip-path: url(#clip);
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

JavaScript

var data = [{
    "Satellite": "OPS 5111",
        "Launch": "22 February 1978",
        "Retired": "17 July 1985",
        "price": 5
}, {
    "Satellite": "OPS 5112",
        "Launch": "13 May 1980",
        "Retired": "1 February 1988",
        "price": 8
}, {
    "Satellite": "OPS 5113",
        "Launch": "7 October 1985",
        "Retired": "18 May 1992",
        "price": 5
}, {
    "Satellite": "OPS 5114",
        "Launch": "11 December 1988",
        "Retired": "1 May 1990",
        "price": 15
}, {
    "Satellite": "USA-64",
        "Launch": "1 October 1990",
        "Retired": "14 March 2007",
        "price": 12
}, {
    "Satellite": "USA-66",
        "Launch": "26 November 1995",
        "Retired": "Operational",
        "price": 30
}];


var satellitePath = "M 23.03,11.78 26.33,9.86 9.19,0 l -9.23,5.39 17.13,9.86 3.43,-2 2.32,1.2 -1.96,1.07 5.66,2.99 1.65,-0.84 2.32,1.16 -2.9,1.875 16.96,9.86 9.24,-5.4 -17.05,-9.82 -3.66,2.051 -2.27,-1.25 1.47,-0.98 -5.58,-2.99 -1.29,0.8 z"
;
//console.log(gpsData[3]["Retired"])


var parseDate1 = d3.time.format.utc("%d %B %Y").parse;

console.log(parseDate1(data[1]["Retired"]));


////////////////////////


var margin = {
    top: 10,
    right: 10,
    bottom: 100,
    left: 40
},
margin2 = {
    top: 430,
    right: 10,
    bottom: 20,
    left: 40
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%d %B %Y").parse;

var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

var area = d3.svg.area()
//.interpolate("monotone")
.x(function (d) {
   ...