john-guerra · June 7, 2019 21:29
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>US 2012 elections by zipcode</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


 <style>
  .tract {
    stroke: #777;
    stroke-width: 0.05px;
    pointer-events: all;
  }
  .tract:hover {
    stroke: orange;
    pointer-events: all;

  }
  .tract-border {
    fill: none;
    /*stroke: #777;*/
    stroke-width: 0.05px;
    pointer-events: none;
  }
  @media (max-width: 767px) {
    .label {
      transform: rotate(-45deg) translate(-10px, 25px);
    }
  }
  .tract-border-state {
    fill: none;
    stroke: #333;
    stroke-width: 0.5px;
    pointer-events: none;
  }
  .legend {
    font-family: sans-serif;
    font-size: 10pt;

  }
  .legendTitle {
    font-weight: bold;
    font-size:11pt;
  }
  .background {
    fill:#f5f5f5;
  }
  body {
    background: #f5f5f5;
    /*font-family: sans-serif;*/
  }
  .bar {
    font-family: sans-serif;
    font-size: 8pt;
  }
  #cityLegend {
    font-family: sans-serif;
    text-anchor: middle;
  }
  #details .background {
    fill: #f5f5f5;
    fill-opacity: 0.7;
  }
  svg {
    width:100%;
  }
 </style>
 </head>

 <body>

 <div class="row">
  <div class="col-md-1 col-xs-1"></div>
  <div class="col-md-10 col-xs-10">
    <h4>Click on the map to explore</h4>
  </div>
 </div>
    <svg ></svg>
 </div>

 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
 <script src="https://d3js.org/topojson.v1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.11.0/d3-legend.min.js"></script>

 <!-- Bootstrap -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <script src="main.js"></script>

 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45612277-1', 'auto');
  ga('send', 'pageview');

 </script>
 </body>
diff --git a/main.js b/main.js
 var svg = d3.select("svg"),
    width = 900,
    height = 400,
    margin = {
        top: 20,
        bottom: width > 767 ? 20 : 100,
        right: 20,
        left: 0
    },
    centered,
    fmt = d3.format(" >5.2%"),
    errorCount = 0;

 svg.attr("width", width)
    .attr("height", height);

 function ready(error, us, data) {
    if (error) throw error;


    var dictCities = {};
    data.forEach(function(d) {
        //Parse the percentages
        d["per_gop"] = +(d["per_gop"].slice(0, -1).replace(",", "."));
        d["per_dem"] = +(d["per_dem"].slice(0, -1).replace(",", "."));
        d.result = d["per_dem"] - d["per_gop"];
        d.combined_fips = +d.combined_fips;
        dictCities[d.combined_fips] = d;
    });

    var color = d3.scaleSequential(d3.interpolateRdBu)
        .domain([-1, 1]);

    // Add background
    svg.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height)
        // .on("click", clicked);
        // To allow the zoom back
        // svg.on("click", clicked);
    var zoom = d3.zoom()
        .scaleExtent([1, 15])
        .on("zoom", zoomed);

    svg.style("pointer-events", "all")
        .call(zoom);
    var g = svg.append("g");

    function zoomed() {
        console.log(d3.event.transform);
        g.attr("transform", d3.event.transform);
    };

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

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

    g.selectAll("path")
        .data(topojson.feature(us, us.objects.counties).features)
        .enter().append("path")
        .attr("class", "tract")
        .on("click", clicked)
        .on("mouseover", updateDetails)
        .style("fill", function(d) {
            var city = dictCities[d.id];
            if (city)
                return color(city.result);
            else {
                errorCount++;
                console.log(d.id + " Not found" + " errors = " + errorCount);
                return color(0);
            }
        })
        .attr("d", path)
        .append("title")
        .text(function(d) {
            var city = dictCities[d.id],
                county,
                state;

            // var msg = d.id;
            if (city) {
                county = city.county_name;
                state = city.state_abbr;
                var msg = county + ', ' + state + " Difference: " + fmt(city.result);
            }
            return msg;
        });


    // g.append("g")
    //     .attr("class", "counties")
    //   .selectAll("path")
    //     .data(topojson.feature(us, us.objects.counties).features)
    //   .enter().append("path")
    //     .attr("class", "tract-border")
    //     .attr("d", path);

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


    // g.append("path")
    //     .datum(topojson.mesh(mapData, mapData.objects.depts, function(a, b) { return a !== b; }))
    //     .attr("class", "tract-border-state")
    //     .attr("d", pathState);

    // The details
    var wScale = d3.scaleLinear()
        .domain([-1, 1])
        .range([-width / 3, width / 3]);
    var details_layer = svg.append("g")
        .attr("id", "details")
        .attr("transform", "translate(" + (width / 2 - 100) + ", 30)");
    details_layer.append("rect")
        .attr("class", "background")
        .attr("transform", "translate(" + (-wScale.range()[1] + 100) + ", -20)")
        .attr("width", wScale.range()[1] * 2 + 70)
        .attr("rx", 5)
        .attr("ry", 5)
        .attr("height", 60);
    details_layer.append("text")
        .attr("id", "cityLegend")
        .text("Difference")
        .attr("transform", "translate(100, 0)");

    var detailsBars = details_layer.selectAll("bar")
        .data([0.4978, -0.5021])
        .enter()
        .append("g")
        .attr("class", "bar");
    detailsBars
        .append("rect")
        .attr("width", 0)
        .attr("height", width > 767 ? 20 : 10)
        .attr("x", 100)
        .attr("y", 10)
        .style("fill", color)
        .transition()
        .duration(500)
        .attr("x", function(d) {
            return d > 0 ? 100 : 100 - wScale(-d);
        })
        .attr("width", function(d) {
            return d > 0 ? wScale(d) : wScale(-d);
        });
    detailsBars.append("text")
        .text(function(d) {
            return (d > 0 ? "" : "Rep ") +
                fmt(d > 0 ? d : -d) +
                (d > 0 ? " Dem" : "");
        })
        .attr("dx", function(d) {
            return d > 0 ? 5 : -5;
        })
        .attr("dy", 24)
        .attr("x", 100)
        .style("text-anchor", function(d) {
            return d > 0 ? "start" : "end";
        })
        .transition()
        .duration(500)
        .attr("x", function(d) {
            return d > 0 ? 100 + wScale(d) : 100 - wScale(-d);
        });



    // The legend
    svg.append("g")
        .attr("class", "legend")
        .attr("transform",
            width > 767 ?
            "translate(" + (width - margin.right - 150) + ",100)" :
            "translate(" + (width / 2 - 100) + "," + (height - 120) + ")"
        );

    var legendLinear = d3.legendColor()
        // .shapeWidth(30)
        .cells(7)
        .orient(width > 767 ? "vertical" : "horizontal")
        .title("Difference")
        .labels([
            " 100.00% Dem",
            "  66.67%",
            "  33.33%",
            "   0.00%",
            "  33.33%",
            "  66.67%",
            " 100.00% Rep",
        ].reverse())
        .labelFormat(fmt)
        .ascending(true)
        .labelAlign("end")
        .scale(color);

    svg.select(".legend")
        .call(legendLinear);

    // When clicked, zoom in
    function clicked(d) {
        updateDetails(d);
        var x, y, k;

        // Compute centroid of the selected path
        if (d && centered !== d) {
            // if (d) {
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];
            // k = zoom.scaleExtent()[1];
            k = 10;
            centered = d;
        }
        else {
            x = width / 2;
            y = height / 2;
            k = 1;
            centered = null;
        }



        // Manually Zoom
        svg.transition()
            .duration(750)
            .call(zoom.transform, d3.zoomIdentity
                .translate(width / 2, height / 2)
                .scale(k)
                .translate(-x, -y));
    }

    function updateDetails(d) {

        var data = [0.4978, -0.5021],
            name = "Difference " + fmt(data[0] + data[1]),
            state,
            county,
            city;

        if (d) {
            city = dictCities[d.id];
            if (city) {
                county = city['county_name'];
                state = city['state_abbr'];
                data = [city["per_dem"], -city["per_gop"]];
                name = county + ', ' + state + " Difference: " + fmt(data[0] + data[1]);
            }
        }
        // console.log(data);
        // console.log(name);
        var detailsBars = details_layer
            .selectAll(".bar")
            .data(data);

        detailsBars.select("rect")
            .transition()
            .duration(500)
            .attr("x", function(d) {
                return d > 0 ? 100 : 100 - wScale(-d);
            })
            .attr("width", function(d) {
                return d > 0 ? wScale(d) : wScale(-d);
            })
            .style("fill", color);

        detailsBars.select("text")
            .text(function(d) {
                return (d > 0 ? "" : "Rep ") +
                    fmt(d > 0 ? d : -d) +
                    (d > 0 ? " Dem" : "")
            })
            .transition()
            .duration(500)
            .attr("x", function(d) {
                return d > 0 ? 100 + wScale(d) : 100 - wScale(-d);
            })


        details_layer.select("#cityLegend").text(name);

    }
 }



 d3.queue()
    .defer(d3.json, "us.json")
    .defer(d3.csv, "US presidential election results by county.csv")
    .await(ready);
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/update.sh b/update.sh
 rsync -avz --partial --exclude=".git/" -e "ssh -i /Users/aguerra/Dropbox/dutoVizNew.pem" * ubuntu@johnguerra.co:/var/www/USElections2012
diff --git a/US presidential election results by county.csv b/US presidential election results by county.csv
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>US 2012 elections by zipcode</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


	<style>
	.tract {
	stroke: #777;
	stroke-width: 0.05px;
	pointer-events: all;
	}
	.tract:hover {
	stroke: orange;
	pointer-events: all;

	}
	.tract-border {
	fill: none;
	/stroke: #777;/
	stroke-width: 0.05px;
	pointer-events: none;
	}
	@media (max-width: 767px) {
	.label {
	transform: rotate(-45deg) translate(-10px, 25px);
	}
	}
	.tract-border-state {
	fill: none;
	stroke: #333;
	stroke-width: 0.5px;
	pointer-events: none;
	}
	.legend {
	font-family: sans-serif;
	font-size: 10pt;

	}
	.legendTitle {
	font-weight: bold;
	font-size:11pt;
	}
	.background {
	fill:#f5f5f5;
	}
	body {
	background: #f5f5f5;
	/font-family: sans-serif;/
	}
	.bar {
	font-family: sans-serif;
	font-size: 8pt;
	}
	#cityLegend {
	font-family: sans-serif;
	text-anchor: middle;
	}
	#details .background {
	fill: #f5f5f5;
	fill-opacity: 0.7;
	}
	svg {
	width:100%;
	}
	</style>
	</head>

	<body>

	<div class="row">
	<div class="col-md-1 col-xs-1"></div>
	<div class="col-md-10 col-xs-10">
	<h4>Click on the map to explore</h4>
	</div>
	</div>
	<svg ></svg>
	</div>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.11.0/d3-legend.min.js"></script>

	<!-- Bootstrap -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<script src="main.js"></script>

	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-45612277-1', 'auto');
	ga('send', 'pageview');

	</script>
	</body>
	var svg = d3.select("svg"),
	width = 900,
	height = 400,
	margin = {
	top: 20,
	bottom: width > 767 ? 20 : 100,
	right: 20,
	left: 0
	},
	centered,
	fmt = d3.format(" >5.2%"),
	errorCount = 0;

	svg.attr("width", width)
	.attr("height", height);

	function ready(error, us, data) {
	if (error) throw error;


	var dictCities = {};
	data.forEach(function(d) {
	//Parse the percentages
	d["per_gop"] = +(d["per_gop"].slice(0, -1).replace(",", "."));
	d["per_dem"] = +(d["per_dem"].slice(0, -1).replace(",", "."));
	d.result = d["per_dem"] - d["per_gop"];
	d.combined_fips = +d.combined_fips;
	dictCities[d.combined_fips] = d;
	});

	var color = d3.scaleSequential(d3.interpolateRdBu)
	.domain([-1, 1]);

	// Add background
	svg.append("rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height)
	// .on("click", clicked);
	// To allow the zoom back
	// svg.on("click", clicked);
	var zoom = d3.zoom()
	.scaleExtent([1, 15])
	.on("zoom", zoomed);

	svg.style("pointer-events", "all")
	.call(zoom);
	var g = svg.append("g");

	function zoomed() {
	console.log(d3.event.transform);
	g.attr("transform", d3.event.transform);
	};

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

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

	g.selectAll("path")
	.data(topojson.feature(us, us.objects.counties).features)
	.enter().append("path")
	.attr("class", "tract")
	.on("click", clicked)
	.on("mouseover", updateDetails)
	.style("fill", function(d) {
	var city = dictCities[d.id];
	if (city)
	return color(city.result);
	else {
	errorCount++;
	console.log(d.id + " Not found" + " errors = " + errorCount);
	return color(0);
	}
	})
	.attr("d", path)
	.append("title")
	.text(function(d) {
	var city = dictCities[d.id],
	county,
	state;

	// var msg = d.id;
	if (city) {
	county = city.county_name;
	state = city.state_abbr;
	var msg = county + ', ' + state + " Difference: " + fmt(city.result);
	}
	return msg;
	});


	// g.append("g")
	// .attr("class", "counties")
	// .selectAll("path")
	// .data(topojson.feature(us, us.objects.counties).features)
	// .enter().append("path")
	// .attr("class", "tract-border")
	// .attr("d", path);

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


	// g.append("path")
	// .datum(topojson.mesh(mapData, mapData.objects.depts, function(a, b) { return a !== b; }))
	// .attr("class", "tract-border-state")
	// .attr("d", pathState);

	// The details
	var wScale = d3.scaleLinear()
	.domain([-1, 1])
	.range([-width / 3, width / 3]);
	var details_layer = svg.append("g")
	.attr("id", "details")
	.attr("transform", "translate(" + (width / 2 - 100) + ", 30)");
	details_layer.append("rect")
	.attr("class", "background")
	.attr("transform", "translate(" + (-wScale.range()[1] + 100) + ", -20)")
	.attr("width", wScale.range()[1] * 2 + 70)
	.attr("rx", 5)
	.attr("ry", 5)
	.attr("height", 60);
	details_layer.append("text")
	.attr("id", "cityLegend")
	.text("Difference")
	.attr("transform", "translate(100, 0)");

	var detailsBars = details_layer.selectAll("bar")
	.data([0.4978, -0.5021])
	.enter()
	.append("g")
	.attr("class", "bar");
	detailsBars
	.append("rect")
	.attr("width", 0)
	.attr("height", width > 767 ? 20 : 10)
	.attr("x", 100)
	.attr("y", 10)
	.style("fill", color)
	.transition()
	.duration(500)
	.attr("x", function(d) {
	return d > 0 ? 100 : 100 - wScale(-d);
	})
	.attr("width", function(d) {
	return d > 0 ? wScale(d) : wScale(-d);
	});
	detailsBars.append("text")
	.text(function(d) {
	return (d > 0 ? "" : "Rep ") +
	fmt(d > 0 ? d : -d) +
	(d > 0 ? " Dem" : "");
	})
	.attr("dx", function(d) {
	return d > 0 ? 5 : -5;
	})
	.attr("dy", 24)
	.attr("x", 100)
	.style("text-anchor", function(d) {
	return d > 0 ? "start" : "end";
	})
	.transition()
	.duration(500)
	.attr("x", function(d) {
	return d > 0 ? 100 + wScale(d) : 100 - wScale(-d);
	});



	// The legend
	svg.append("g")
	.attr("class", "legend")
	.attr("transform",
	width > 767 ?
	"translate(" + (width - margin.right - 150) + ",100)" :
	"translate(" + (width / 2 - 100) + "," + (height - 120) + ")"
	);

	var legendLinear = d3.legendColor()
	// .shapeWidth(30)
	.cells(7)
	.orient(width > 767 ? "vertical" : "horizontal")
	.title("Difference")
	.labels([
	" 100.00% Dem",
	" 66.67%",
	" 33.33%",
	" 0.00%",
	" 33.33%",
	" 66.67%",
	" 100.00% Rep",
	].reverse())
	.labelFormat(fmt)
	.ascending(true)
	.labelAlign("end")
	.scale(color);

	svg.select(".legend")
	.call(legendLinear);

	// When clicked, zoom in
	function clicked(d) {
	updateDetails(d);
	var x, y, k;

	// Compute centroid of the selected path
	if (d && centered !== d) {
	// if (d) {
	var centroid = path.centroid(d);
	x = centroid[0];
	y = centroid[1];
	// k = zoom.scaleExtent()[1];
	k = 10;
	centered = d;
	}
	else {
	x = width / 2;
	y = height / 2;
	k = 1;
	centered = null;
	}



	// Manually Zoom
	svg.transition()
	.duration(750)
	.call(zoom.transform, d3.zoomIdentity
	.translate(width / 2, height / 2)
	.scale(k)
	.translate(-x, -y));
	}

	function updateDetails(d) {

	var data = [0.4978, -0.5021],
	name = "Difference " + fmt(data[0] + data[1]),
	state,
	county,
	city;

	if (d) {
	city = dictCities[d.id];
	if (city) {
	county = city['county_name'];
	state = city['state_abbr'];
	data = [city["per_dem"], -city["per_gop"]];
	name = county + ', ' + state + " Difference: " + fmt(data[0] + data[1]);
	}
	}
	// console.log(data);
	// console.log(name);
	var detailsBars = details_layer
	.selectAll(".bar")
	.data(data);

	detailsBars.select("rect")
	.transition()
	.duration(500)
	.attr("x", function(d) {
	return d > 0 ? 100 : 100 - wScale(-d);
	})
	.attr("width", function(d) {
	return d > 0 ? wScale(d) : wScale(-d);
	})
	.style("fill", color);

	detailsBars.select("text")
	.text(function(d) {
	return (d > 0 ? "" : "Rep ") +
	fmt(d > 0 ? d : -d) +
	(d > 0 ? " Dem" : "")
	})
	.transition()
	.duration(500)
	.attr("x", function(d) {
	return d > 0 ? 100 + wScale(d) : 100 - wScale(-d);
	})


	details_layer.select("#cityLegend").text(name);

	}
	}



	d3.queue()
	.defer(d3.json, "us.json")
	.defer(d3.csv, "US presidential election results by county.csv")
	.await(ready);