World Test

_.md

[ Launch: World Test ] 6557020 by TheSisb

config.json

{"description":"World Test","endpoint":"","display":"div","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"},{"name":"jquery","url":"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"pins.csv":{"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}},"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,"thumbnail":"http://i.imgur.com/nwM78oV.png"}

inlet.js

// Define the world map dimensions originally
var minWidth = 1200,
    minHeight = 1024;

// Define the projection
var projection = d3.geo.mercator()
    .center([10, 72])
    .scale(225)
    .rotate([0,0]);

// Create the SVG and set the viewbox for responsiveness
var svg = d3.select("#display")
			.append("svg:svg")
          		.attr("viewBox", "-500 0 " + minWidth + " " + minHeight )
          		.attr("preserveAspectRatio", "xMinYMin");

// Create the Geo.path on the projection so we can use lat/long etc
var path = d3.geo.path()
.projection(projection);

// Append the svg 'g' element
var g = svg.append("g")
.attr("width", minWidth)
.attr("height", minHeight);

// load and display the World
d3.json("world.json", function(error, topology) {
  
  // load and display the pins
  d3.csv("pins.csv", function(error, data) {
    console.log(data);
    var pin = g.selectAll("g")
    .data(data)
    .enter()
    .append("g");
    
    pin.append("polygon")
    .attr('points', polygonPos)
    .attr('fill', "#41e48a");
    pin.append("circle")
    .attr('cx', circleX)
    .attr('cy', circleY)
    .attr('r', '16')
    .attr('fill', '#41e48a');
    pin.append("circle")
    .attr('cx', circleX)
    .attr('cy', circleY)
    .attr('r', '13')
    .attr('fill', '#363636');
    pin.append("text")
    .attr('x', textX)
    .attr('y', textY)
    .attr('fill', '#fff')
    .text(pinText);
    
    
  });
  
  function polygonPos(d) {
    var result = '',
        x = projection([d.lon, d.lat])[0],
        y = projection([d.lon, d.lat])[1];
    
    return  (x-10) + "," + (y+10) + " " +
      (x) + "," + (y+30) + " " +
      (x+10) + "," + (y+10);
    
  }
  function circleX(d) {
    return projection([d.lon, d.lat])[0];
  }
  function circleY(d) {
    return projection([d.lon, d.lat])[1];
  }
  function textX(d) {
    return projection([d.lon, d.lat])[0] - 10;
  }
  function textY(d) {
    return projection([d.lon, d.lat])[1] + 3;
  }			
  function pinText(d){
    console.log(d);
    return d;
  } 
  
  
  
  g.selectAll("path")
  	.data(topojson.object(topology, topology.objects.countries).geometries)
	.enter()
	  .append("path")
		  .attr("d", path)
});

pins.csv

world.json