enjalot/client.js

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

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

  this.drawMap = function () {
        var data;
        console.log(width, mapCanvasHeight);
        // Most parts of D3 don't know anything about SVG—only DOM.
        self.map = d3.geo.equirectangular().scale(width);
        self.path = d3.geo.path().projection(self.map);
        self.svg = d3.select('#map').append('svg:svg')
                  .attr("width", "100%")
                  .attr("height", "100%")
                  //.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);
        console.log(self.svg);
        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 mapCoords = self.map([-122.05740356445312, 37.4192008972168]);
	x = mapCoords[0];
	y = mapCoords[1];
        console.log(x, y);

	self.svg.append('svg:circle')
		.attr("r", 5)
		.style("fill", "steelblue")
		.attr("cx", x)
		.attr("cy", y);
  }


  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();
	}

	this.drawMap = function () {
	var data;
	console.log(width, mapCanvasHeight);
	// Most parts of D3 don't know anything about SVG—only DOM.
	self.map = d3.geo.equirectangular().scale(width);
	self.path = d3.geo.path().projection(self.map);
	self.svg = d3.select('#map').append('svg:svg')
	.attr("width", "100%")
	.attr("height", "100%")
	//.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);
	console.log(self.svg);
	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 mapCoords = self.map([-122.05740356445312, 37.4192008972168]);
	x = mapCoords[0];
	y = mapCoords[1];
	console.log(x, y);

	self.svg.append('svg:circle')
	.attr("r", 5)
	.style("fill", "steelblue")
	.attr("cx", x)
	.attr("cy", y);
	}


	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>