World Map With Cities

_.md

[ Launch: Projections (merc,orth,stero) ] 311df900bc33ce754dd4 by jkeohan
[ Launch: Tributary inlet ] eae9e630e544c02b8433 by jkeohan

cities.csv

config.json

{"description":"World Map With Cities","endpoint":"","display":"svg","public":true,"require":[{"name":"tooltip","url":"http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"countries.json":{"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},"cities.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Bq1hClk.png"}

countries.json

inlet.js

var countries = tributary.countries
var cities = tributary.cities
//console.log(cities)
//console.log(countries.features)

var svg = d3.select('svg').style("background-color","#000000")
var canvas = canvasSize('svg')
//console.log(canvas)

w = canvas[0]
h = canvas[1]

//Define map projection
var projection = d3.geo.mercator()
	.center([ 0, 0 ])
   .translate([ w/2, h/1.74026575872 ])
   .scale([ w/6.5 ])
/*
//var projection = d3.geo.orthographic()
   .center([ 0, 0 ])
   .translate([ w/2, h/1.403440128 ])
   .scale([ w/9 ])
*/
/*
//var projection =  d3.geo.stereographic()
  .center([ 100, -18 ])
  .translate([ w/2, h/2.223049162752 ])
  .scale([ w/9 ])
  .rotate(50)
*/
//Define path generator
var path = d3.geo.path()
   .projection(projection);

//d3.json(countries)

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Country:</strong> <span style='color:red'>" + d.city + "</span>";
  })
svg.call(tip);

svg.selectAll("path")
   .data(countries.features)
   .enter()
   .append("path")
   .style("fill","#054bff")
   .attr("d", path);

var elem = svg.selectAll('g').data(cities)
var elemEnter = elem.enter().append('g')
.attr("transform", function(d,i) { return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1]+ ")" } )
//.transition().delay(function(d,i) { return i / cities.length * 3871})

var circle = elemEnter.append('circle')
 .on('mouseover',tip.show)
 .on('mouseout', tip.hide)
  .attr("fill-opacity",0)
  .attr("stroke-width",0)
  .attr("fill","#d4ee80")
.transition().delay(function(d,i) { return i / cities.length * 12000})	
  .attr("r",15)
.transition().duration(500)
  .attr("stroke", "rgba(230,230,230, .5)")
  .attr("fill-opacity",1)
  .attr("fill","#59b318")
  .attr("r",5)
  .attr("stroke-width",10)
  .attr("stroke-opacity",.8)


/*
var text = elemEnter.append("text")
.transition().duration(1000).delay(500)
.transition().delay(function(d,i) { return i / cities.length * 11000})
 .transition().duration(1000)	
    .attr("dx", function(d){return -33})
.attr("dy", function(d) { return 20 } )
    .text(function(d){return d.city})
	.attr("fill","white")
	.style("font-size",10).style("font-weight","bold")
.attr("text-anchor","start")

*/
 
//Load in GeoJSON data
function canvasSize(target) { 
  var height = parseFloat(d3.select(target).node().clientHeight)
  var width = parseFloat(d3.select(target).node().clientWidth)
  return [width,height]
}//canvasSize

styles.css

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #fff;
  border-radius: 2px;
  font-size:12px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 12px;
  width: 100%;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}