california-counties/index.html at master · scottpham/california-counties · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
	<title></title>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<style>

.subunit.San.Francisco,
.subunit.mateo,
.subunit.alameda,
.subunit.santa.clara {
	fill: maroon;
	stroke: white;
	stroke-linejoin: round;
}

.subunit {
	fill: steelblue;
	stroke: white;
	stroke-width: 1px;
}

.subunit:hover {
	opacity: 0.7;
	fill: lightyellow;

}

.exterior-boundary {
	fill: none;
	stroke: black;
	stroke-linejoin: round;
	stroke-width: 2px;
}

div.tooltip {
	position: absolute;
	text-align: center;
	width: 75px;
	padding: 2px;
	font: 12px sans-serif;
	color: white;
	background: black;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
}

</style>

</head>
<body>
	<h1>California TopoJSON with D3</h1>
	<div id = "map"></div>

<script>

	var width = 650,
		height = 600;

	var  projection = d3.geo.mercator()
			.scale(1000 * 2)
			.center([-120, 36])
			.translate([width/2, height/2]);

	//var projection = d3.geo.albersUsa() //works but tried another method above
	//	.scale(2500)
	//	.translate([1000, 360]);

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

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

	d3.json("caCountiesTopoSimple.json", function(error, ca){
		//console.log(ca.objects.caCounties); //for navigating the data in the console

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

		//bind feature data to the map
		svg.selectAll(".subunit")
			  .data(topojson.feature(ca, ca.objects.subunits).features)
			.enter().append("path")
			.attr("class", function(d) { return "subunit " + d.properties.name; })
			.attr("d", path)
			.on("mouseover", function(d){ //tooltip
				div.transition()
					.duration(200)
					.style("opacity", .9);
				div.html(d.properties.fullName)
					.style("left", (d3.event.pageX) + 10 + "px")
					.style("top", (d3.event.pageY - 30) + "px");
			})
			.on("mouseout", function(d) {
				div.transition()
					.duration(500)
					.style("opacity", 0.0);
			});

		//exterior border
		svg.append("path")
			.datum(topojson.mesh(ca, ca.objects.subunits, function(a, b) { return a === b;}))
			.attr("d", path)
			.attr("class", "exterior-boundary");

		//tooltop declaration
		var div = d3.select("#map").append("div")
			.attr("class", "tooltip")
			.style("opacity", 0);
	});

	//36.980106, -119.317593
</script>

</body>
</html>