public

cpudney / 2010au.json

Last active 2014-02-23

{
    "lapCount": 58,
 
    "laps": [
        {
            "name": "Sebastian Vettel",
            "placing": [1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "pitstops": [9],
            "mechanical": [25]
        },
        {
            "name": "Mark Webber",
            "placing": [2, 3, 3, 3, 3, 3, 2, 2, 2, 1, 1, 6, 6, 6, 6, 6, 8, 8, 8, 8, 8, 8, 7, 7, 7, 7, 6, 6, 5, 5, 5, 5, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 8, 9, 9],
            "pitstops": [10, 32, 56]
        },
        {
            "name": "Fernando Alonso",
            "placing": [3, 18, 18, 18, 18, 15, 13, 13, 15, 13, 10, 10, 10, 9, 8, 8, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 7, 7, 7, 7, 7, 7, 6, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
            "pitstops": [8],
            "accident": [0]
        },
        {
            "name": "Jenson Button",
            "placing": [4, 6, 6, 6, 6, 6, 19, 19, 12, 4, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "pitstops": [6, 34],
            "accident": [0]
        },
        {
            "name": "Felipe Massa",
            "placing": [5, 2, 2, 2, 2, 2, 3, 3, 9, 7, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 5, 5, 6, 6, 6, 6, 5, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
            "pitstops": [8]
        },
        {
            "name": "Nico Rosberg",
            "placing": [6, 5, 5, 5, 5, 5, 5, 5, 7, 6, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 5, 5, 5],
            "pitstops": [8, 33]
        },
        {
            "name": "Michael Schumacher",
            "placing": [7],
            "accident": [0]
        },
        {
            "name": "Rubens Barrichello",
            "placing": [8, 9, 9, 9, 9, 9, 8, 7, 10, 8, 7, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 8, 8, 8, 8, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 9, 9, 9, 9, 9, 9, 8, 8],
            "pitstops": [8, 31],
            "accident": [55]
        },
        {
            "name": "Robert Kubica",
            "placing": [9, 4, 4, 4, 4, 4, 4, 4, 6, 5, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
            "pitstops": [8]
        },
        {
            "name": "Adrian Sutil",
            "placing": [10, 8, 8, 8, 8, 8, 7, 9, 5, 2],
            "mechanical": [9]
        },
        {
            "name": "Lewis Hamilton",
            "placing": [11, 7, 7, 7, 7, 7, 6, 6, 11, 11, 8, 7, 7, 7, 7, 7, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 3, 3, 3, 3, 3, 3, 3, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6],
            "pitstops": [8, 34],
            "accident": [55]
        },
        {
            "name": "Sebastien Buemi",
            "placing": [12],
            "accident": [0]
        },
        {
            "name": "Vitantonio Liuzzi",
            "placing": [13, 12, 12, 12, 12, 12, 11, 11, 3, 9, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 10, 10, 10, 10, 10, 9, 9, 9, 9, 9, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 7, 7, 7],
            "pitstops": [9]
        },
        {
            "name": "Pedro De La Rosa",
            "placing": [14, 11, 11, 11, 11, 11, 10, 10, 13, 12, 9, 9, 9, 10, 10, 10, 10, 10, 10, 10, 10, 11, 11, 11, 11, 11, 10, 10, 10, 10, 10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10, 10, 12, 12],
            "pitstops": [8]
        },
        {
            "name": "Nico Hulkenberg",
            "placing": [15],
            "accident": [0]
        },
        {
            "name": "Kamui Kobayashi",
            "placing": [16],
            "accident": [0]
        },
        {
            "name": "Jaime Alguersuari",
            "placing": [17, 13, 13, 13, 13, 13, 12, 12, 4, 10, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 13, 13, 13, 12, 12, 12, 12, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 12, 12, 12, 12, 11, 11],
            "pitstops": [9, 27]
        },
        {
            "name": "Vitaly Petrov",
            "placing": [18, 10, 10, 10, 10, 10, 9, 8, 14, 14],
            "pitstops": [8],
            "accident": [9]
        },
        {
            "name": "Heikki Kovalainen",
            "placing": [19, 15, 15, 15, 14, 14, 14, 15, 18, 18, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13],
            "pitstops": [8]
        },
        {
            "name": "Jarno Trulli",
            "placing": [20, 20, 20, 20, 20, 17, 15, 14, 17, 15, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 12, 12, 12, 11, 11, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 11, 11, 10, 10],
            "pitstops": [1, 8, 29],
            "mechanical": [0]
        },
        {
            "name": "Bruno Senna",
            "placing": [21, 14, 14, 14, 15],
            "mechanical": [4]
        },
        {
            "name": "Karun Chandock",
            "placing": [22, 16, 16, 16, 16, 19, 18, 18, 19, 19, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 17, 17, 17, 17, 17, 16, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14],
            "pitstops": [8, 46]
        },
        {
            "name": "Timo Glock",
            "placing": [23, 17, 17, 17, 17, 16, 16, 16, 8, 17, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14],
            "pitstops": [8, 9],
            "mechanical": [41]
        },
        {
            "name": "Luca di Grassi",
            "placing": [24, 19, 19, 19, 19, 18, 17, 17, 16, 16, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 16, 16, 16, 16, 16, 17, 16],
            "pitstops": [10, 25],
            "mechanical": [26]
        }
    ],
    "lapped": [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 17, 17, 16, 16, 16, 16, 16, 16, 16,15, 15, 15, 14, 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13 , 13],
    "safety": [1, 2, 3, 4]
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Formula 1 Lap Chart</title>
 
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
 
    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.0"></script>
 
</head>
<body>
<span class="title">Australian Formula 1 Grand Prix, 2010
    <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank"><img align="top"
                                                                                  alt="Creative Commons License"
                                                                                  src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png"/></a>
</span>
<span class="attrib">By <a href="http://vislives.com/" target="_blank">Chris Pudney</a></span>
 
<div id="chart"></div>
<span class="legend">M = mechanical failure | P = pit stop | X = accident |  <span
        class="safety">safety-car deployed</span> | <span class="lapped">lapped</span></span>
<script src="lap-chart.js" type="text/javascript"></script>
</body>
</html>

// Dimensions.
const DIMENSIONS = getWindowDimensions();
const WIDTH = DIMENSIONS.width;
const HEIGHT = DIMENSIONS.height - 100;
 
// Insets.
const INSETS = {'left': 150, 'right': 150, 'top': 30, 'bottom': 30};
 
// Padding.
const PADDING = {'left': 20, 'right': 20, 'top': 15, 'bottom': 15};
 
// Tick-mark length.
const TICK_MARK_LENGTH = 8;
 
// Marker radius.
const MARKER_RADIUS = 12;
 
// Scales.
const SCALES = {};
 
// Opacity of dimmed objects.
var DIMMED_OPACITY = 0.3;
var HIGHLIGHT_OPACITY = 1.0;
 
// Visualize when document has loaded.
//
window.onload = function() {
 
    // Load data.
    d3.json("2010au.json", function(data) {
 
        // Check integrity.
        integrityCheck(data);
 
        // Sort laps on finishing order.
        data.laps.sort(function(a, b) {
 
            var aLaps = a.placing.length;
            var bLaps = b.placing.length;
            return aLaps == bLaps ? a.placing[aLaps - 1] - b.placing[bLaps - 1] : bLaps - aLaps;
        });
 
        // Process lap markers..
        data.pitstops = processLapMarkers(data, "pitstops");
        data.mechanical = processLapMarkers(data, "mechanical");
        data.accident = processLapMarkers(data, "accident");
 
        // Visualize the data.
        visualize(data);
    });
};
 
// Check data.
//
// data: the data to check.
//
function integrityCheck(data) {
 
    var laps = data.laps;
    var lapCount = data.lapCount;
 
    // Check lap data.
    checkLaps(laps, lapCount);
 
    // Check lapped data.
    checkLapped(data.lapped, lapCount, laps.length);
 
    // Check safety car data.
    checkSafetyCar(data.safety, lapCount);
}
 
// Check lap data.
//
// laps: the lap data.
// lapCount: number of laps.
//
function checkLaps(laps, lapCount) {
 
    for (var j = 0;
         j < laps.length;
         j++) {
 
        // Has name?
        var name = laps[j].name;
        if (name == undefined || name.length == 0) {
 
            alert("Warning: invalid name for element " + j);
        }
 
        // Has placings?
        var places = laps[j].placing;
        if (places == undefined) {
 
            alert("Warning: missing placings for element " + j + " (" + name + ")");
        }
        else if (places.length == 0 || places.length > lapCount + 1) {
 
            alert("Warning: invalid number of placings (" + places.length + ") for element " + j +
                " (" + name + ") - expected between 1 and " + (lapCount - 1));
        }
 
        // Check markers.
        var maxLaps = places.length;
        checkMarker(laps[j].pitstops, "pitstop", maxLaps, j, name);
        checkMarker(laps[j].mechanical, "mechanical", maxLaps, j, name);
        checkMarker(laps[j].accident, "accident", maxLaps, j, name);
    }
 
    for (var i = 0;
         i < lapCount;
         i++) {
 
        var positions = [];
        for (j = 0;
             j < laps.length;
             j++) {
 
            places = laps[j].placing;
            if (places.length > i) {
 
                // Valid placing?
                var placing = places[i];
                if (isNaN(placing) || placing < 1 || placing % 1 != 0) {
 
                    alert("Warning: invalid placing '" + placing + "' for " + laps[j].name)
                }
                else {
 
                    var count = positions[placing];
                    positions[placing] = isNaN(count) ? 1 : count + 1
                }
            }
        }
 
        // Check for duplicate/missing positions.
        for (j = 1;
             j < positions.length;
             j++) {
 
            count = positions[j];
            if (count != 1) {
 
                alert("Warning: data inconsistent: lap " + i + ", position " + j + ", count " + count);
            }
        }
    }
}
 
// Check integrity of marker data.
//
// marker: marker data.
// name: driver name.
// type: text description of marker.
// max: maximum allowed lap value of marker.
// index: index of driver in list.
//
function checkMarker(marker, type, max, index, name) {
 
    if (marker != undefined) {
 
        // Check marker.
        for (var i = 0;
             i < marker.length;
             i++) {
 
            var stop = marker[i];
            if (isNaN(stop) || stop < 0 || stop >= max || stop % 1 != 0) {
 
                alert("Warning: invalid " + type + " (" + stop + ") for element " + index + " (" + name + ")");
            }
        }
    }
}
 
// Check lapped data.
//
// lapped: the lapped data.
// lapCount: number of laps.
// driverCount: number of drivers.
//
function checkLapped(lapped, lapCount, driverCount) {
 
    if (lapped != undefined) {
 
        var lappedLength = lapped.length;
        if (lappedLength != lapCount) {
 
            alert("Lapped array length (" + lappedLength + ") incorrect - expected length " + lapCount);
        }
 
        for (var j = 1;
             j < lappedLength;
             j++) {
 
            // Valid position.
            var position = lapped[j];
            if (isNaN(position) || position % 1 != 0 || position < -1 || position > driverCount) {
 
                alert("Invalid lapped position: element " + j + " (" + position
                    + "); expected integer between -1 and " + driverCount);
            }
        }
    }
}
 
// Check safety car data.
//
// safety: safety car data.
// lapCount: number of laps.
//
function checkSafetyCar(safety, lapCount) {
 
    if (safety != undefined) {
 
        for (var i = 0;
             i < safety.length;
             i++) {
 
            // Valid lap?
            var lap = safety[i];
            if (isNaN(lap) || lap < 0 || lap % 1 != 0 || lap > lapCount) {
 
                alert("Invalid safety car lap: element " + i + " (" + lap
                    + "); expected integer between 0 and " + lapCount);
            }
        }
    }
}
 
// Process lap markers.
//
// data: lap data.
// key: marker key.
//
function processLapMarkers(data, key) {
 
    var markers = [];
    var p = 0;
    for (var i = 0;
         i < data.laps.length;
         i++) {
 
        var lapData = data.laps[i];
        var laps = lapData[key];
        if (laps != undefined) {
            for (var j = 0;
                 j < laps.length;
                 j++) {
 
                var lap = laps[j];
                var marker = {};
                marker.start = lapData.placing[0];
                marker.lap = lap;
                marker.placing = lapData.placing[lap];
                marker.name = lapData.name;
 
                markers[p++] = marker;
            }
        }
    }
    return markers;
}
 
// Create the visualization.
//
// data the lap data object.
//
function visualize(data) {
 
    // Configure scales.
    configureScales(data);
 
    // Root panel.
    var vis = d3.select('#chart')
        .append('svg:svg')
        .attr('width', WIDTH)
        .attr('height', HEIGHT);
 
    // Add safety car element.
    addSafetyElement(vis, data.safety);
 
    // Add lapped element.
    addLappedElement(vis, data.lapped);
 
    // Lap tick-lines.
    addLapTickLines(vis, data.lapCount);
 
    // Lap labels.
    addLapLabels(vis, data.lapCount, SCALES.y.range()[0] - PADDING.bottom, '0.0em', 'top');
    addLapLabels(vis, data.lapCount, SCALES.y.range()[1] + PADDING.top, '0.35em', 'bottom');
 
    // Add placings poly-lines.
    addPlacingsLines(vis, data.laps);
 
    // Add name labels.
    addDriverLabels(vis, data.laps, 'pole', SCALES.x(0) - PADDING.right, 'end')
        .attr('y', function (d) {
 
            return SCALES.y(d.placing[0] - 1);
        });
    addDriverLabels(vis, data.laps, 'flag', SCALES.x(data.lapCount) + PADDING.left, 'start')
            .attr('y', function (d, i) {
 
            return SCALES.y(i);
        });
 
    // Add markers.
    addMarkers(vis, data.pitstops, "pitstop", "P");
    addMarkers(vis, data.mechanical, "mechanical", "M");
    addMarkers(vis, data.accident, "accident", "X");
}
 
// Configure the scales.
//
// data: data set.
//
function configureScales(data) {
 
    SCALES.x = d3.scale.linear()
        .domain([0, data.lapCount])
        .range([INSETS.left, WIDTH - INSETS.right]);
 
    SCALES.y = d3.scale.linear()
        .domain([0, data.laps.length - 1])
        .range([INSETS.top, HEIGHT - INSETS.bottom]);
 
    SCALES.clr = d3.scale.category20();
}
 
// Highlight driver.
//
// vis: the data visualization root.
// index: index of driver to highlight.
//
function highlight(vis, name) {
 
    // Dim others.
    vis.selectAll('polyline')
        .style('opacity', function(d) {
 
            return d.name == name ? HIGHLIGHT_OPACITY : DIMMED_OPACITY;
        });
 
    vis.selectAll('circle')
        .style('opacity', function(d) {
 
            return d.name == name ? HIGHLIGHT_OPACITY : DIMMED_OPACITY;
        });
 
    vis.selectAll('text.label')
        .style('opacity', function(d) {
 
            return d.name == name ? HIGHLIGHT_OPACITY : DIMMED_OPACITY;
        });
}
 
// Remove highlights.
//
// vis: the data visualization root.
//
function unhighlight(vis) {
 
    // Reset opacity.
    vis.selectAll('polyline')
        .style('opacity', HIGHLIGHT_OPACITY);
    vis.selectAll('circle')
        .style('opacity', HIGHLIGHT_OPACITY);
    vis.selectAll('text.label')
        .style('opacity', HIGHLIGHT_OPACITY);
}
 
// Add safety car laps (rectanle elements).
//
// vis: the data visualization root.
// data: safety car laps.
//
function addSafetyElement(vis, data) {
 
    if (data != undefined) {
 
        var y = SCALES.y.range()[0];
        var height = SCALES.y.range()[1] - y;
        var width = SCALES.x(1) - SCALES.x(0);
 
        vis.selectAll('rect.safety')
            .data(data)
            .enter()
            .append('svg:rect')
            .attr('class', 'safety')
            .attr('x', function(d) {
 
                return SCALES.x(d - 0.5);
            })
            .attr('y', function() {
 
                return y;
            })
            .attr('height', function() {
 
                return height;
            })
            .attr('width', function() {
 
                return width;
            });
    }
}
 
// Add lapped rectangle elements.
//
// vis: the data visualization root.
// data: the lapped data.
//
function addLappedElement(vis, data) {
 
    if (data != undefined) {
 
        var width = SCALES.x(1) - SCALES.x(0);
 
        vis.selectAll('rect.lapped')
            .data(data)
            .enter()
            .append('svg:rect')
            .attr('class', 'lapped')
            .attr('x', function(d, i) {
 
                return SCALES.x(i + 0.5);
            })
            .attr('y', function(d) {
 
                return SCALES.y(d > 0 ? d - 1.5 : 0);
            })
            .attr('height', function(d) {
 
                return d > 0 ? SCALES.y.range()[1] - SCALES.y(d - 1.5) : 0;
            })
            .attr('width', function(d) {
 
                return d > 0 ? width : 0;
            });
    }
}
// Add lap tick-lines.
//
// vis: the data visualization root.
// lapCount: number of laps.
//
function addLapTickLines(vis, lapCount) {
 
    vis.selectAll('line.tickLine')
        .data(SCALES.x.ticks(lapCount))
        .enter().append('svg:line')
        .attr('class', 'tickLine')
        .attr('x1', function(d) {
 
            return SCALES.x(d + 0.5);
        })
        .attr('x2', function(d) {
 
            return SCALES.x(d + 0.5);
        })
        .attr('y1', SCALES.y.range()[0] - TICK_MARK_LENGTH)
        .attr('y2', SCALES.y.range()[1] + TICK_MARK_LENGTH)
        .attr('visibility', function(d) {
 
            return d <= lapCount ? 'visible' : 'hidden'
        });
}
 
// Add lap labels.
//
// vis: the data visualization root.
// data: lap data.
// y: y position of labels.
// dy: y offset.
// cssClass: CSS class id.
//
function addLapLabels(vis, data, y, dy, cssClass) {
 
    vis.selectAll('text.lap.' + cssClass)
        .data(SCALES.x.ticks(data))
        .enter().append('svg:text')
        .attr('class', 'lap ' + cssClass)
        .attr('x', function(d) {
 
            return SCALES.x(d);
        })
        .attr('y', y)
        .attr('dy', dy)
        .attr('text-anchor', 'middle')
        .text(function(d, i) {
 
            return i > 0 ? i : '';
        });
}
 
// Add placings polyline elements.
//
// vis: the visualization root.
// laps: lap data.
//
function addPlacingsLines(vis, laps) {
 
    vis.selectAll('polyline.placing')
        .data(laps)
        .enter()
        .append('svg:polyline')
        .attr('class', 'placing')
        .attr('points', function(d) {
 
            var points = [];
            for (var i = 0;
                 i < d.placing.length;
                 i++) {
 
                points[i] = SCALES.x(i) + ',' + SCALES.y(d.placing[i] - 1);
            }
 
            if (points.length > 0)
                points.push(SCALES.x(i - 0.5) + ',' + SCALES.y(d.placing[i - 1] - 1));
 
            return points.join(' ');
        })
        .style('stroke', function(d) {
 
            return SCALES.clr(d.placing[0]);
        })
        .on('mouseover', function(d) {
 
            highlight(vis, d.name);
        })
        .on('mouseout', function() {
 
            unhighlight(vis);
        });
}
 
// Add driver name labels.
//
// vis: the data visualization root.
// laps: the lap data.
// cssClass: CSS class id.
// textAnchor: text-anchor value.
//
function addDriverLabels(vis, laps, cssClass, x, textAnchor) {
 
    return vis.selectAll('text.label.' + cssClass)
        .data(laps)
        .enter()
        .append('svg:text')
        .attr('class', 'label ' + cssClass)
        .attr('x', x)
        .attr('dy', '0.35em')
        .attr('text-anchor', textAnchor)
        .text(function(d) {
 
            return d.name;
        })
        .style('fill', function(d) {
 
            return SCALES.clr(d.placing[0]);
        })
        .on('mouseover', function(d) {
 
            highlight(vis, d.name);
        })
        .on('mouseout', function() {
 
            unhighlight(vis);
        });
}
 
// Add markers.
//
// vis: the visualization root.
// data: marker data.
// class: marker sub-class.
// label: marker label.
//
function addMarkers(vis, data, cssClass, label) {
    label = label || "P";
 
    // Place circle glyph.
    vis.selectAll("circle.marker." + cssClass)
        .data(data)
        .enter()
        .append("svg:circle")
        .attr("class", "marker " + cssClass)
        .attr("cx", function(d) {
 
            return SCALES.x(d.lap);
        })
        .attr("cy", function(d) {
 
            return SCALES.y(d.placing - 1);
        })
        .attr("r", MARKER_RADIUS)
        .style("fill", function(d) {
 
            return SCALES.clr(d.start);
        })
        .on('mouseover', function(d) {
 
            highlight(vis, d.name);
        })
        .on('mouseout', function() {
 
            unhighlight(vis);
        });
 
    // Place text.
    vis.selectAll("text.label.marker" + cssClass)
        .data(data)
        .enter()
        .append("svg:text")
        .attr("class", "label marker" + cssClass)
        .attr("x", function(d) {
 
            return SCALES.x(d.lap);
        })
        .attr("y", function(d) {
 
            return SCALES.y(d.placing - 1);
        })
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .text(label)
        .on('mouseover', function(d) {
 
            highlight(vis, d.name);
        })
        .on('mouseout', function() {
 
            unhighlight(vis);
        });
}
 
// Gets the window dimensions.
//
function getWindowDimensions() {
 
    var width = 630;
    var height = 460;
    if (document.body && document.body.offsetWidth) {
 
        width = document.body.offsetWidth;
        height = document.body.offsetHeight;
    }
 
    if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
 
        width = document.documentElement.offsetWidth;
        height = document.documentElement.offsetHeight;
    }
 
    if (window.innerWidth && window.innerHeight) {
 
        width = window.innerWidth;
        height = window.innerHeight;
    }
 
    return {'width': width, 'height': height};
}

body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: sans-serif;
    font-size: 12px;
    color: #666666;
    overflow: hidden;
}
 
a:link {
    color: #ccccff;
}
a:visited {
    color: #cccccc;
}
a:active {
    color: #ffccff;
}
a.hover {
    color: #ffcccc;
}
 
.title {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
 
.attrib {
    float: right;
    font-size: 14px;
    color: #ffffff;
}
 
text.lap {
    fill: #999999;
}
 
text.label {
    fill: #000000;
}
 
text.label.marker {
    font-weight: bold;
}
 
polyline.placing {
    fill: none;
    stroke-width: 5;
}
 
line.tickLine {
    stroke: #999999;
}
 
.lapped {
    background-color: #333333;
    stroke: #333333;
    fill: #333333;
}
 
.safety{
    background-color: #330000;
    stroke: #330000;
    fill: #330000;
}