D3.js map Location, Drag + Zoom

D3.js-map-Location,-Drag-+-Zoom.markdown

D3.js map Location, Drag + Zoom

An experimental draggable and zoomable map. Circles are centred on their locations via latitude / longitude coordinates. Used to build a static map for nature.com. Check it out here: http://www.nature.com/news/ultimate-upgrade-for-us-synchrotron-1.13721

A Pen by chris-creditdesign on CodePen.

License.

index.html

<div class="outer-wrapper">
  <div class="count-map"></div>
</div><!--class="outer-wrapper"-->

script.js

var dataset = [
		{
			"name":"APS",
			"country":"USA",
			"town":"Chicago",
			"circumference":1101,
			"lat":41.881944,
			"lon":-87.627778
		},		{
			"name":"MAX IV",
			"country":"Sweden",
			"town":"Lund",
			"circumference":528,
			"lat":55.7,
			"lon":13.2
		},		{
			"name":"ESRF",
			"country":"France",
			"town":"Grenoble",
			"circumference":844,
			"lat":45.2002,
			"lon":5.7222
		},		{
			"name":"Spring8",
			"country":"Japan",
			"town":"Osaka",
			"circumference":1436,
			"lat":34.693889,
			"lon":135.502222
		},		{
			"name":"SIRIUS",
			"country":"Brazil",
			"town":"Campinas",
			"circumference":518,
			"lat":-22.900914,
			"lon":-47.057294
		}
		]


/*	Width and height */
var width = 1236;
var height = 596;
/*	Global variable to control the length of D3 transitons */
var duration = 150;
/*	Global variable to hold the cc or ac choice */
var count = "cc"
/*	Global variable to hold the cc or ac choice */
var field = "all"
/*	Global variable to control which year to disylay */
var displayYear = 2012;
/* An array to store every ac and cc value to be accesed by the scale function */
var countArray = [];
/*	The size of the largest circle */
var maxRadius = 65;
/*	The size of the smallest circle */
var minRadius = 1;
var horizontal = 0;
var vertical = 0;
var maxOffset = 400;
var zoom = 1;
var moveIncrement = 10;
var maxZoom = 10;
var zoomIncrement = 1;
var newHorizontal;
var newVertical;

/*	Define map projection */
var	projection = d3.geo.equirectangular()
		.translate([width/2, height/2])
		.scale([210]);

/*	Define path generator */
var	path = d3.geo.path()
		.projection(projection);

/*	Create a scale */
var countScale = d3.scale.linear()
		.domain([0,2000])
		.range([minRadius, maxRadius]);


/*	Create SVG element */
var holder = d3.select(".count-map")
		.append("svg")
		.attr("width", width)
		.attr("height", height);

/* 	Add a group to hold the map*/
var svg = holder.append("g")
		.attr("transform", "translate(0,0)")
		.attr("transform", "scale(1)");

var svgRect = svg.append("g");

var svgMap = svg.append("g");

var svgCircles = svg.append("g");

var svgDots = svg.append("g");

/* Define a clipping path to trim the oceans path to the extent of the svg */
svg.append("clipPath")
	.attr("id", "map-area")
	.append("rect")
	.attr("width", width)
	.attr("height", height);


/* Load in GeoJSON data */
d3.json("http://codepen.io/chris-creditdesign/pen/f6c0be7d519cf78b74f7c350d268606a.js", makeMap);

function makeMap (json) {
  
    svg.call(d3.behavior.zoom()
      .translate([0, 0])
      .scale(1)
      .scaleExtent([1, 8])
      .on("zoom", zoomed));
  
    svgRect.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#C8CEBA");
  
	/* Bind data and create one path per GeoJSON feature */
	var mapPaths = svgMap.selectAll("path")
		.data(json.features)
		.enter()
		.append("path")
		.attr("d", path)
		.attr("clip-path", "url(#map-area)")
		.style("fill", "#F2F5FA");
		/* Load in ranking data and call draw() */
		d3.json('http://s.cdpn.io/9353/ranking-country-global-2.json');
    
	/*	Set up circles */
	var circles = svgCircles.selectAll("circle")
				.data(dataset, function(d, i) {
					return d.country;
				})
				.enter()
				.append("circle")
				.attr("cx", function(d) {
							return projection([d.lon, d.lat])[0];
						})
				.attr("cy", function(d) {
							return projection([d.lon, d.lat])[1];
						})
        .attr("r", function(d, i) {
              return countScale(d.circumference);
        })
        .style("stroke", "#42B7B2")
        .style("stroke-width", "4px")
        .style("fill", "none");
  
	var dots = svgDots.selectAll("circle")
				.data(dataset, function(d, i) {
					return d.country;
				})
				.enter()
				.append("circle")
				.attr("cx", function(d) {
							return projection([d.lon, d.lat])[0];
						})
				.attr("cy", function(d) {
							return projection([d.lon, d.lat])[1];
						})
        .attr("r", "5")
        .style("stroke", "none")
        .style("fill", "black");
 
  function zoomed() {
      svgMap.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
      svgCircles.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
      svgDots.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");    
  }
    
  
  
}

style.css

body {
    font: 13px/1.231 arial, helvetica, clean, sans-serif;
}

.outer-wrapper .count-map {
  position: relative;
  border: 1px solid #C1CACB;
  width: 1236px;
  height: 596px;
	cursor: move;

  
}