twedl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A bubble map of the US population by county. Adapted from Mike Bostock's Let's Make a Bubble Map.

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

path {
  fill: #ddd;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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

.legend {
    fill: none;
    stroke: #000;
    stroke-width: .5px;
    font: 10px sans-serif;
    color: #000;
    text-anchor: middle;
}


</style>
<body>
<script src="http://d3js.org/d3.v3.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);

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);
    /*
    console.log(svg.append("g")
        .attr("class","bubble")
        .selectAll("circle")
                .data(topojson.feature(us,us.objects.counties).features.filter(function(d) {
                 if (d.id.substr(0,2)!=="72") {
                    return d;
                 }
                }))
                .enter()
                .append("circle")
                .attr("transform",function(d) {
                    if (d.id.substr(0,2) === "72" ) {//isNaN(path.centroid(d)[0])) {
                        console.log("did we get here?"+d);
                    }
                    return "translate(" + path.centroid(d) + ")";
                }));
                */
/* Trying to put this in the makefile. Not really working though.
build/counties2.json: build/gz_2010_us_050_00_20m.shp
    ogr2ogr -f GeoJSON \
            -where "STATE != '72'" \
            $@ \
            $<
*/

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


    svg.append("g")
        .attr("class","bubble")
        .selectAll("circle")
        .data(topojson.feature(us,us.objects.counties).features.filter(function(d) {
             if (d.id.substr(0,2)!=="72") {
                return d;
             }
            }) // this is still inside .data()
        .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) {
            return radius(d.properties.population);
        });

        var legend = svg.append("g")
            .attr("class", "legend")
            .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
            .selectAll("g")
            .data([1e6, 5e6, 10e6])
            .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"));

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

</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## us.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us.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>

	path {
	fill: #ddd;
	stroke: #fff;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

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

	.legend {
	fill: none;
	stroke: #000;
	stroke-width: .5px;
	font: 10px sans-serif;
	color: #000;
	text-anchor: middle;
	}


	</style>
	<body>
	<script src="http://d3js.org/d3.v3.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);

	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);
	/*
	console.log(svg.append("g")
	.attr("class","bubble")
	.selectAll("circle")
	.data(topojson.feature(us,us.objects.counties).features.filter(function(d) {
	if (d.id.substr(0,2)!=="72") {
	return d;
	}
	}))
	.enter()
	.append("circle")
	.attr("transform",function(d) {
	if (d.id.substr(0,2) === "72" ) {//isNaN(path.centroid(d)[0])) {
	console.log("did we get here?"+d);
	}
	return "translate(" + path.centroid(d) + ")";
	}));
	*/
	/* Trying to put this in the makefile. Not really working though.
	build/counties2.json: build/gz_2010_us_050_00_20m.shp
	ogr2ogr -f GeoJSON \
	-where "STATE != '72'" \
	$@ \
	$<
	*/

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


	svg.append("g")
	.attr("class","bubble")
	.selectAll("circle")
	.data(topojson.feature(us,us.objects.counties).features.filter(function(d) {
	if (d.id.substr(0,2)!=="72") {
	return d;
	}
	}) // this is still inside .data()
	.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) {
	return radius(d.properties.population);
	});

	var legend = svg.append("g")
	.attr("class", "legend")
	.attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
	.selectAll("g")
	.data([1e6, 5e6, 10e6])
	.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"));

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

	</script>