-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (77 loc) · 2.05 KB
/
index.html
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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
fill: #fff;
}
.border {
fill: none;
stroke: #e4e5e5;
stroke-linejoin: round;
stroke-linecap: round;
}
.bubble{
fill: steelblue;
stroke: #e4e5e5;
fill-opacity: 0.5;
stroke-width: 0.5px;
}
</style>
<!--<style>
path {
fill: none;
stroke: #000;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>-->
<body>
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<!-- <script src="http://d3js.org/topojson.v1.min.js"></script> -->
<script src="/srcs/d3/d3.min.js"></script>
<script src="/srcs/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 600,
extraForLegend = 250;
var path = d3.geo.path()
.projection(null);
var svg = d3.select("body").append("svg")
.attr("width", width + extraForLegend)
.attr("height", height);
var backgroundRect = svg.append('rect')
.attr('width', width + extraForLegend)
.attr('height', height)
.style('fill', '#e4e5e5');
var toolTipGroup = svg.append('g')
.append('rect')
.attr('width', 15)
.attr('height', 15)
// d3.json("build/counties.json", function(error, us) {
// if (error) return console.error(error);
// svg.append("path")
// .datum(topojson.mesh(us))
// .attr("d", path);
// });
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);
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)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("r", function(d) { return radius(d.properties.population); });
});
</script>