/
index.js
105 lines (86 loc) · 2.28 KB
/
index.js
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
///<reference path="./typings/main.d.ts"/>
var json = require("json!./data/offers.json").Collection;
var properties = require("json!./data/properties.json").Collection;
var d3 = require('d3');
var grouped = false;
const draw = (json) => {
render(json);
}
const render = (json) => {
var width = 960,
height = 600;
d3.select("#host").selectAll("*").remove();
var fill = d3.scale.category10();
var nodes = json.map(function (d, i) {
var status;
if (d.OfferStatus) {
status = d.OfferStatus.SystemName
} else {
status = d.RoleStatus.SystemName;
}
return {
index: i,
status: status,
prop: d
};
});
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.on("tick", tick)
.start();
var svg = d3.select("#host").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", function (d, i) {
return d.prop.AskingPrice.PriceValue / 100000 + 6;
})
.style("fill", function (d, i) {
switch (d.status) {
case "Valued":
return "#f2bd72";
case "InstructionToSell":
return "#33cc99"
case "OfferAccepted":
return "#da2c01"
default:
return "#385595";
}
})
.style("stroke", function (d, i) { return d3.rgb(fill(i & 3)).darker(2); })
.call(force.drag)
.on("mousedown", function () { d3.event.stopPropagation(); });
svg.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
function tick(e) {
if (grouped) {
var k = 6 * e.alpha;
nodes.forEach(function (o, i) {
o.y += o.status === "Valued" ? k : -k;
o.x += o.status === "InstructionToSell" ? k : -k;
o.x += o.status === "OfferAccepted" ? k : -k;
});
}
node.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
}
}
d3.select("#separate")
.on("click", () => {
grouped = true;
draw(properties);
})
d3.select("#group")
.on("click", () => {
grouped = false;
draw(properties);
})
draw(properties);