prototype: d3.geo topojson v1

_.md

[ Launch: prototype: d3.geo topojson v1 ] f30c2f71292587b235da by heavysixer
[ Launch: prototype: d3.geo topojson v1 ] 15f816958d3a54e9e798 by heavysixer
[ Launch: prototype: d3.geo topojson v1 ] ea8cb87ef3c5574d38b1 by enjalot
[ Launch: Tributary inlet ] 4700486 by enjalot

config.json

{"description":"prototype: d3.geo topojson v1","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson v1","url":"http://d3js.org/topojson.v1.min.js"},{"name":"topojson v1","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world110.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"fullscreen":false,"thumbnail":"http://i.imgur.com/OtZ3o1y.png","ajax-caching":true}

inlet.js

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

var width = tributary.sw;
var height = tributary.sh;
var center = {
  x: width/2,
  y: height/2
}

var steps =[];
var offset = 1;
var size = 15;
for(var x=0; x < (size/offset); x++){
  steps.push(x);
}

var world = tributary.world110;
var countries = topojson.feature(world, world.objects.land);


var projection = d3.geo.orthographic()
  .scale(200)
  .rotate([9,0,0])
  .translate([width/2, height/2])
  .clipAngle(90);


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


svg.append("path")
.attr("d", path(countries))
.classed("land", true);

var bbox = svg.selectAll('.land').node().getBBox();


svg.selectAll('.land').data(steps).enter()
.append('path').attr({
  'class':'stroke',
  d: function(d){
    return path(countries);
  },
  'data-index': function(d,i){return i;},
  "transform": function(d, i, a) {
    var diff = i/steps.length
    console.log(diff)
    var x = bbox.width/2  + bbox.x - (bbox.width * (diff))
    var y = bbox.height/2 + bbox.y - (bbox.height * (diff))
    console.log('x',x)
    result = '';
    result += "translate("+x+","+y+")"
    result += "scale(" + diff + ")"
    return result;
  }

});
console.log('bing!');



/*
.attr({
  'shape-rendering': 'auto',
  x: function(d,i){
    var diff = origin[0] + ((offset*i)/2);
    return diff;
  },
  y: function(d,i){
    return origin[1] + ((offset*i)/2);
  },
  width: function(d,i){
    return size - (i*offset)
  },
  height: function(d,i){
    return size - (i*offset)
  },
  stroke: "#ff0000",
  'stroke-width': offset +'px',
  fill:'none'
})
*/

style.css

.land {
  fill: none;
  stroke: #000000;
}
.stroke {
  fill: none;
  stroke: #ff0000;
}

circle {
  fill: #ffffff;
  stroke: #CC0A48;
  fill-opacity: 0.2
}

world110.json