enjalot/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Working with spatial data

Example #6

Working with TopoJSON and d3.js projections for mapping geospatial data.
forked from mbostock's block: U.S. Counties TopoJSON
forked from enjalot's block: WWSD #5: d3 + TopoJSON
forked from enjalot's block: WWSD #6: d3 mouse interaction

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

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

circle {
  fill: #fff;
  fill-opacity: 0.4;
  stroke: #111;
}

path.active {
  fill: #ff7f7f;
}
  circle.active {
    fill: #f00;
  }


</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.mercator();

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

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

var url = "http://enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.topojson"
var url2 = "http://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.topojson"
d3.json(url, function(error, countries) {
d3.json(url2, function(error, places) {
  if (error) throw error;

  console.log("topojson", countries, places);
  var geocountries = topojson.feature(countries, countries.objects.ne_50m_admin_0_countries);
  console.log("geojson", geocountries)

  var geoplaces = topojson.feature(places, places.objects.ne_50m_populated_places_simple);

  svg.selectAll("path")
    .data(geocountries.features)
  .enter().append("path")
    .attr("d", path)


  svg.selectAll("circle")
  .data(geoplaces.features)
  .enter().append("circle")
  .attr({
    r: 5,
    cx: function(d) { return projection(d.geometry.coordinates)[0]},
    cy: function(d) { return projection(d.geometry.coordinates)[1]}
  })


});
});

</script>

## thumbnail.png

      
    Raw
  

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

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

	circle {
	fill: #fff;
	fill-opacity: 0.4;
	stroke: #111;
	}

	path.active {
	fill: #ff7f7f;
	}
	circle.active {
	fill: #f00;
	}


	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator();

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

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

	var url = "http://enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.topojson"
	var url2 = "http://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.topojson"
	d3.json(url, function(error, countries) {
	d3.json(url2, function(error, places) {
	if (error) throw error;

	console.log("topojson", countries, places);
	var geocountries = topojson.feature(countries, countries.objects.ne_50m_admin_0_countries);
	console.log("geojson", geocountries)

	var geoplaces = topojson.feature(places, places.objects.ne_50m_populated_places_simple);

	svg.selectAll("path")
	.data(geocountries.features)
	.enter().append("path")
	.attr("d", path)


	svg.selectAll("circle")
	.data(geoplaces.features)
	.enter().append("circle")
	.attr({
	r: 5,
	cx: function(d) { return projection(d.geometry.coordinates)[0]},
	cy: function(d) { return projection(d.geometry.coordinates)[1]}
	})



	});
	});

	</script>