espinielli · April 23, 2017 14:56
diff --git a/README.md b/README.md
diff --git a/flags.js b/flags.js
 var width = 960,
    height = 500,
    centered;

 var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);

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

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

 var graticule = d3.geo.graticule();

 var defs = svg.append("defs");

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

 svg.append("use")
    .attr("class", "stroke-sphere")
    .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);


 queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/us.json")
    .defer(d3.tsv, "us-state-names-plus.tsv")
    .defer(d3.tsv, "us-state-id-flag-urls.tsv")
    .await(ready);

 function ready(error, usa, names, flags) {
  var dims = [];


  flags.forEach(function (d) { d.id = +d.id;});
  flags.sort(function(a,b) {
    return +a.id < +b.id ? -1 : +a.id > +b.id ? +1 : 0;
  });

  var states = topojson.feature(usa, usa.objects.states).features;

  states = states.filter(function(d) {
    return names.some(function(n) {
      if (d.id == n.id) {
        return d.name = n.name;
      }
    });
  });

  states = states.filter(function(d) {
    return flags.some(function(n) {
      if (d.id == n.id) {
        var bounds = path.bounds(d);
        if (bounds[0][0] < 0) bounds[0][0] = 0;
        if (bounds[1][0] > width) bounds[1][0] = width;
        if (bounds[0][1] < 0) bounds[0][1] = 0;
        if (bounds[1][1] < 0) bounds[1][1] = height;

       d.bounds = bounds;

        return d.url = n.url;
      }
    });
  });



  defs.selectAll("mask")
    .data(states)
    .enter()
      .append("clipPath")
        .attr("class", "mask")
        .attr("id", function(d) {return "iso-" + d.id})
        .append("path")
        .attr("d", path);


  svg.selectAll("state")
    .data(states)
    .enter()
    .insert("image", ".graticule")
      .attr("class", "state")
      .attr("xlink:href", function (d){console.log(d.url);return d.url;})
      .attr("x", function (d) {return d.bounds[0][0];})
      .attr("y", function (d) {return d.bounds[0][1];})
      .attr("width", function (d) {return d.bounds[1][0] - d.bounds[0][0];})
      .attr("height", function (d) {return d.bounds[1][1] - d.bounds[0][1];})
      .attr("preserveAspectRatio", "none")
      .attr("clip-path", function(d) {
        return "url(#iso-" + d.id + ")";
      });


  defs.selectAll("path")
    .data(states)
    .enter().append("path")
      .attr("d", path)
      .attr("id", function(d) {
        var b = path.bounds(d),
            s, m, t;
        s = [(b[1][0] - b[0][0]), (b[1][1] - b[0][1])];
        m = Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
        t = [(width - m * (b[1][0] + b[0][0])) / 2, (height - m * (b[1][1] + b[0][1])) / 2];
        dims[d.id] = {"extent": s, "translate": t};
        return "p"+d.id;
      });


  svg.insert("path", ".graticule")
      .datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
  // exterior boundaries
      svg.insert("path", ".graticule")
    .datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a === b}))
    .attr("d", path)
    .attr("class", "boundary");


 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 body {
  background: #fcfcfa;
 }

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

 .fill {
  fill: #d6fefa;
 }

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

 .land {
  fill: #000;
 }

 .image.state {
  stroke: #000;
  stroke-width: 0.5px;
 }

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

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/queue.v1.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="flags.js"></script>
 </body>
diff --git a/Makefile b/Makefile
 #
 # This Makefile assumes you have a link to gist 4090846 in ./d
 # (4090846 has files with US state names et al.)
 # I did also set ./git/info/exclude with
 # d/
 # in order to ignore d/ for GIT
 all: help

 .PHONY : help
 help:
 	@echo "make us-state-names-plus.tsv .  generate US states' names"
 	@echo "make us-state-flag-urls.tsv . . generate US state flags' URLs"
 	@echo "make download-flags . . . . . . download SVG flags from Wikipedia Commons in 'flags' directory."
 	@echo "make clean  . . . . . . . . . . remove all generated/downloaded files"


 us-state-names-plus.tsv: us-state-names.tsv
 	@head -n 52 $< | grep -v "Columbia" > $@
 	@echo "11	DC	Washington, D.C." >> $@


 us-state-flag-urls.tsv: us-state-names-plus.tsv
 	for s in $$(cat $< | tail -n+2 | cut -f3 | sed -e 's/[ ][ ]*/_/g') ; do \
 		h=$$(md5 -qs "Flag_of_$$s.svg" | cut -c1-2); \
 		f=$$(echo $$h | cut -c1); \
                n=$$(echo $$s | sed -e 's/,/%2C/g'); \
 		echo "http://upload.wikimedia.org/wikipedia/commons/$$f/$$h/Flag_of_$$n.svg"; \
 	done > $@

 us-state-ids.tsv: us-state-names-plus.tsv
 	for i in $$(cat $< | tail -n+2 | cut -f1); do \
 		echo $$(printf %02d $$i) ;\
 	done > $@

 us-state-id-flag-urls.tsv: us-state-ids.tsv us-state-flag-urls.tsv
 	paste -d '|' $^ | while IFS='|' read -r i n; do \
 	echo "$$i	$$n"; done > $@
 	echo "id	url\n$$(cat $@)" > $@


 .PHONY : download-flags
 download-flags: us-state-id-flag-urls.tsv
 	@mkdir -p flags
 	@for u in $$(cat $< | tail -n+2 | cut -f 2) ; do \
 		curl -s "$$u" > flags/$$(echo $$u | rev | cut -d'/' -f1 | rev | sed -e 's/%2C/,/g') ; \
 	done



 .PHONY : clean
 clean:
 	@rm -fr flags us-state-names-plus.tsv us-state-flag-urls.tsv us-state-id-flag-urls.tsv: us-state-ids.tsv
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us-state-id-flag-urls.tsv b/us-state-id-flag-urls.tsv
diff --git a/us-state-names-plus.tsv b/us-state-names-plus.tsv
diff --git a/us-state-names.tsv b/us-state-names.tsv
	var width = 960,
	height = 500,
	centered;

	var projection = d3.geo.albersUsa()
	.scale(width)
	.translate([width / 2, height / 2]);

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

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

	var graticule = d3.geo.graticule();

	var defs = svg.append("defs");

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

	svg.append("use")
	.attr("class", "stroke-sphere")
	.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);


	queue()
	.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/us.json")
	.defer(d3.tsv, "us-state-names-plus.tsv")
	.defer(d3.tsv, "us-state-id-flag-urls.tsv")
	.await(ready);

	function ready(error, usa, names, flags) {
	var dims = [];


	flags.forEach(function (d) { d.id = +d.id;});
	flags.sort(function(a,b) {
	return +a.id < +b.id ? -1 : +a.id > +b.id ? +1 : 0;
	});

	var states = topojson.feature(usa, usa.objects.states).features;

	states = states.filter(function(d) {
	return names.some(function(n) {
	if (d.id == n.id) {
	return d.name = n.name;
	}
	});
	});

	states = states.filter(function(d) {
	return flags.some(function(n) {
	if (d.id == n.id) {
	var bounds = path.bounds(d);
	if (bounds[0][0] < 0) bounds[0][0] = 0;
	if (bounds[1][0] > width) bounds[1][0] = width;
	if (bounds[0][1] < 0) bounds[0][1] = 0;
	if (bounds[1][1] < 0) bounds[1][1] = height;

	d.bounds = bounds;

	return d.url = n.url;
	}
	});
	});



	defs.selectAll("mask")
	.data(states)
	.enter()
	.append("clipPath")
	.attr("class", "mask")
	.attr("id", function(d) {return "iso-" + d.id})
	.append("path")
	.attr("d", path);


	svg.selectAll("state")
	.data(states)
	.enter()
	.insert("image", ".graticule")
	.attr("class", "state")
	.attr("xlink:href", function (d){console.log(d.url);return d.url;})
	.attr("x", function (d) {return d.bounds[0][0];})
	.attr("y", function (d) {return d.bounds[0][1];})
	.attr("width", function (d) {return d.bounds[1][0] - d.bounds[0][0];})
	.attr("height", function (d) {return d.bounds[1][1] - d.bounds[0][1];})
	.attr("preserveAspectRatio", "none")
	.attr("clip-path", function(d) {
	return "url(#iso-" + d.id + ")";
	});


	defs.selectAll("path")
	.data(states)
	.enter().append("path")
	.attr("d", path)
	.attr("id", function(d) {
	var b = path.bounds(d),
	s, m, t;
	s = [(b[1][0] - b[0][0]), (b[1][1] - b[0][1])];
	m = Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
	t = [(width - m * (b[1][0] + b[0][0])) / 2, (height - m * (b[1][1] + b[0][1])) / 2];
	dims[d.id] = {"extent": s, "translate": t};
	return "p"+d.id;
	});


	svg.insert("path", ".graticule")
	.datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);
	// exterior boundaries
	svg.insert("path", ".graticule")
	.datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a === b}))
	.attr("d", path)
	.attr("class", "boundary");


	};
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	background: #fcfcfa;
	}

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

	.fill {
	fill: #d6fefa;
	}

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

	.land {
	fill: #000;
	}

	.image.state {
	stroke: #000;
	stroke-width: 0.5px;
	}

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

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="flags.js"></script>
	</body>
	#
	# This Makefile assumes you have a link to gist 4090846 in ./d
	# (4090846 has files with US state names et al.)
	# I did also set ./git/info/exclude with
	# d/
	# in order to ignore d/ for GIT
	all: help

	.PHONY : help
	help:
	@echo "make us-state-names-plus.tsv . generate US states' names"
	@echo "make us-state-flag-urls.tsv . . generate US state flags' URLs"
	@echo "make download-flags . . . . . . download SVG flags from Wikipedia Commons in 'flags' directory."
	@echo "make clean . . . . . . . . . . remove all generated/downloaded files"


	us-state-names-plus.tsv: us-state-names.tsv
	@head -n 52 $< \| grep -v "Columbia" > $@
	@echo "11 DC Washington, D.C." >> $@


	us-state-flag-urls.tsv: us-state-names-plus.tsv
	for s in $$(cat $< \| tail -n+2 \| cut -f3 \| sed -e 's/[ ][ ]*/_/g') ; do \
	h=$$(md5 -qs "Flag_of_$$s.svg" \| cut -c1-2); \
	f=$$(echo $$h \| cut -c1); \
	n=$$(echo $$s \| sed -e 's/,/%2C/g'); \
	echo "http://upload.wikimedia.org/wikipedia/commons/$$f/$$h/Flag_of_$$n.svg"; \
	done > $@

	us-state-ids.tsv: us-state-names-plus.tsv
	for i in $$(cat $< \| tail -n+2 \| cut -f1); do \
	echo $$(printf %02d $$i) ;\
	done > $@

	us-state-id-flag-urls.tsv: us-state-ids.tsv us-state-flag-urls.tsv
	paste -d '\|' $^ \| while IFS='\|' read -r i n; do \
	echo "$$i $$n"; done > $@
	echo "id url\n$$(cat $@)" > $@


	.PHONY : download-flags
	download-flags: us-state-id-flag-urls.tsv
	@mkdir -p flags
	@for u in $$(cat $< \| tail -n+2 \| cut -f 2) ; do \
	curl -s "$$u" > flags/$$(echo $$u \| rev \| cut -d'/' -f1 \| rev \| sed -e 's/%2C/,/g') ; \
	done



	.PHONY : clean
	clean:
	@rm -fr flags us-state-names-plus.tsv us-state-flag-urls.tsv us-state-id-flag-urls.tsv: us-state-ids.tsv
	id	url
	01	http://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Alabama.svg
	02	http://upload.wikimedia.org/wikipedia/commons/e/e6/Flag_of_Alaska.svg
	04	http://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arizona.svg
	05	http://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg
	06	http://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg
	08	http://upload.wikimedia.org/wikipedia/commons/4/46/Flag_of_Colorado.svg
	09	http://upload.wikimedia.org/wikipedia/commons/9/96/Flag_of_Connecticut.svg
	10	http://upload.wikimedia.org/wikipedia/commons/c/c6/Flag_of_Delaware.svg
	12	http://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg
	13	http://upload.wikimedia.org/wikipedia/commons/0/0f/Flag_of_Georgia.svg
	15	http://upload.wikimedia.org/wikipedia/commons/e/ef/Flag_of_Hawaii.svg
	16	http://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_Idaho.svg
	17	http://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_Illinois.svg
	18	http://upload.wikimedia.org/wikipedia/commons/a/ac/Flag_of_Indiana.svg
	19	http://upload.wikimedia.org/wikipedia/commons/a/aa/Flag_of_Iowa.svg
	20	http://upload.wikimedia.org/wikipedia/commons/d/da/Flag_of_Kansas.svg
	21	http://upload.wikimedia.org/wikipedia/commons/8/8d/Flag_of_Kentucky.svg
	22	http://upload.wikimedia.org/wikipedia/commons/e/e0/Flag_of_Louisiana.svg
	23	http://upload.wikimedia.org/wikipedia/commons/3/35/Flag_of_Maine.svg
	24	http://upload.wikimedia.org/wikipedia/commons/a/a0/Flag_of_Maryland.svg
	25	http://upload.wikimedia.org/wikipedia/commons/f/f2/Flag_of_Massachusetts.svg
	26	http://upload.wikimedia.org/wikipedia/commons/b/b5/Flag_of_Michigan.svg
	27	http://upload.wikimedia.org/wikipedia/commons/b/b9/Flag_of_Minnesota.svg
	28	http://upload.wikimedia.org/wikipedia/commons/4/42/Flag_of_Mississippi.svg
	29	http://upload.wikimedia.org/wikipedia/commons/5/5a/Flag_of_Missouri.svg
	30	http://upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_Montana.svg
	31	http://upload.wikimedia.org/wikipedia/commons/4/4d/Flag_of_Nebraska.svg
	32	http://upload.wikimedia.org/wikipedia/commons/f/f1/Flag_of_Nevada.svg
	33	http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_New_Hampshire.svg
	34	http://upload.wikimedia.org/wikipedia/commons/9/92/Flag_of_New_Jersey.svg
	35	http://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_New_Mexico.svg
	36	http://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_New_York.svg
	37	http://upload.wikimedia.org/wikipedia/commons/b/bb/Flag_of_North_Carolina.svg
	38	http://upload.wikimedia.org/wikipedia/commons/e/ee/Flag_of_North_Dakota.svg
	39	http://upload.wikimedia.org/wikipedia/commons/4/4c/Flag_of_Ohio.svg
	40	http://upload.wikimedia.org/wikipedia/commons/6/6e/Flag_of_Oklahoma.svg
	41	http://upload.wikimedia.org/wikipedia/commons/b/b9/Flag_of_Oregon.svg
	42	http://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Pennsylvania.svg
	44	http://upload.wikimedia.org/wikipedia/commons/f/f3/Flag_of_Rhode_Island.svg
	45	http://upload.wikimedia.org/wikipedia/commons/6/69/Flag_of_South_Carolina.svg
	46	http://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_South_Dakota.svg
	47	http://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Tennessee.svg
	48	http://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg
	49	http://upload.wikimedia.org/wikipedia/commons/f/f6/Flag_of_Utah.svg
	50	http://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Vermont.svg
	51	http://upload.wikimedia.org/wikipedia/commons/4/47/Flag_of_Virginia.svg
	53	http://upload.wikimedia.org/wikipedia/commons/5/54/Flag_of_Washington.svg
	54	http://upload.wikimedia.org/wikipedia/commons/2/22/Flag_of_West_Virginia.svg
	55	http://upload.wikimedia.org/wikipedia/commons/2/22/Flag_of_Wisconsin.svg
	56	http://upload.wikimedia.org/wikipedia/commons/b/bc/Flag_of_Wyoming.svg
	11	http://upload.wikimedia.org/wikipedia/commons/3/3e/Flag_of_Washington%2C_D.C..svg
id	code	name
1	AL	Alabama
2	AK	Alaska
4	AZ	Arizona
5	AR	Arkansas
6	CA	California
8	CO	Colorado
9	CT	Connecticut
10	DE	Delaware
12	FL	Florida
13	GA	Georgia
15	HI	Hawaii
16	ID	Idaho
17	IL	Illinois
18	IN	Indiana
19	IA	Iowa
20	KS	Kansas
21	KY	Kentucky
22	LA	Louisiana
23	ME	Maine
24	MD	Maryland
25	MA	Massachusetts
26	MI	Michigan
27	MN	Minnesota
28	MS	Mississippi
29	MO	Missouri
30	MT	Montana
31	NE	Nebraska
32	NV	Nevada
33	NH	New Hampshire
34	NJ	New Jersey
35	NM	New Mexico
36	NY	New York
37	NC	North Carolina
38	ND	North Dakota
39	OH	Ohio
40	OK	Oklahoma
41	OR	Oregon
42	PA	Pennsylvania
44	RI	Rhode Island
45	SC	South Carolina
46	SD	South Dakota
47	TN	Tennessee
48	TX	Texas
49	UT	Utah
50	VT	Vermont
51	VA	Virginia
53	WA	Washington
54	WV	West Virginia
55	WI	Wisconsin
56	WY	Wyoming
11	DC	Washington, D.C.