Tributary inlet

_.md

[ Launch: Tributary inlet ] 5521024 by nezuQ

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"countries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

countries.json

inlet.js

var countries = tributary.countries;

var w = 1000,
    h = 850;

var svg = d3.select("svg").attr({
    width:w,
    height:h
});

var projection = d3.geo.orthographic()
    .scale(400)
    .translate([w / 2, h / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.selectAll("svg");

var feature = svg.selectAll("path")
    .data(countries.features)
    .enter().append("path")
	.attr({
        "d":path,
        "fill" : function(d,i){ return "rgb(0," + i + ",0)" },
        "class": function(d,i){ return "country " + d.id }
    });

feature.append("svg:title")
    .text(function(d) { return d.properties.name; });

var rwScale = d3.scale.linear()
    .domain([-w, w])
    .range([-180, 180]);

var rhScale = d3.scale.linear()
    .domain([-h, h])
    .range([90, -90]);

var pd,pm;
var rw = 0,
    rh = 0,
    rwb,
    rhb;

/*
 * TODO : 回転は、最初の表示を基準として行われる。
 *        その為、180度縦回転した後に横回転を行おうとすると、逆回転になる。
*/
svg.on("mousedown", function() {
    pd = d3.mouse(this);
    svg.on("mousemove", function() {
        pm = d3.mouse(this);
        rwb = rw + rwScale(pm[0] - pd[0]);
        rhb = rh + rhScale(pm[1] - pd[1]);
        projection
            .rotate([rwb, rhb]);
        svg.selectAll("path").attr({
            "d":path
        }); 
    });  
});

svg.on("mouseup", function() {
    rw = rwb;
    rh = rhb;
    svg.on("mousemove", null);
});