nkhine/client.js

## client.js
function MyClient() {
    var self = this,
	width = $('#map').width(),
	mapCanvasHeight = (width * 0.45);

  this.init = function() {
    self.drawMap();
    self.drawMarker();
    self.drawArc();
  }

  this.drawMap = function () {
        var data;
        console.log(width, mapCanvasHeight);
        // Most parts of D3 don't know anything about SVG—only DOM.

        self.svg = d3.select('#map').append('svg:svg')
                  .attr("width", "100%")
                  .attr("height", "100%")
                  .attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);

        self.map = d3.geo.equirectangular().scale(width);
        self.path = d3.geo.path().projection(self.map);

        self.countries = self.svg.append('svg:g').attr('id', 'countries');
        d3.json("./world-countries.json", function(json) {
            self.countries.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", self.path)
            .on("mouseover", function(d) {
                d3.select(this).style("fill","#6C0");})
            .on("mouseout", function(d) {
                d3.select(this).style("fill","#000000");})
        });

    }

  this.drawMarker = function (message) {
    var city = "Mountain View";
    /// use longitude and latitude
    var mapCoords = this.map([-122.05740356445312, 37.4192008972168]);
	x = mapCoords[0]; // longitude
	y = mapCoords[1]; // latitude

        self.svg.append("svg:circle")
	    .attr("r", 5)
	    .attr("transform", function() { return "translate(" + x + "," + y + ")"; })
            .attr("class", "member")
	    .style("fill", "steelblue")
	    .on("mouseover", function(){
		d3.select(this).transition()
			.attr("r", 15)
	     })
	    .on("mouseout", function() {
		//this.parentNode.appendChild(this);
		d3.select(this).transition()
			.attr("r", 5)
	});

        self.svg.append("svg:text")
	    .attr("x", x - 10)
	    .attr("dy", y + 10)
	    .style("fill", "red")
	    .text(function(d) { return city; });
  }

  this.drawArc = function() {

    var arcs = self.svg.append("g")
      .attr("id", "arcs");

    var arc = d3.geo.greatArc()
      .precision(1);

    var links = [{
      'source': [-118.24368, 34.05223],
      'target': [114.15769, 22.28552]
      }];

    arcs.selectAll("path")
     .data(links)
     .enter().append("path")
     .style("stroke-width", 2)
     .style("stroke", "orange")
     .style("fill", "none")
     .attr("d", function(d) { return self.path(arc(d)); });

  }

  this.init();
};

var MyClient;
jQuery(function() {
  MyClient = new MyClient();
});

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 #legend {position: absolute;left: 840px;top: 21px;min-width: 60px;z-index: 2;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="./client.js"></script>

<div id="map"></div>
<div id="legend"></div>

## world-countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-countries.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	function MyClient() {
	var self = this,
	width = $('#map').width(),
	mapCanvasHeight = (width * 0.45);

	this.init = function() {
	self.drawMap();
	self.drawMarker();
	self.drawArc();
	}

	this.drawMap = function () {
	var data;
	console.log(width, mapCanvasHeight);
	// Most parts of D3 don't know anything about SVG—only DOM.

	self.svg = d3.select('#map').append('svg:svg')
	.attr("width", "100%")
	.attr("height", "100%")
	.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);

	self.map = d3.geo.equirectangular().scale(width);
	self.path = d3.geo.path().projection(self.map);

	self.countries = self.svg.append('svg:g').attr('id', 'countries');
	d3.json("./world-countries.json", function(json) {
	self.countries.selectAll("path")
	.data(json.features)
	.enter().append("path")
	.attr("d", self.path)
	.on("mouseover", function(d) {
	d3.select(this).style("fill","#6C0");})
	.on("mouseout", function(d) {
	d3.select(this).style("fill","#000000");})
	});

	}

	this.drawMarker = function (message) {
	var city = "Mountain View";
	/// use longitude and latitude
	var mapCoords = this.map([-122.05740356445312, 37.4192008972168]);
	x = mapCoords[0]; // longitude
	y = mapCoords[1]; // latitude

	self.svg.append("svg:circle")
	.attr("r", 5)
	.attr("transform", function() { return "translate(" + x + "," + y + ")"; })
	.attr("class", "member")
	.style("fill", "steelblue")
	.on("mouseover", function(){
	d3.select(this).transition()
	.attr("r", 15)
	})
	.on("mouseout", function() {
	//this.parentNode.appendChild(this);
	d3.select(this).transition()
	.attr("r", 5)
	});

	self.svg.append("svg:text")
	.attr("x", x - 10)
	.attr("dy", y + 10)
	.style("fill", "red")
	.text(function(d) { return city; });
	}

	this.drawArc = function() {

	var arcs = self.svg.append("g")
	.attr("id", "arcs");

	var arc = d3.geo.greatArc()
	.precision(1);

	var links = [{
	'source': [-118.24368, 34.05223],
	'target': [114.15769, 22.28552]
	}];

	arcs.selectAll("path")
	.data(links)
	.enter().append("path")
	.style("stroke-width", 2)
	.style("stroke", "orange")
	.style("fill", "none")
	.attr("d", function(d) { return self.path(arc(d)); });

	}

	this.init();
	};

	var MyClient;
	jQuery(function() {
	MyClient = new MyClient();
	});
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	#legend {position: absolute;left: 840px;top: 21px;min-width: 60px;z-index: 2;}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="./client.js"></script>

	<div id="map"></div>
	<div id="legend"></div>