Explorer

HTML

<link rel="stylesheet" href="http://transitized.com/staging/divvy/explorer/style/bootstrap.css">
<link rel="stylesheet" href="http://transitized.com/staging/divvy/explorer/style/custom.css">
<link rel="stylesheet" href="http://transitized.com/staging/divvy/explorer/style/dc.css">
<script src="http://transitized.com/staging/divvy/explorer/js/crossfilter.js"></script>
<script src="http://transitized.com/staging/divvy/explorer/js/bootstrap.js"></script>
<script src="http://transitized.com/staging/divvy/explorer/js/dc.js"></script>
<pre id="all_trips">
   ...

JavaScript

var data = JSON.parse(d3.select("#all_trips").text() );
        
var parseDate = d3.time.format("%m/%d/%Y").parse;
var parseMonth = d3.time.format("%m");
function roundToOne(num) {
    return +(Math.round(num + "e+1") + "e-1");
}

data.forEach(function(d) {
    d.pStartDate = d.start_date; // start date in M/D/Y format for the data table
    d.start_date = parseDate(d.start_date);
    d.month = parseMonth(d.start_date);
    d.startTime = d.start_time.substring(0,2); // gets the hour of the trip start time
    d.duration = Math.floor(d.dur / 60); // gets the duration of the trip in minutes, rounded down
    d.total = 1;
});

var ndx = crossfilter(data);

var all = ndx.groupAll();


// to debug the data elements, uncomment the line below
// console.log(data);

// dimension by date

var dateDim = ndx.dimension(function(d) {
    return d.start_date;
    //return d.km;
});

// dimension by gender

var genderDim = ndx.dimension(function(d) {
    if (d.g === "Male")
        return "M";
    else if (d.g === "Female")
        return "F";
    else
        return "Unknown*";
});

// dimension by user type (subscriber or passholder)

var userDim = ndx.dimension(function(d) {
    // rename user types to subscriber/passholder
    if (d.u === "Subscriber")
        return "Member";
    else
        return "Passholder";
});

// dimension by day of week
var dayOfWeek = ndx.dimension(function(d) {
    var day = d.start_date.getDay();
    var name=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    return day+"."+name[day];
});

// dimension by month
var monthDim = ndx.dimension(function(d) {
    var month = d.month;
    var name = ["January","February","March","April","May","June","July","August","September","October","November","December"]
    return month + "." + name[month-1];
});

// dimension by time of day bike was taken from dock
var timeDim = ndx.dimension(function(d) {
    return d.startTime;
});

// dimension by duration of the trip
var...