prototype: d3.geo

_.md

[ Launch: prototype: d3.geo ] 4737103 by ptvans
[ Launch: Tributary inlet ] 4700486 by enjalot

config.json

{"description":"prototype: d3.geo","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.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},"scheduledarrivals.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"realtimearrivals.csv":{"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}

inlet.js

var schedule = tributary.scheduledarrivals;
var realtime = tributary.realtimearrivals;
var svg = d3.select("svg");

//console.log(schedule)

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

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

//san francisco [-122.4194200, 37.7749300 ]
var lonlat = [-122.4194200, 37.7749300 ];

var projection = d3.geo.mercator()
  .scale(937413)
  .center(lonlat)
  .translate([width/2, height/2])

var xy = projection(lonlat);

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

svg.append("path")
.attr("transform", "translate(" + [xy[0] - center.x, xy[1] - center.y ] + ")")
.attr("d", path(countries))
.classed("land", true);

svg.append("circle")
	.classed("locator", true)
.attr({
  cx: xy[0],
  cy: xy[1],
  r: 283
})


svg.append("g")
  .attr("id", "schedule")

var points = svg.select("#schedule")
    .selectAll("circle")
    .data(schedule)
    .enter()
    .append("circle")
	.classed("arrival", true);
	points
    .attr("transform", function(d) {
        var p = projection([d.LONGITUDE, d.LATITUDE]);
        return "translate(" + p + ")";
    })
    .attr({
      "r": 5
    })
    
    svg.append("g")
  .attr("id", "realtime")

var points = svg.select("#realtime")
    .selectAll("circle")
    .data(realtime)
    .enter()
    .append("circle")
	.classed("realtime", true);
	points
    .attr("transform", function(d) {
        var p = projection([d.LONGITUDE, d.LATITUDE]);
        return "translate(" + p + ")";
    })
    .attr({
      "r": 5
    })

realtimearrivals.csv

scheduledarrivals.csv

style.css

.land {
  fill: #555555;
  stroke: #000000;
}

circle.locator {
  fill: #A5A5A5;
  stroke: #F8BB79;
  stroke-width: 3;
  fill-opacity: 0.0
}

circle.arrival {
  fill: #47AFCF;
  stroke: #FDFDFD;
  stroke-width: 0.5;
  fill-opacity: 0.2
}

circle.realtime {
  fill: #F1F133;
  stroke: #FDFDFD;
  stroke-width: 0.5;
  fill-opacity: 0.2
}

world110.json