EVE Online logon time by country

Total logon time by country in 2014 Q1

by ccpquant

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.all.js"></script>
<div id="map"></div>

<h1>EVE Online</h1>
<h2>Total logon time by country in 2014 Q1</h2>
<h3>Tranquility cluster - @CCPQuant</h3>
<ul id="countries"></ul>
<pre...

CSS

body {
    background: #011110;
    font-family: Calibri;
    font-size: 10px;
    position: relative;
}
h1 {
    font-size: 40px;
    color: rgb(0, 149, 164);
    margin: 2px;
}
h2 {
    font-size: 20px;
    color: rgb(36, 102, 110);
    margin: 2px;
}
h3 {
    color: rgb(38, 89, 95);
    font-size: 12px;
    margin: 2px;
}
ul
{
    list-style-type: none;
    font-size: 12px;
    margin: 0px;
    padding: 5px;
    position: absolute;
    bottom: 100px;
    left: 0px;
}


#mapdata {
    display: none;
}
#map {
    position: relative;
    width: 1280px;
    height: 720px;
}

JavaScript

//Load and parse the CSV data from the html element 
var raw = d3.select("#mapdata").text();
var parsed = d3.csv.parse(raw);
parsed.forEach(function (d) {
    d.logonDays = parseFloat(d.logonDays);
});
var color = d3.scale.linear()
    .domain(d3.extent(parsed, function (p) {
    return Math.sqrt(p.logonDays);
}))
    .range(["#233738", "#0095a4"])
    .interpolate(d3.interpolateLab);

var format = d3.format(",.1f");


var valueDict = {};
var colorDict = {};
parsed.forEach(function (r) {
    valueDict[r.countryCode] = r;
    colorDict[r.countryCode] = color(Math.sqrt(r.logonDays));
});


var basic_choropleth = new Datamap({
    element: document.getElementById("map"),
    projection: 'mercator',
    geographyConfig: {
        hideAntarctica: true,
        borderWidth: 1,
        borderColor: '#101010',
        highlightBorderColor: '#0b98a9',
        popupTemplate: function (geography, data) {
            if (data === null) {
                return '<div class="hoverinfo">' + geography.properties.name + '</div>';
            }
            var logonTime = data.logonDays;
            var logonUnit = 'days';
            if (logonTime > 365) {
                logonTime /= 365.0;
                logonUnit = 'years';
            } else if (logonTime < 1) {
                logonTime *= 24.0;
                logonUnit = 'hours';
            }

            return '<div class="hoverinfo">' + geography.properties.name + '<br />' + format(logonTime) + ' logon <strong>' + logonUnit + '</strong></div>';
        },
        highlightBorderWidth: 1,
        highlightFillColor: "#00494f"
    },
    fills: {
        defaultFill: "#132225"
    },
    data: valueDict

});

basic_choropleth.updateChoropleth(colorDict);

d3.select("#countries").selectAll("li")
    .data(parsed.slice(0,10))
    .enter()
    .append("li")
.text(function(d,i){return d.countryCode + ': ' + format(d.logonDays/365.0) + 'Y';})
    .style('color', function(d){return color(Math.sqrt(d.logonDays));});