2011-02-12 06:42:52 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
2012-02-19 01:14:52 +04:00
|
|
|
<script type="text/javascript" src="../../d3.v2.js"></script>
|
2011-02-12 06:42:52 +03:00
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
background: #eee;
|
|
|
|
|
width: 960px;
|
|
|
|
|
height: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#counties path {
|
|
|
|
|
stroke: steelblue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var svg = d3.select("body")
|
2011-11-24 02:46:37 +04:00
|
|
|
.append("svg");
|
2011-02-12 06:42:52 +03:00
|
|
|
|
2011-11-24 02:46:37 +04:00
|
|
|
var counties = svg.append("g")
|
2011-02-12 06:42:52 +03:00
|
|
|
.attr("id", "counties");
|
|
|
|
|
|
|
|
|
|
var path = d3.geo.path();
|
|
|
|
|
|
2011-07-03 03:31:12 +04:00
|
|
|
d3.json("../data/us-counties.json", function(json) {
|
2011-02-12 06:42:52 +03:00
|
|
|
counties.selectAll("path")
|
|
|
|
|
.data(json.features)
|
2011-11-24 02:46:37 +04:00
|
|
|
.enter().append("path")
|
2011-02-12 06:42:52 +03:00
|
|
|
.attr("d", function(d) {
|
|
|
|
|
return path({
|
|
|
|
|
type: "LineString",
|
|
|
|
|
coordinates: d3.geo.bounds(d)
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
