mcburton/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A Map of Our World

"Us" being scholars presenting at the 2013 annual meeting of the Society for the Social Studies of Science. The map being a representation of the number of folks at the conference by country. The darker the red, the more people from institutions in that country will be showing up in lovely San Diego in October (presumably).
The United States of America has a strong showing, Antartica does not.
The data for this visualization was collected by:

scraping the conference website
obtaining location instutition by querying the Google Maps API with the self-reported instition information
cleaning up the data and tossing out records the Google Maps API couldn't identify
counting the total number of attendees by country
modifying with reckless abandon Jason Davies's World Map from the Topojson example gallery. Here is a link to a gist containing the source for this page.

Here are the number of attendees by country name

[('USA', 671),
 ('UK', 102),
 ('Canada', 100),
 ('The Netherlands', 59),
 ('Brazil', 51),
 ('Japan', 45),
 ('Denmark', 43),
 ('Norway', 41),
 ('Germany', 37),
 ('France', 29),
 ('Sweden', 21),
 ('Austria', 16),
 ('Mexico', 15),
 ('Australia', 12),
 ('Finland', 12),
 ('Italy', 11),
 ('Taiwan', 8),
 ('South Korea', 7),
 ('Israel', 5),
 ('Colombia', 5),
 ('Philippines', 5),
 ('Switzerland', 5),
 ('India', 5),
 ('Chile', 4),
 ('Spain', 4),
 ('Argentina', 3),
 ('China', 3),
 ('Portugal', 3),
 ('Czech Republic', 2),
 ('Singapore', 2),
 ('Belgium', 2),
 ('New Zealand', 2),
 ('Lithuania', 1),
 ('Ireland', 1),
 ('Nigeria', 1),
 ('Turkey', 1),
 ('Hong Kong', 1),
 ('Poland', 1),
 ('South Africa', 1),
 ('Sri Lanka', 1)]

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

body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.country {
  fill: #D1D1D1;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var countryCounts = {32: 3,
 36: 12,
 40: 16,
 56: 2,
 76: 51,
 124: 100,
 144: 1,
 152: 4,
 156: 3,
 158: 8,
 170: 5,
 203: 2,
 208: 43,
 246: 12,
 250: 29,
 276: 37,
 344: 1,
 356: 5,
 372: 1,
 376: 5,
 380: 11,
 392: 45,
 410: 7,
 440: 1,
 484: 15,
 528: 59,
 554: 2,
 566: 1,
 578: 41,
 608: 5,
 616: 1,
 620: 3,
 702: 2,
 710: 1,
 724: 4,
 752: 21,
 756: 5,
 792: 1,
 826: 102,
 840: 671};

var width = 960,
    height = 580;


var color = d3.scale.log()
    .domain([1, 700])
    .range(["#FFBAC1", "#FF051E"]);

var projection = d3.geo.kavrayskiy7()
    .scale(170)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("world-50m.json", function(error, world) {
  var countries = topojson.feature(world, world.objects.countries).features;


  svg.selectAll(".country")
      .data(countries)
    .enter().insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path)
      .style("fill", function(d) {
          // var f = countryCounts[d.id];
          //if(f) {
              return color(countryCounts[d.id])
              //} else {
              // return "#D1D1D1"
              // }
          });

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});

d3.select(self.frameElement).style("height", height + "px");

</script>

## world-50m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-50m.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #fcfcfa;
	}

	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 3px;
	}

	.fill {
	fill: #fff;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.country {
	fill: #D1D1D1;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	var countryCounts = {32: 3,
	36: 12,
	40: 16,
	56: 2,
	76: 51,
	124: 100,
	144: 1,
	152: 4,
	156: 3,
	158: 8,
	170: 5,
	203: 2,
	208: 43,
	246: 12,
	250: 29,
	276: 37,
	344: 1,
	356: 5,
	372: 1,
	376: 5,
	380: 11,
	392: 45,
	410: 7,
	440: 1,
	484: 15,
	528: 59,
	554: 2,
	566: 1,
	578: 41,
	608: 5,
	616: 1,
	620: 3,
	702: 2,
	710: 1,
	724: 4,
	752: 21,
	756: 5,
	792: 1,
	826: 102,
	840: 671};

	var width = 960,
	height = 580;


	var color = d3.scale.log()
	.domain([1, 700])
	.range(["#FFBAC1", "#FF051E"]);

	var projection = d3.geo.kavrayskiy7()
	.scale(170)
	.translate([width / 2, height / 2])
	.precision(.1);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("defs").append("path")
	.datum({type: "Sphere"})
	.attr("id", "sphere")
	.attr("d", path);

	svg.append("use")
	.attr("class", "stroke")
	.attr("xlink:href", "#sphere");

	svg.append("use")
	.attr("class", "fill")
	.attr("xlink:href", "#sphere");

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("world-50m.json", function(error, world) {
	var countries = topojson.feature(world, world.objects.countries).features;


	svg.selectAll(".country")
	.data(countries)
	.enter().insert("path", ".graticule")
	.attr("class", "country")
	.attr("d", path)
	.style("fill", function(d) {
	// var f = countryCounts[d.id];
	//if(f) {
	return color(countryCounts[d.id])
	//} else {
	// return "#D1D1D1"
	// }
	});

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>