wilson428/elasticSVG.js

## elasticSVG.js
(function() {
    var root = this;

	// create a new SVG element
	var elasticSVG = function(selector, opts) {
		opts = opts || {};

		// containing DOM element, which defaults to body
		var parent = document.querySelectorAll(selector || "body");

		if (!parent || !parent.length) {
			console.log("Couldn't find a parent for elasticSVG making the selector '" + selector + "'");
			return;
		}

		parent = parent[0];

		// you can specify a width if you like, or we'll snap to size of container
		var base = {
			width: typeof opts.width !== "undefined" ? opts.width : parent.clientWidth,
			scale: 1
		};

		// we need to remember the original width for scaling purposes
		base.original_width = base.width;

		// you can either specify the height or the aspect ratio. If neither is specified, refaults to roughly the golden ratio
	    if (typeof opts.height !== "undefined") {
	    	base.height = opts.height;
	    	opts.aspect = base.height / base.width;
	    } else {
		    opts.aspect = typeof opts.aspect !== "undefined" ? opts.aspect : 0.618;
			base.height = base.width * opts.aspect;
	    }

        var xmlns = "http://www.w3.org/2000/svg";
        var svg = document.createElementNS(xmlns, "svg");
		svg.setAttributeNS(null, "width", base.width);
		svg.setAttributeNS(null, "height", base.height);
		parent.appendChild(svg);

		// setting resize to "auto" sets the viewport to the original width and height so that the SVG always scales
	    if (opts.resize && opts.resize == "auto") {
			svg.setAttributeNS(null, "viewBox", "0 0 " + base.width + " " + base.height);
	    }

		function resize() {
			console.log(parent)
			base.width = parent.clientWidth;
		    base.height = base.width * opts.aspect;
		    base.scale = base.width / base.original_width;

			svg.setAttributeNS(null, "width", base.width);
			svg.setAttributeNS(null, "height", base.height);

			// optional callback
			if (opts.onResize) {
				opts.onResize(base.width, base.height, base.scale);
			}
		}

		var resizeTimer;

		// http://stackoverflow.com/questions/3339825/what-is-the-best-practise-to-not-to-override-other-bound-functions-to-window-onr
		function addResizeEvent(func, dur) {
		    var oldResize = window.onresize,
				resizeTimer,
				dur = typeof dur === "undefined" ? 250 : parseInt(dur, 10);

			window.onresize = function () {
				clearTimeout(resizeTimer);

		        if (typeof oldResize === 'function') {
		            oldResize();
		        }

				resizeTimer = setTimeout(function() {
					func();
				}, dur);
			}
		}

		addResizeEvent(resize, 250);

		if (opts.resize && opts.resize === "auto") {
			resize(); // call this on load since sometimes the initial conditions are wider than container
		}

		base.setResize = function(f) {
			opts.onResize = f;
		}

		base.svg = svg;
		return base;
	}

	// support various modular environments
	if (typeof define === "function" && define.amd) { // RequireJS
	    define(elasticSVG);
	} else if (typeof module === "object" && module.exports) { // browserify
	    module.exports = elasticSVG;
	} else {
	    root.elasticSVG = elasticSVG; // directly included
	}

}());

## index.html
<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
		<title>TopoJSON Counties With Organic Borders</title>
		<style>

path.county {
  fill: #eee;
  stroke: #fff;
  stroke-width: .5px;
}

path.state {
	fill: none;
	stroke: #404040;
	stroke-width: 1px;
}

.Example {
	max-width: 900px;
	width: 100%;
	height: 1500px;
}

.title {
	font-size: 24px;
	font-family: Arial;
	text-align: center;
}


		</style>

	</head>
	<body>
		<div class="Example">
			<div class="title">Merged</div>
			<div id="map_merged"></div>
			<div class="title">Meshed</div>
			<div id="map_meshed"></div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
		<script src="elasticSVG.js"></script>
		<script>
			var projection = d3.geo.albersUsa()
			    .scale(1200)
			    .translate([450, 275]);

			var path = d3.geo.path().projection(projection);
			d3.json("us.json", function(error, topology) {
				if (error) throw error;

				// MESHED

				// make the SVG responsive
				var el_meshed = elasticSVG("#map_meshed", {
					width: 900,
					aspect: 0.65,
					resize: "auto"
				});

				var svg_meshed = d3.select(el_meshed.svg).append("g");

				//meshed
				var counties = topojson.feature(topology, topology.objects.counties).features;


				svg_meshed.selectAll("path")
			    	.data(counties)
			    	.enter().append("path")
			    	.attr("class", "county")
			    	.attr("d", path)
			    	.on("click", function(d) {
			    		console.log(d);
			    	});

				svg_meshed.append("path")
					.datum(topojson.mesh(topology, topology.objects.counties, function(a, b) { return a.id - a.id % 1000 !== b.id - b.id % 1000; }))
					.attr("class", "state")
					.attr("d", path);


				// MERGED

				// make the SVG responsive
				var el_meshed = elasticSVG("#map_merged", {
					width: 900,
					aspect: 0.65,
					resize: "auto"
				});

				var svg_merged = d3.select(el_meshed.svg).append("g");

				//meshed
				svg_merged.selectAll("path")
			    	.data(counties)
			    	.enter().append("path")
			    	.attr("class", "county")
			    	.attr("d", path);

			    // let's get an organic list of fips
			    var fips = {};
			    counties.forEach(function(county) { fips[county.id - county.id % 1000] = 1; });

			    var states = [];
			    // and merge by fips
				Object.keys(fips).forEach(function(fip) {
					var state = topojson.merge(topology, topology.objects.counties.geometries.filter(function(d) { return d.id - d.id % 1000 == fip; }));
					states.push(state);
				});

				svg_merged.append("g").attr("id", "states").selectAll(".state").append("path")
					.data(states)
					.enter()
					.append("path")
					.attr("class", "state")
					.attr("d", function(d) {
						return path(d);
					});
			});
		</script>
	</body>
</html>

## us.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us.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() {
	var root = this;

	// create a new SVG element
	var elasticSVG = function(selector, opts) {
	opts = opts \|\| {};

	// containing DOM element, which defaults to body
	var parent = document.querySelectorAll(selector \|\| "body");

	if (!parent \|\| !parent.length) {
	console.log("Couldn't find a parent for elasticSVG making the selector '" + selector + "'");
	return;
	}

	parent = parent[0];

	// you can specify a width if you like, or we'll snap to size of container
	var base = {
	width: typeof opts.width !== "undefined" ? opts.width : parent.clientWidth,
	scale: 1
	};

	// we need to remember the original width for scaling purposes
	base.original_width = base.width;

	// you can either specify the height or the aspect ratio. If neither is specified, refaults to roughly the golden ratio
	if (typeof opts.height !== "undefined") {
	base.height = opts.height;
	opts.aspect = base.height / base.width;
	} else {
	opts.aspect = typeof opts.aspect !== "undefined" ? opts.aspect : 0.618;
	base.height = base.width * opts.aspect;
	}

	var xmlns = "http://www.w3.org/2000/svg";
	var svg = document.createElementNS(xmlns, "svg");
	svg.setAttributeNS(null, "width", base.width);
	svg.setAttributeNS(null, "height", base.height);
	parent.appendChild(svg);

	// setting resize to "auto" sets the viewport to the original width and height so that the SVG always scales
	if (opts.resize && opts.resize == "auto") {
	svg.setAttributeNS(null, "viewBox", "0 0 " + base.width + " " + base.height);
	}

	function resize() {
	console.log(parent)
	base.width = parent.clientWidth;
	base.height = base.width * opts.aspect;
	base.scale = base.width / base.original_width;

	svg.setAttributeNS(null, "width", base.width);
	svg.setAttributeNS(null, "height", base.height);

	// optional callback
	if (opts.onResize) {
	opts.onResize(base.width, base.height, base.scale);
	}
	}

	var resizeTimer;

	// http://stackoverflow.com/questions/3339825/what-is-the-best-practise-to-not-to-override-other-bound-functions-to-window-onr
	function addResizeEvent(func, dur) {
	var oldResize = window.onresize,
	resizeTimer,
	dur = typeof dur === "undefined" ? 250 : parseInt(dur, 10);

	window.onresize = function () {
	clearTimeout(resizeTimer);

	if (typeof oldResize === 'function') {
	oldResize();
	}

	resizeTimer = setTimeout(function() {
	func();
	}, dur);
	}
	}

	addResizeEvent(resize, 250);

	if (opts.resize && opts.resize === "auto") {
	resize(); // call this on load since sometimes the initial conditions are wider than container
	}

	base.setResize = function(f) {
	opts.onResize = f;
	}

	base.svg = svg;
	return base;
	}

	// support various modular environments
	if (typeof define === "function" && define.amd) { // RequireJS
	define(elasticSVG);
	} else if (typeof module === "object" && module.exports) { // browserify
	module.exports = elasticSVG;
	} else {
	root.elasticSVG = elasticSVG; // directly included
	}

	}());
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
	<title>TopoJSON Counties With Organic Borders</title>
	<style>

	path.county {
	fill: #eee;
	stroke: #fff;
	stroke-width: .5px;
	}

	path.state {
	fill: none;
	stroke: #404040;
	stroke-width: 1px;
	}

	.Example {
	max-width: 900px;
	width: 100%;
	height: 1500px;
	}

	.title {
	font-size: 24px;
	font-family: Arial;
	text-align: center;
	}


	</style>

	</head>
	<body>
	<div class="Example">
	<div class="title">Merged</div>
	<div id="map_merged"></div>
	<div class="title">Meshed</div>
	<div id="map_meshed"></div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="elasticSVG.js"></script>
	<script>
	var projection = d3.geo.albersUsa()
	.scale(1200)
	.translate([450, 275]);

	var path = d3.geo.path().projection(projection);
	d3.json("us.json", function(error, topology) {
	if (error) throw error;

	// MESHED

	// make the SVG responsive
	var el_meshed = elasticSVG("#map_meshed", {
	width: 900,
	aspect: 0.65,
	resize: "auto"
	});

	var svg_meshed = d3.select(el_meshed.svg).append("g");

	//meshed
	var counties = topojson.feature(topology, topology.objects.counties).features;


	svg_meshed.selectAll("path")
	.data(counties)
	.enter().append("path")
	.attr("class", "county")
	.attr("d", path)
	.on("click", function(d) {
	console.log(d);
	});

	svg_meshed.append("path")
	.datum(topojson.mesh(topology, topology.objects.counties, function(a, b) { return a.id - a.id % 1000 !== b.id - b.id % 1000; }))
	.attr("class", "state")
	.attr("d", path);


	// MERGED

	// make the SVG responsive
	var el_meshed = elasticSVG("#map_merged", {
	width: 900,
	aspect: 0.65,
	resize: "auto"
	});

	var svg_merged = d3.select(el_meshed.svg).append("g");

	//meshed
	svg_merged.selectAll("path")
	.data(counties)
	.enter().append("path")
	.attr("class", "county")
	.attr("d", path);

	// let's get an organic list of fips
	var fips = {};
	counties.forEach(function(county) { fips[county.id - county.id % 1000] = 1; });

	var states = [];
	// and merge by fips
	Object.keys(fips).forEach(function(fip) {
	var state = topojson.merge(topology, topology.objects.counties.geometries.filter(function(d) { return d.id - d.id % 1000 == fip; }));
	states.push(state);
	});

	svg_merged.append("g").attr("id", "states").selectAll(".state").append("path")
	.data(states)
	.enter()
	.append("path")
	.attr("class", "state")
	.attr("d", function(d) {
	return path(d);
	});
	});
	</script>
	</body>
	</html>