Example of interactive MDS visualisation

The position of the cities are chosen so that the distances between points approximate the road distances in the dataset ("eurodist" in the R package). The location of the points is computed by Multidimensional Scaling (cmdscale in R).

For example, the road distance between Athens and Barcelona is 3313 km. Because road distances for all possible pairs cannot be represented with complete accuracy on a 2D plane, the representation given by MDS can be misleading. In this interactive graph you can hover over a city to visualise the true road distances to its neighbours. If you hover over Gibraltar you'll see that the distances are quite accurate, whereas distances from Athens to most other cities are too large compared to actual road distances.

The idea for the example comes from the documentation for the cmdscale command. The added interactive mechanisms and D3 code are by Simon Barthelme, University of Geneva, Brain and Learning Lab.

<!DOCTYPE html>
<html lang="en">
<head>

.ghost {
    fill: blue;
    fill-opacity: 0;
    }

.label {
    font-size: 12px;
    color: blue;
    }

.datapoint {
    r: 5;
    fill: blue;
    fill-opacity: .5;
    }
    
    #d3plot {
    width: 500px;
    height: 500px;
    }

</style>

</head>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js to a secure url

Modified http://twitter.github.com/bootstrap/assets/js/bootstrap.js to a secure url

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

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

https://twitter.github.com/bootstrap/assets/js/bootstrap.js

https://d3js.org/d3.v2.js