Skip to content

Commit 5ec9360

Browse files
eosforeosfor
committed
updated DSM vega visual
1 parent a41f7fb commit 5ec9360

1 file changed

Lines changed: 228 additions & 82 deletions

File tree

‎PSGraph.Vega.Extensions/Assets/vega.dsm.matrix.json‎

Lines changed: 228 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,7 @@
11
{
2-
"$schema": "https://vega.github.io/schema/vega/v6.json",
3-
"description": "A re-orderable DSM matrix.",
4-
"width": 1000,
5-
"height": 1000,
6-
"padding": 2,
7-
"signals": [
8-
{"name": "cellSize", "value": 10},
9-
{"name": "count", "update": "length(data('nodes'))"},
10-
{"name": "width", "update": "span(range('position'))"},
11-
{"name": "height", "update": "width"},
12-
{
13-
"name": "src",
14-
"value": {},
15-
"on": [
16-
{"events": "text:pointerdown", "update": "datum"},
17-
{"events": "window:pointerup", "update": "{}"}
18-
]
19-
},
20-
{
21-
"name": "dest",
22-
"value": -1,
23-
"on": [
24-
{
25-
"events": "[@columns:pointerdown, window:pointerup] > window:pointermove",
26-
"update": "src.name && datum !== src ? (0.5 + count * clamp(x(), 0, width) / width) : dest"
27-
},
28-
{
29-
"events": "[@rows:pointerdown, window:pointerup] > window:pointermove",
30-
"update": "src.name && datum !== src ? (0.5 + count * clamp(y(), 0, height) / height) : dest"
31-
},
32-
{"events": "window:pointerup", "update": "-1"}
33-
]
34-
}
35-
],
362
"data": [
373
{
384
"name": "nodes",
39-
"values": [],
405
"transform": [
416
{"type": "formula", "as": "order", "expr": "datum.group"},
427
{
@@ -46,101 +11,282 @@
4611
},
4712
{
4813
"type": "window",
14+
"as": ["order"],
4915
"sort": {"field": "score"},
50-
"ops": ["row_number"],
51-
"as": ["order"]
16+
"ops": ["row_number"]
5217
}
53-
]
18+
],
19+
"values": []
5420
},
5521
{
5622
"name": "edges",
57-
"values": [],
5823
"transform": [
5924
{
25+
"fields": ["source", "target"],
6026
"type": "lookup",
61-
"from": "nodes",
27+
"as": ["sourceNode", "targetNode"],
6228
"key": "index",
63-
"fields": ["source", "target"],
64-
"as": ["sourceNode", "targetNode"]
29+
"from": "nodes"
6530
},
6631
{
6732
"type": "formula",
6833
"as": "group",
6934
"expr": "datum.sourceNode.group === datum.targetNode.group ? datum.sourceNode.group : count"
7035
}
71-
]
36+
],
37+
"values": []
7238
},
73-
{"name": "cross", "source": "nodes", "transform": [{"type": "cross"}]}
74-
],
75-
"scales": [
7639
{
77-
"name": "position",
78-
"type": "band",
79-
"domain": {"data": "nodes", "field": "order", "sort": true},
80-
"range": {"step": {"signal": "cellSize"}}
40+
"name": "edgeMap",
41+
"values": []
8142
},
43+
{"name": "cross", "transform": [{"type": "cross"}], "source": "nodes"},
8244
{
83-
"name": "color",
84-
"type": "ordinal",
85-
"range": "category",
86-
"domain": {
87-
"fields": [{"data": "nodes", "field": "group"}, {"signal": "count"}],
88-
"sort": true
89-
}
45+
"name": "selectedLinks",
46+
"transform": [
47+
{
48+
"type": "filter",
49+
"expr": "src && src.index != null && datum.source === src.index"
50+
},
51+
{
52+
"fields": ["targetNode.name", "targetNode.index"],
53+
"type": "project",
54+
"as": ["names", "id"]
55+
}
56+
],
57+
"source": "edges"
58+
},
59+
{
60+
"name": "selectedCols",
61+
"transform": [
62+
{
63+
"type": "filter",
64+
"expr": "columnClick && columnClick.index != null && datum.target === columnClick.index"
65+
},
66+
{
67+
"fields": ["sourceNode.name", "sourceNode.index"],
68+
"type": "project",
69+
"as": ["names", "id"]
70+
}
71+
],
72+
"source": "edges"
9073
}
9174
],
9275
"marks": [
9376
{
94-
"type": "rect",
9577
"from": {"data": "edges"},
78+
"type": "rect",
9679
"encode": {
9780
"update": {
81+
"fill": [
82+
{
83+
"test": "src && src.index != null && datum.sourceNode.order === src.order",
84+
"value": "orange"
85+
},
86+
{
87+
"test": "columnClick && columnClick.index != null && datum.targetNode.order === columnClick.order",
88+
"value": "orange"
89+
},
90+
{"scale": "color", "field": "group"}
91+
],
92+
"height": {"band": 1, "offset": -1, "scale": "position"},
93+
"width": {"band": 1, "offset": -1, "scale": "position"},
9894
"x": {"scale": "position", "field": "targetNode.order"},
99-
"y": {"scale": "position", "field": "sourceNode.order"},
100-
"width": {"scale": "position", "band": 1, "offset": -1},
101-
"height": {"scale": "position", "band": 1, "offset": -1},
102-
"fill": {"scale": "color", "field": "group"}
95+
"y": {"scale": "position", "field": "sourceNode.order"}
10396
}
104-
}
97+
},
98+
"zindex": 10
99+
},
100+
{
101+
"from": {"data": "nodes"},
102+
"type": "rect",
103+
"encode": {
104+
"update": {
105+
"fill": [
106+
{
107+
"test": "columnClick && columnClick.index != null && datum.index === columnClick.index",
108+
"value": "lightsteelblue"
109+
}
110+
],
111+
"fillOpacity": {"value": 0.3},
112+
"width": {"band": 1, "scale": "position"},
113+
"height": {"signal": "width"},
114+
"y": {"value": 0},
115+
"x": {"scale": "position", "field": "order"}
116+
}
117+
},
118+
"name": "colHighlightOnColumnClick"
105119
},
106120
{
107-
"type": "text",
108-
"name": "columns",
109121
"from": {"data": "nodes"},
122+
"type": "rect",
123+
"encode": {
124+
"update": {
125+
"fill": [
126+
{
127+
"test": "src && src.index != null && datum.index === src.index",
128+
"value": "lightsteelblue"
129+
}
130+
],
131+
"fillOpacity": {"value": 0.3},
132+
"height": {"band": 1, "scale": "position"},
133+
"width": {"signal": "width"},
134+
"x": {"value": 0},
135+
"y": {"scale": "position", "field": "order"}
136+
}
137+
},
138+
"name": "rowHighlight"
139+
},
140+
{
141+
"from": {"data": "nodes"},
142+
"type": "rect",
143+
"encode": {
144+
"update": {
145+
"fill": [
146+
{
147+
"test": "src && indata('selectedLinks', 'id', datum.index)",
148+
"value": "lightsteelblue"
149+
}
150+
],
151+
"fillOpacity": {"value": 0.3},
152+
"height": {"signal": "height"},
153+
"width": {"band": 1, "scale": "position"},
154+
"x": {"scale": "position", "field": "order"},
155+
"y": {"value": 0}
156+
}
157+
},
158+
"name": "colHighlight"
159+
},
160+
{
161+
"from": {"data": "nodes"},
162+
"type": "rect",
163+
"encode": {
164+
"update": {
165+
"fill": [
166+
{
167+
"test": "columnClick && indata('selectedCols', 'id', datum.index)",
168+
"value": "lightsteelblue"
169+
}
170+
],
171+
"fillOpacity": {"value": 0.3},
172+
"width": {"signal": "height"},
173+
"height": {"band": 1, "scale": "position"},
174+
"y": {"scale": "position", "field": "order"},
175+
"x": {"value": 0}
176+
}
177+
},
178+
"name": "rowHighlightOnColumnClick"
179+
},
180+
{
181+
"from": {"data": "nodes"},
182+
"type": "text",
110183
"encode": {
111184
"update": {
112-
"x": {"scale": "position", "field": "order", "band": 0.5},
113-
"y": {"offset": -2},
114-
"text": {"field": "name"},
115-
"fontSize": {"value": 10},
116-
"angle": {"value": -90},
117185
"align": {"value": "left"},
186+
"angle": {"value": -90},
118187
"baseline": {"value": "middle"},
119188
"fill": [
120-
{"test": "datum === src", "value": "steelblue"},
189+
{
190+
"test": "src && indata('selectedLinks', 'names', datum.name)",
191+
"value": "orange"
192+
},
121193
{"value": "black"}
122-
]
194+
],
195+
"fontSize": {"value": 10},
196+
"text": {"field": "name"},
197+
"x": {"band": 0.5, "scale": "position", "field": "order"},
198+
"y": {"offset": -2}
123199
}
124-
}
200+
},
201+
"name": "columns"
125202
},
126203
{
127-
"type": "text",
128-
"name": "rows",
129204
"from": {"data": "nodes"},
205+
"type": "text",
130206
"encode": {
131207
"update": {
132-
"x": {"offset": -2},
133-
"y": {"scale": "position", "field": "order", "band": 0.5},
134-
"text": {"field": "name"},
135-
"fontSize": {"value": 10},
136208
"align": {"value": "right"},
137209
"baseline": {"value": "middle"},
138210
"fill": [
139211
{"test": "datum === src", "value": "steelblue"},
212+
{
213+
"test": "columnClick && indata('selectedCols', 'names', datum.name)",
214+
"value": "orange"
215+
},
140216
{"value": "black"}
141-
]
217+
],
218+
"fontSize": {"value": 10},
219+
"text": {"field": "name"},
220+
"x": {"offset": -2},
221+
"y": {"band": 0.5, "scale": "position", "field": "order"}
142222
}
143-
}
223+
},
224+
"name": "rows"
225+
}
226+
],
227+
"scales": [
228+
{
229+
"domain": {"data": "nodes", "field": "order", "sort": true},
230+
"name": "position",
231+
"type": "band",
232+
"range": {"step": {"signal": "cellSize"}}
233+
},
234+
{
235+
"domain": {
236+
"sort": true,
237+
"fields": [{"data": "nodes", "field": "group"}, {"signal": "count"}]
238+
},
239+
"name": "color",
240+
"type": "ordinal",
241+
"range": "category"
144242
}
145-
]
243+
],
244+
"signals": [
245+
{
246+
"name": "columnClick",
247+
"value": {},
248+
"on": [
249+
{
250+
"events": {"markname": "columns", "type": "pointerdown"},
251+
"update": "datum"
252+
},
253+
{"events": "window:pointerup", "update": "{}"}
254+
]
255+
},
256+
{
257+
"name": "src",
258+
"value": {},
259+
"on": [
260+
{
261+
"events": {"markname": "rows", "type": "pointerdown"},
262+
"update": "datum"
263+
},
264+
{"events": "window:pointerup", "update": "{}"}
265+
]
266+
},
267+
{"name": "cellSize", "value": 10},
268+
{"name": "count", "update": "length(data('nodes'))"},
269+
{"name": "width", "update": "span(range('position'))"},
270+
{"name": "height", "update": "width"},
271+
{
272+
"name": "dest",
273+
"on": [
274+
{
275+
"events": "[@columns:pointerdown, window:pointerup] > window:pointermove",
276+
"update": "src.name && datum !== src ? (0.5 + count * clamp(x(), 0, width) / width) : dest"
277+
},
278+
{
279+
"events": "[@rows:pointerdown, window:pointerup] > window:pointermove",
280+
"update": "src.name && datum !== src ? (0.5 + count * clamp(y(), 0, height) / height) : dest"
281+
},
282+
{"events": "window:pointerup", "update": "-1"}
283+
],
284+
"value": -1
285+
}
286+
],
287+
"$schema": "https://vega.github.io/schema/vega/v6.json",
288+
"description": "A re-orderable DSM matrix.",
289+
"height": 1000,
290+
"padding": 2,
291+
"width": 1000
146292
}

0 commit comments

Comments
 (0)