mbostock/.block

## .block
license: gpl-3.0

## .gitignore
.DS_Store
build
node_modules

## README.md

      
    Raw
  

              README.md
            
          
    Using topojson.merge to merge states & provinces into a single feature from the Natural Earth 1:10,000,000 Admin 1 dataset.
The orange arc is an artifact of the merge that might either be a bug in the merge algorithm or in the dataset (or both).

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

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

.land {
  fill: #222;
  stroke: orange;
}

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

</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 = 960;

var projection = d3.geo.mercator()
    .scale(width / 2 / Math.PI)
    .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("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("world.json", function(error, world) {
  if (error) throw error;

  svg.insert("path", ".graticule")
      .datum(topojson.merge(world, world.objects.states.geometries))
      .attr("class", "land")
      .attr("d", path);

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

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

</script>

## Makefile
GENERATED_FILES = \
	world.json

all: $(GENERATED_FILES)

clean:
	rm -rf -- $(GENERATED_FILES)

.PHONY: all clean

build/ne_10m_%.zip:
	mkdir -p $(dir $@)
	curl -o $@ "http://www.nacis.org/naturalearth/10m/cultural/ne_10m_$*.zip"

build/ne_%_admin_1_states_provinces.shp: build/ne_%_admin_1_states_provinces_shp.zip
	mkdir -p $(dir $@)
	unzip -od $(dir $@) $<
	for file in $(dir $@)/ne_$*_admin_1_states_provinces_shp.*; do mv $$file $(dir $@)/ne_$*_admin_1_states_provinces"$${file#*_shp}"; done
	touch $@

world.json: build/ne_10m_admin_1_states_provinces.shp
	node_modules/.bin/topojson \
		-o $@ \
		-q 1e5 \
		--simplify-proportion .1 \
		-- states=$<

## package.json
{
  "name": "anonymous",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "topojson": "1"
  }
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.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.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

	.land {
	fill: #222;
	stroke: orange;
	}

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

	</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 = 960;

	var projection = d3.geo.mercator()
	.scale(width / 2 / Math.PI)
	.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("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("world.json", function(error, world) {
	if (error) throw error;

	svg.insert("path", ".graticule")
	.datum(topojson.merge(world, world.objects.states.geometries))
	.attr("class", "land")
	.attr("d", path);

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

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

	</script>
	GENERATED_FILES = \
	world.json

	all: $(GENERATED_FILES)

	clean:
	rm -rf -- $(GENERATED_FILES)

	.PHONY: all clean

	build/ne_10m_%.zip:
	mkdir -p $(dir $@)
	curl -o $@ "http://www.nacis.org/naturalearth/10m/cultural/ne_10m_$*.zip"

	build/ne_%_admin_1_states_provinces.shp: build/ne_%_admin_1_states_provinces_shp.zip
	mkdir -p $(dir $@)
	unzip -od $(dir $@) $<
	for file in $(dir $@)/ne_$_admin_1_states_provinces_shp.; do mv $$file $(dir $@)/ne_$_admin_1_states_provinces"$${file#_shp}"; done
	touch $@

	world.json: build/ne_10m_admin_1_states_provinces.shp
	node_modules/.bin/topojson \
	-o $@ \
	-q 1e5 \
	--simplify-proportion .1 \
	-- states=$<
	{
	"name": "anonymous",
	"version": "0.0.1",
	"private": true,
	"dependencies": {
	"topojson": "1"
	}
	}