ClashTheBunny · August 29, 2015 14:11
diff --git a/.gitignore b/.gitignore
 build
 node_modules
diff --git a/README.md b/README.md
diff --git a/ACS_12_5YR_B01003_with_ann.csv b/ACS_12_5YR_B01003_with_ann.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .land {
 fill: #ddd;
 }

 .border {
 fill: none;
 stroke: #fff;
 stroke-linejoin: round;
 stroke-linecap: round;
 }

 .bubble {
 fill: brown;
 fill-opacity: .5;
 stroke: #fff;
 stroke-width: .5px;
 }

 .bubble :hover {
 stroke: #000;
 }

 .legend circle {
 fill: none;
 stroke: #ccc;
 }

 .legend text {
 fill: #777;
 font: 10px sans-serif;
 text-anchor: middle;
 }

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

 var width = 960,
    height = 600;

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

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

 var radius = d3.scale.sqrt()
    .domain([0, 1e6])
    .range([0, 15]);

 var formatNumber = d3.format(",.0f");

 var metroAreaByID = d3.map();
 var populationByMetroArea = d3.map();


 queue(1)
  .defer(d3.csv,"MetroArea.csv", function(d) {
      if(d["Metropolitan Division Title"]) {
        metroAreaByID.set( d["FIPS State Code"] + d["FIPS County Code"],{id: d["Metro Division Code"], name: d["Metropolitan Division Title"]});
      } else {
        metroAreaByID.set( d["FIPS State Code"] + d["FIPS County Code"],{id: d["CBSA Code"], name: d["CBSA Title"]});
      }
  })
  .defer(d3.csv,"ACS_12_5YR_B01003_with_ann.csv", function(d) {
    if(metroAreaByID.has(d["geoid"])) {
      var metroName = metroAreaByID.get(d["geoid"]).name;
      if(populationByMetroArea.has(metroAreaByID.get(d["geoid"]).id)) {
        var current = populationByMetroArea.get(metroAreaByID.get(d["geoid"]).id);
        if (Number(d.population) > current.maxpop){
          populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: metroName, population: current.population + Number(d.population), maxpop: Number(d.population), id: d.geoid });
        } else {
          populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: current.name, population: current.population + Number(d.population), maxpop: current.population, id: current.id });
        }
      } else {
        populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: metroName, population: Number(d.population), maxpop: Number(d.population), id: d.geoid });
      }
    } else {
      populationByMetroArea.set(d.geoid,{ name: d.name, population: Number(d.population), maxpop: Number(d.population), id: d.geoid});
    }
  })
  .defer(d3.json,"us.json", function(error, us) {
    if (error) return console.error(error);

    svg.append("path")
        .datum(topojson.feature(us, us.objects.nation))
        .attr("class", "land")
        .attr("d", path);

    svg.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("class", "border border--state")
        .attr("d", path);


    svg.append("g")
      .attr("class", "bubble")
      .selectAll("circle")
      .data(topojson.feature(us, us.objects.counties).features
        .sort(function(a, b) { return b.properties.population - a.properties.population; }))
      .enter().append("circle")
      .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
      .attr("r", function(d) {
          if(populationByMetroArea.has(d.id)) {
            return radius(populationByMetroArea.get(d.id).population);
          } else {
            if(d.id === populationByMetroArea.get(metroAreaByID.get(d.id).id).id) {
              return radius(populationByMetroArea.get(metroAreaByID.get(d.id).id).population);
            } else {
              return 0;
            }
          }
      })
      .append("title")
      .text(function(d) {
          if(populationByMetroArea.has(d.id)) {
            return populationByMetroArea.get(d.id).name + formatNumber(populationByMetroArea.get(d.id).population);
          } else {
            if(d.id === populationByMetroArea.get(metroAreaByID.get(d.id).id).id) {
              return populationByMetroArea.get(metroAreaByID.get(d.id).id).name + "\nPopulation " + formatNumber(populationByMetroArea.get(metroAreaByID.get(d.id).id).population);
            } else {
              return "";
            }
          }
      }); 
 });




 var legend = svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
  .selectAll("g")
    .data([1e6, 3e6, 6e6])
  .enter().append("g");

 legend.append("circle")
    .attr("cy", function(d) { return -radius(d); })
    .attr("r", radius);

 legend.append("text")
    .attr("y", function(d) { return -2 * radius(d); })
    .attr("dy", "1.3em")
    .text(d3.format(".1s"));


 </script>
diff --git a/Makefile b/Makefile
 all: us.json MetroArea.csv
 	 
 clean:
 	rm -rf -- us.json build node_modules
 	 
 .PHONY: all clean 

 build/gz_2010_us_050_00_20m.zip:
 	mkdir -p $(dir $@)
 	curl -o $@ http://www2.census.gov/geo/tiger/GENZ2010/$(notdir $@)
 build/gz_2010_us_050_00_20m.shp: build/gz_2010_us_050_00_20m.zip
 	unzip -od $(dir $@) $<
 	touch $@
 node_modules/.bin/topojson:
 	npm install
 acs2012_5yr_B01003_05000US56015.zip:
 	curl -o $@ "http://api.censusreporter.org/1.0/data/download/latest?table_ids=B01003&geo_ids=050|01000US&format=csv"
 	touch $@
 ACS_12_5YR_B01003_with_ann.csv: acs2012_5yr_B01003_05000US56015.zip
 	unzip -p acs2012_5yr_B01003_05000US56015.zip acs2012_5yr_B01003_05000US56015/acs2012_5yr_B01003_05000US56015.csv | sed -e 's/05000US//' -e 's/B01003001 - Total/population/g' > $@

 MetroArea.csv:
 	curl -O http://www.census.gov/$$(curl http://www.census.gov/population/metro/data/def.html | grep List1 | cut -d \" -f 2)
 	libreoffice --headless --convert-to csv  List1.xls
 	rm List1.xls
 	mv List1.csv MetroArea.csv
 	sed -i '1,2d' MetroArea.csv

 build/counties.json: build/gz_2010_us_050_00_20m.shp node_modules/.bin/topojson ACS_12_5YR_B01003_with_ann.csv
 	node_modules/.bin/topojson \
 		-o $@ \
 		--id-property='STATE+COUNTY,geoid' \
 		--external-properties=ACS_12_5YR_B01003_with_ann.csv \
 		--properties='name=name' \
 		--properties='population=population' \
 		--projection='width = 960, height = 600, d3.geo.albersUsa().scale(1280).translate([width / 2, height / 2])' \
 		--simplify=.5 \
 		--filter=none \
 		-- counties=$<
 build/states.json: build/counties.json
 	node_modules/.bin/topojson-merge \
 		-o $@ \
 		--in-object=counties \
 		--out-object=states \
 		--key='d.id.substring(0, 2)' \
 		-- $<
 us.json: build/states.json
 	node_modules/.bin/topojson-merge \
 		-o $@ \
 		--in-object=states \
 		--out-object=nation \
 		-- $< 
diff --git a/MetroArea.csv b/MetroArea.csv
diff --git a/package.json b/package.json
 {
  "name": "anonymous",
  "private": true,
  "version": "0.0.1",
  "dependencies": {
    "topojson": "1"
  }
 }
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.land {
	fill: #ddd;
	}

	.border {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

	.bubble {
	fill: brown;
	fill-opacity: .5;
	stroke: #fff;
	stroke-width: .5px;
	}

	.bubble :hover {
	stroke: #000;
	}

	.legend circle {
	fill: none;
	stroke: #ccc;
	}

	.legend text {
	fill: #777;
	font: 10px sans-serif;
	text-anchor: middle;
	}

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

	var width = 960,
	height = 600;

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

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

	var radius = d3.scale.sqrt()
	.domain([0, 1e6])
	.range([0, 15]);

	var formatNumber = d3.format(",.0f");

	var metroAreaByID = d3.map();
	var populationByMetroArea = d3.map();


	queue(1)
	.defer(d3.csv,"MetroArea.csv", function(d) {
	if(d["Metropolitan Division Title"]) {
	metroAreaByID.set( d["FIPS State Code"] + d["FIPS County Code"],{id: d["Metro Division Code"], name: d["Metropolitan Division Title"]});
	} else {
	metroAreaByID.set( d["FIPS State Code"] + d["FIPS County Code"],{id: d["CBSA Code"], name: d["CBSA Title"]});
	}
	})
	.defer(d3.csv,"ACS_12_5YR_B01003_with_ann.csv", function(d) {
	if(metroAreaByID.has(d["geoid"])) {
	var metroName = metroAreaByID.get(d["geoid"]).name;
	if(populationByMetroArea.has(metroAreaByID.get(d["geoid"]).id)) {
	var current = populationByMetroArea.get(metroAreaByID.get(d["geoid"]).id);
	if (Number(d.population) > current.maxpop){
	populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: metroName, population: current.population + Number(d.population), maxpop: Number(d.population), id: d.geoid });
	} else {
	populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: current.name, population: current.population + Number(d.population), maxpop: current.population, id: current.id });
	}
	} else {
	populationByMetroArea.set(metroAreaByID.get(d["geoid"]).id,{ name: metroName, population: Number(d.population), maxpop: Number(d.population), id: d.geoid });
	}
	} else {
	populationByMetroArea.set(d.geoid,{ name: d.name, population: Number(d.population), maxpop: Number(d.population), id: d.geoid});
	}
	})
	.defer(d3.json,"us.json", function(error, us) {
	if (error) return console.error(error);

	svg.append("path")
	.datum(topojson.feature(us, us.objects.nation))
	.attr("class", "land")
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "border border--state")
	.attr("d", path);


	svg.append("g")
	.attr("class", "bubble")
	.selectAll("circle")
	.data(topojson.feature(us, us.objects.counties).features
	.sort(function(a, b) { return b.properties.population - a.properties.population; }))
	.enter().append("circle")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("r", function(d) {
	if(populationByMetroArea.has(d.id)) {
	return radius(populationByMetroArea.get(d.id).population);
	} else {
	if(d.id === populationByMetroArea.get(metroAreaByID.get(d.id).id).id) {
	return radius(populationByMetroArea.get(metroAreaByID.get(d.id).id).population);
	} else {
	return 0;
	}
	}
	})
	.append("title")
	.text(function(d) {
	if(populationByMetroArea.has(d.id)) {
	return populationByMetroArea.get(d.id).name + formatNumber(populationByMetroArea.get(d.id).population);
	} else {
	if(d.id === populationByMetroArea.get(metroAreaByID.get(d.id).id).id) {
	return populationByMetroArea.get(metroAreaByID.get(d.id).id).name + "\nPopulation " + formatNumber(populationByMetroArea.get(metroAreaByID.get(d.id).id).population);
	} else {
	return "";
	}
	}
	});
	});




	var legend = svg.append("g")
	.attr("class", "legend")
	.attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
	.selectAll("g")
	.data([1e6, 3e6, 6e6])
	.enter().append("g");

	legend.append("circle")
	.attr("cy", function(d) { return -radius(d); })
	.attr("r", radius);

	legend.append("text")
	.attr("y", function(d) { return -2 * radius(d); })
	.attr("dy", "1.3em")
	.text(d3.format(".1s"));


	</script>
	all: us.json MetroArea.csv

	clean:
	rm -rf -- us.json build node_modules

	.PHONY: all clean

	build/gz_2010_us_050_00_20m.zip:
	mkdir -p $(dir $@)
	curl -o $@ http://www2.census.gov/geo/tiger/GENZ2010/$(notdir $@)
	build/gz_2010_us_050_00_20m.shp: build/gz_2010_us_050_00_20m.zip
	unzip -od $(dir $@) $<
	touch $@
	node_modules/.bin/topojson:
	npm install
	acs2012_5yr_B01003_05000US56015.zip:
	curl -o $@ "http://api.censusreporter.org/1.0/data/download/latest?table_ids=B01003&geo_ids=050\|01000US&format=csv"
	touch $@
	ACS_12_5YR_B01003_with_ann.csv: acs2012_5yr_B01003_05000US56015.zip
	unzip -p acs2012_5yr_B01003_05000US56015.zip acs2012_5yr_B01003_05000US56015/acs2012_5yr_B01003_05000US56015.csv \| sed -e 's/05000US//' -e 's/B01003001 - Total/population/g' > $@

	MetroArea.csv:
	curl -O http://www.census.gov/$$(curl http://www.census.gov/population/metro/data/def.html \| grep List1 \| cut -d \" -f 2)
	libreoffice --headless --convert-to csv List1.xls
	rm List1.xls
	mv List1.csv MetroArea.csv
	sed -i '1,2d' MetroArea.csv

	build/counties.json: build/gz_2010_us_050_00_20m.shp node_modules/.bin/topojson ACS_12_5YR_B01003_with_ann.csv
	node_modules/.bin/topojson \
	-o $@ \
	--id-property='STATE+COUNTY,geoid' \
	--external-properties=ACS_12_5YR_B01003_with_ann.csv \
	--properties='name=name' \
	--properties='population=population' \
	--projection='width = 960, height = 600, d3.geo.albersUsa().scale(1280).translate([width / 2, height / 2])' \
	--simplify=.5 \
	--filter=none \
	-- counties=$<
	build/states.json: build/counties.json
	node_modules/.bin/topojson-merge \
	-o $@ \
	--in-object=counties \
	--out-object=states \
	--key='d.id.substring(0, 2)' \
	-- $<
	us.json: build/states.json
	node_modules/.bin/topojson-merge \
	-o $@ \
	--in-object=states \
	--out-object=nation \
	-- $<
	{
	"name": "anonymous",
	"private": true,
	"version": "0.0.1",
	"dependencies": {
	"topojson": "1"
	}
	}