The Choropleth Map

The choropleth map shows the US unemployment rates by county with a given color scale. The VisDock toolkit has been integrated into the choropleth map example built with D3.js (found here) by M. Bostock. Using selection tools, users can query path elements that represent the counties in the US.

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

.counties {
  fill: none;
}

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

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

</style>
<body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script>
<script>

var width = 960,
    height = 500;

VisDock.init("body", {width: 960, height: 700});
var viewport = VisDock.getViewport();

var rateById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var path = d3.geo.path();

var svg = viewport;

queue()
    .defer(d3.json, "/VisDockHub/raw/8971488/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, us) {
  VisDock.startChrome();
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.id)); })
      .attr("d", path);

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

VisDock.eventHandler = {
		getHitsPolygon : function(points, inclusive) {
			var shapebound = new createPolygon(points);
			return shapebound.intersectPath(d3.selectAll(".counties").selectAll("path")[0], inclusive)
		},
		getHitsLine : function(points, inclusive) {
			var shapebound = new createLine(points);
			return shapebound.intersectPath(d3.selectAll(".counties").selectAll("path")[0], inclusive)
			},
		getHitsEllipse : function(points, inclusive) {
			var shapebound = new createEllipse(points);
			return shapebound.intersectPath(d3.selectAll(".counties").selectAll("path")[0], inclusive)
		},
		setColor : function(hits) {
			QueryManager.layers[num - 1] = [];
			for (var i = 0; i < hits.length; i++) {
				var str = hits[i].getAttributeNS(null, "d")
				QueryManager.layers[num - 1][i] = d3.selectAll(".counties").append("path").attr("d", str)
					.attr("style", "fill: " + VisDock.color[num - 1] + "; opacity: 0.5; pointer-events: none");
			}

},
		changeColor : function(color, query, index) {
			for (var i = 0; i < query.length; i++) {
				var vis = query[i].attr("style").split("opacity:")[1].split(";")[0];
				query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis)
			}
		},
		changeVisibility : function(vis, query, index) {
			for (var i = 0; i < query.length; i++) {
				var color = query[i].attr("style").split("fill:")[1].split(";")[0];
				query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis)
			}
		},
		removeColor : function(hits, index) {
			for (var i = 0; i < hits.length; i++) {
				hits[i].remove();
			}
		},
		QueryClick : function(query, index) {
		}
	}
BirdView.init(viewport, 960, 700)
d3.select(self.frameElement).style("width", "960px")
d3.select(self.frameElement).style("height", "700px")
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js