Mark DiMarco markmarkoh

Demo app to go along with blog post about creating custom TopoJSON data here

http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/

If my hometown in Montgomery, New York were to overlay my current location in Austin, Texas.

Experimenting with qGIS, ogr2ogr and TopoJSON.

This example uses custom map data that includes counties in the state of New York. Custom map data is specified with geographyConfig.dataUrl, which will attempt to make d3.json request to that URL.

In this example, counties are referred to by their FIPs code.

The data was converted from a .SHP file to TopoJSON, instructions to do that here

More DataMaps examples here


	var arcs = new Datamap({
	scope: 'world',
	element: document.getElementById('arcs'),
	projection: 'mercator',
	geographyConfig: {
	highlightBorderColor: '#bada55',
	popupTemplate: function(geography, data) {
	if ( data )
	return '<div class="hoverinfo" style="max-width: 300px;"><strong>' + geography.properties.name + '</strong> <br />' + data.desc + ' </div>'

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	path.line {

	var paths = [
	{
	"origin":{"latitude":42.350939,"longitude":-71.05229},
	"destination":{"latitude":35.466872,"longitude":139.622747},
	"options": {"strokeWidth": 2, "strokeColor": "rgba(0,0,255,0.33)"}
	},
	{
	"origin":{"latitude":42.350939,"longitude":-71.05229},
	"destination":{"latitude":39.908617,"longitude":19.581969},
	"options": {"strokeWidth": 1, "strokeColor": "rgba(0,0,255,0.33)"}

	//slow on a large enough collection ( > ~50 )
	var self = this;
	collectionData.each(function(model) {
	self.$el.append( model.get("name") );
	});

	//to make it fast again, you can create an element in memory and operate on that
	var $inMemoryjQueryElement = $("<div/>");
	collectionData.each(function(model) {
	$inMemoryjQueryElement.append( model.get("name") );

	<!doctype HTML>
	<meta charset = 'utf-8'>
	<html>
	<head>

	<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
	<script src='http://d3js.org/topojson.v1.min.js' type='text/javascript'></script>
	<script src='http://datamaps.github.io/scripts/datamaps.all.min.js' type='text/javascript'></script>

	<style>

	# read data and replace dots in names with underscores
	obesity = read.csv(
	'http://www.stat.berkeley.edu/classes/s133/data/obesity.csv',
	stringsAsFactors = F
	)
	names(obesity) = gsub("\\.", "_", names(obesity))

	# add column with two letter state names and
	obesity = plyr::mutate(obesity,
	State = str_trim(State),

	var election = new Datamap({
	scope: 'world',
	element: document.getElementById('arcs'),
	projection: 'mercator'
	});


	var presidentialTrips = [
	{
	origin: {