Skip to content

Commit 32c0620

Browse files
mbostockmbostock
committed
Merge branch 'master' of github.com:mbostock/d3
2 parents 6b8839e + 07fe0f5 commit 32c0620

11 files changed

Lines changed: 155 additions & 161 deletions

File tree

‎examples/cartogram/cartogram.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#chart {
2+
width: 960px;
3+
height: 500px;
4+
}
5+
6+
.black path {
7+
fill: none;
8+
stroke: #ccc;
9+
stroke-width: 3px;
10+
}
11+
12+
.white path {
13+
fill: #fff;
14+
stroke: #fff;
15+
}
16+
17+
.grey path {
18+
fill: #ccc;
19+
stroke: #666;
20+
}

‎examples/cartogram/cartogram.html‎

Lines changed: 4 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,14 @@
22
<html>
33
<head>
44
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5+
<title>Non-Contiguous Cartogram</title>
56
<script type="text/javascript" src="../../d3.js"></script>
67
<script type="text/javascript" src="../../d3.geo.js"></script>
78
<script type="text/javascript" src="../../d3.geom.js"></script>
8-
<style type="text/css">
9-
10-
svg {
11-
width: 960px;
12-
height: 500px;
13-
}
14-
15-
.black path {
16-
fill: none;
17-
stroke: #ccc;
18-
stroke-width: 3px;
19-
}
20-
21-
.white path {
22-
fill: #fff;
23-
stroke: #fff;
24-
}
25-
26-
.grey path {
27-
fill: #ccc;
28-
stroke: #666;
29-
}
30-
31-
</style>
9+
<link type="text/css" rel="stylesheet" href="cartogram.css"/>
3210
</head>
3311
<body>
34-
<script type="text/javascript">
35-
36-
var data; // loaded asynchronously
37-
38-
var svg = d3.select("body")
39-
.append("svg:svg");
40-
41-
d3.json("../../data/us-states.json", function(json) {
42-
var path = d3.geo.path();
43-
44-
// Synthesize a random data variable to visualize…
45-
// Note: This has a baked-in sqrt transform!
46-
json.features.forEach(function(f) {
47-
f.properties.value = Math.sqrt(.2 + .8 * Math.random());
48-
});
49-
50-
// A thick black stroke for the exterior.
51-
svg.append("svg:g")
52-
.attr("class", "black")
53-
.selectAll("path")
54-
.data(json.features)
55-
.enter().append("svg:path")
56-
.attr("d", path);
57-
58-
// A white overlay to hide interior black strokes.
59-
svg.append("svg:g")
60-
.attr("class", "white")
61-
.selectAll("path")
62-
.data(json.features)
63-
.enter().append("svg:path")
64-
.attr("d", path);
65-
66-
// The polygons, scaled!
67-
svg.append("svg:g")
68-
.attr("class", "grey")
69-
.selectAll("path")
70-
.data(json.features)
71-
.enter().append("svg:path")
72-
.attr("transform", function(d) {
73-
var centroid = path.centroid(d),
74-
x = centroid[0],
75-
y = centroid[1];
76-
return "translate(" + x + "," + y + ")"
77-
+ "scale(" + d.properties.value + ")"
78-
+ "translate(" + -x + "," + -y + ")";
79-
})
80-
.attr("stroke-width", function(d) { return 1 / d.properties.value; })
81-
.attr("d", path);
82-
83-
});
84-
85-
</script>
12+
<div id="chart"></div>
13+
<script type="text/javascript" src="cartogram.js"></script>
8614
</body>
8715
</html>

‎examples/cartogram/cartogram.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var data; // loaded asynchronously
2+
3+
var svg = d3.select("#chart")
4+
.append("svg:svg");
5+
6+
d3.json("us-states.json", function(json) {
7+
var path = d3.geo.path();
8+
9+
// Synthesize a random data variable to visualize…
10+
// Note: This has a baked-in sqrt transform!
11+
json.features.forEach(function(f) {
12+
f.properties.value = Math.sqrt(.2 + .8 * Math.random());
13+
});
14+
15+
// A thick black stroke for the exterior.
16+
svg.append("svg:g")
17+
.attr("class", "black")
18+
.selectAll("path")
19+
.data(json.features)
20+
.enter().append("svg:path")
21+
.attr("d", path);
22+
23+
// A white overlay to hide interior black strokes.
24+
svg.append("svg:g")
25+
.attr("class", "white")
26+
.selectAll("path")
27+
.data(json.features)
28+
.enter().append("svg:path")
29+
.attr("d", path);
30+
31+
// The polygons, scaled!
32+
svg.append("svg:g")
33+
.attr("class", "grey")
34+
.selectAll("path")
35+
.data(json.features)
36+
.enter().append("svg:path")
37+
.attr("transform", function(d) {
38+
var centroid = path.centroid(d),
39+
x = centroid[0],
40+
y = centroid[1];
41+
return "translate(" + x + "," + y + ")"
42+
+ "scale(" + d.properties.value + ")"
43+
+ "translate(" + -x + "," + -y + ")";
44+
})
45+
.attr("stroke-width", function(d) { return 1 / d.properties.value; })
46+
.attr("d", path);
47+
48+
});

‎examples/cartogram/us-states.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../data/us-states.json

‎examples/force/cluster.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
var m = d3.svg.mouse(vis[0][0]);
179179
active.x = m[0];
180180
active.y = m[1];
181+
force.resume(); // restart annealing
181182
});
182183

183184
return false;
@@ -221,8 +222,7 @@
221222
.nodes(net.nodes)
222223
.links(net.links)
223224
.size({x: w, y: h})
224-
.nodeDistance(100)
225-
.linkDistance(60)
225+
.distance(60)
226226
.start();
227227

228228
hullg.selectAll("path.hull").remove();

‎examples/force/force.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
circle.node {
2-
fill: lightsteelblue;
3-
stroke: steelblue;
2+
stroke: #fff;
43
stroke-width: 1.5px;
54
}
65

76
line.link {
8-
stroke: #333;
7+
stroke: #999;
8+
stroke-opacity: .6;
99
}

‎examples/force/force.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var w = 960,
2-
h = 500;
2+
h = 500,
3+
fill = d3.scale.category20();
34

45
var vis = d3.select("#chart")
56
.append("svg:svg")
@@ -28,7 +29,8 @@ d3.json("miserables.json", function(json) {
2829
.attr("class", "node")
2930
.attr("cx", function(d) { return d.x; })
3031
.attr("cy", function(d) { return d.y; })
31-
.attr("r", 4.5);
32+
.attr("r", 5)
33+
.style("fill", function(d) { return fill(d.group); });
3234

3335
vis.attr("opacity", 0)
3436
.transition()

0 commit comments

Comments
 (0)