QbGRoj

index.html

<div id="body"></div>

QbGRoj.markdown

QbGRoj ('-' * 6)

Forked from Mikael Hallgren's Pen lDKBn.

A Pen by JFarrow on CodePen.

License.

script.js

var uiCountries, uiCoordinates, uiRoutes, rMouseCoordinates, rOriginCoordinates;

var uiBaseSVG = d3.select("#body").append("svg:svg")
    .attr("width", 1280)
    .attr("height", 800)
    .on("mousedown", fnEventMouseDown);

var fnProjection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);

var uiCircleBackground = uiBaseSVG.append("svg:circle")
    .attr('cx', 640)
    .attr('cy', 400)
    .attr('r', fnProjection.scale())
    .attr('id','globe');

var uiGroupCountries  = uiBaseSVG.append('svg:g').attr('id', 'countries');
var uiGroupLocations  = uiBaseSVG.append('svg:g').attr('id', 'locations');
var uiGroupRoutes     = uiBaseSVG.append('svg:g').attr('id', 'routes');

var fnCircle  = d3.geo.greatCircle().origin(fnProjection.origin());
var fnPath    = d3.geo.path().projection(fnProjection);

d3.json("https://api.github.com/gists/9642141", function(error, root) {
  var rCountries = JSON.parse(root.files['gistfile1.json'].content).features    
  uiCountries = uiGroupCountries.selectAll("path.world")
    .data(rCountries)
    .enter()
    .append("svg:path")
    .attr("d", fnClip)
    .attr('class', 'country');

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

d3.json("https://api.github.com/gists/9642340", function(error, root) {
  var rCoordinates = JSON.parse(root.files['geo_dotts.json'].content).features    
  uiCoordinates = uiGroupLocations.selectAll('path.coordinate')
    .data(rCoordinates)
    .enter()
    .append('svg:path')
    .attr('class', 'coordinate')
    .attr('d', fnClip)
    .on('mouseover', fnMouseOverCoordinate)
    .on('mouseout', fnMouseOutCoordinate);

  // Just for demo purpose
  var rRoute = [{type: "LineString", coordinates: [rCoordinates[0].geometry.coordinates, rCoordinates[9].geometry.coordinates]}];
  fnDrawRoutes(rRoute)
});


function fnDrawRoutes(rRoutes){
  uiRoutes = uiGroupRoutes.selectAll(".arc").data(rRoutes);
  uiRoutes.enter().append("path").attr({'class': 'route'})
  uiRoutes.attr("d", fnClip);
}

d3.select(window).on("mousemove", fnEventMouseMove).on("mouseup", fnEventMouseUp);

/*
* Drawing helperfunctions
*/
function fnRedraw() {
  uiCountries.attr("d", fnClip);
  uiCoordinates.attr("d", fnClip);
  uiRoutes.attr("d", fnClip)
}
function fnClip(d) {
  return fnPath(fnCircle.clip(d));
}

/*
* Coordinates hoverevents
*/
function fnMouseOverCoordinate(d, i) {
    fnPath.pointRadius( function(d,i) {
        return 20;
    });
    d3.select(this).attr('d', fnClip);                        
}
function fnMouseOutCoordinate(d, i) {
    fnPath.pointRadius( function(d,i) {
        return 5;
    });
    d3.select(this).attr('d', fnClip);   
}

/*
* Rotation events
*/
function fnEventMouseDown() {
  rMouseCoordinates = [d3.event.pageX, d3.event.pageY];
  rOriginCoordinates = fnProjection.origin();
  d3.event.preventDefault();
}
function fnEventMouseUp() {
  if (rMouseCoordinates) {
    fnEventMouseMove();
    rMouseCoordinates = null;
  }
}
function fnEventMouseMove() {
  if (rMouseCoordinates) {
    var m1 = [d3.event.pageX, d3.event.pageY],
        o1 = [rOriginCoordinates[0] + (rMouseCoordinates[0] - m1[0]) / 8, rOriginCoordinates[1] + (m1[1] - rMouseCoordinates[1]) / 8];
    fnProjection.origin(o1);
    fnCircle.origin(o1)
    fnRedraw();
  }
}

style.css

svg {
  width: 1280px;
  height: 800px;
  pointer-events: all;
}

#globe{
  fill: #3498db;
}
.country{
  fill: #2ecc71;
  stroke: #27ae60;
}
.coordinate{
  fill: #2c3e50;
}
.route{
  fill: none;
  stroke: #e74c3c;
  stroke-width:2px;
}