Force Layout & Matrix Market Format

.block

license: gpl-3.0

README.md

The University of Florida Sparse Matrix Collection provides a vast collection of interesting graphs in Matrix Market format. This example shows how to adapt this format to D3's force layout.

can_161.mtx

%%MatrixMarket matrix coordinate pattern symmetric
%-------------------------------------------------------------------------------
% UF Sparse Matrix Collection, Tim Davis
% http://www.cise.ufl.edu/research/sparse/matrices/HB/can_161
% name: HB/can_161
% [SYMMETRIC PATTERN FROM CANNES,LUCIEN MARRO,JUNE 1981.]
% id: 94
% date: 1981
% author: L. Marro
% ed: I. Duff, R. Grimes, J. Lewis
% fields: title A name id date author ed kind
% kind: structural problem
%-------------------------------------------------------------------------------
161 161 769
1 1
2 1
16 1
17 1
18 1
32 1
65 1
66 1
80 1
2 2
3 2
17 2
18 2
19 2
65 2
66 2
67 2
3 3
4 3
18 3
19 3
20 3
66 3
67 3
68 3
4 4
5 4
19 4
20 4
21 4
67 4
68 4
69 4
5 5
6 5
20 5
21 5
22 5
68 5
69 5
70 5
6 6
7 6
21 6
22 6
23 6
69 6
70 6
71 6
7 7
8 7
22 7
23 7
24 7
70 7
71 7
72 7
8 8
9 8
23 8
24 8
25 8
71 8
72 8
73 8
9 9
10 9
24 9
25 9
26 9
72 9
73 9
74 9
10 10
11 10
25 10
26 10
27 10
73 10
74 10
75 10
11 11
12 11
26 11
27 11
28 11
74 11
75 11
76 11
12 12
13 12
27 12
28 12
29 12
75 12
76 12
77 12
13 13
14 13
28 13
29 13
30 13
76 13
77 13
78 13
14 14
15 14
29 14
30 14
31 14
77 14
78 14
79 14
15 15
16 15
30 15
31 15
32 15
78 15
79 15
80 15
16 16
17 16
31 16
32 16
65 16
79 16
80 16
17 17
18 17
32 17
33 17
34 17
48 17
18 18
19 18
33 18
34 18
35 18
19 19
20 19
34 19
35 19
36 19
20 20
21 20
35 20
36 20
37 20
21 21
22 21
36 21
37 21
38 21
22 22
23 22
37 22
38 22
39 22
23 23
24 23
38 23
39 23
40 23
24 24
25 24
39 24
40 24
41 24
25 25
26 25
40 25
41 25
42 25
26 26
27 26
41 26
42 26
43 26
27 27
28 27
42 27
43 27
44 27
28 28
29 28
43 28
44 28
45 28
29 29
30 29
44 29
45 29
46 29
30 30
31 30
45 30
46 30
47 30
31 31
32 31
46 31
47 31
48 31
32 32
33 32
47 32
48 32
33 33
34 33
48 33
49 33
50 33
64 33
34 34
35 34
49 34
50 34
51 34
35 35
36 35
50 35
51 35
52 35
36 36
37 36
51 36
52 36
53 36
37 37
38 37
52 37
53 37
54 37
38 38
39 38
53 38
54 38
55 38
39 39
40 39
54 39
55 39
56 39
40 40
41 40
55 40
56 40
57 40
41 41
42 41
56 41
57 41
58 41
42 42
43 42
57 42
58 42
59 42
43 43
44 43
58 43
59 43
60 43
44 44
45 44
59 44
60 44
61 44
45 45
46 45
60 45
61 45
62 45
46 46
47 46
61 46
62 46
63 46
47 47
48 47
62 47
63 47
64 47
48 48
49 48
63 48
64 48
49 49
50 49
64 49
50 50
51 50
51 51
52 51
52 52
53 52
53 53
54 53
54 54
55 54
55 55
56 55
56 56
57 56
57 57
58 57
58 58
59 58
59 59
60 59
60 60
61 60
61 61
62 61
62 62
63 62
63 63
64 63
64 64
65 65
66 65
80 65
81 65
82 65
96 65
66 66
67 66
81 66
82 66
83 66
67 67
68 67
82 67
83 67
84 67
68 68
69 68
83 68
84 68
85 68
69 69
70 69
84 69
85 69
86 69
70 70
71 70
85 70
86 70
87 70
71 71
72 71
86 71
87 71
88 71
72 72
73 72
87 72
88 72
89 72
73 73
74 73
88 73
89 73
90 73
74 74
75 74
89 74
90 74
91 74
75 75
76 75
90 75
91 75
92 75
76 76
77 76
91 76
92 76
93 76
77 77
78 77
92 77
93 77
94 77
78 78
79 78
93 78
94 78
95 78
79 79
80 79
94 79
95 79
96 79
80 80
81 80
95 80
96 80
81 81
82 81
96 81
97 81
98 81
112 81
82 82
83 82
97 82
98 82
99 82
83 83
84 83
98 83
99 83
100 83
84 84
85 84
99 84
100 84
101 84
85 85
86 85
100 85
101 85
102 85
86 86
87 86
101 86
102 86
103 86
87 87
88 87
102 87
103 87
104 87
88 88
89 88
103 88
104 88
105 88
89 89
90 89
104 89
105 89
106 89
90 90
91 90
105 90
106 90
107 90
91 91
92 91
106 91
107 91
108 91
92 92
93 92
107 92
108 92
109 92
93 93
94 93
108 93
109 93
110 93
94 94
95 94
109 94
110 94
111 94
95 95
96 95
110 95
111 95
112 95
96 96
97 96
111 96
112 96
97 97
98 97
112 97
113 97
114 97
128 97
98 98
99 98
113 98
114 98
115 98
99 99
100 99
114 99
115 99
116 99
100 100
101 100
115 100
116 100
117 100
101 101
102 101
116 101
117 101
118 101
102 102
103 102
117 102
118 102
119 102
103 103
104 103
118 103
119 103
120 103
104 104
105 104
119 104
120 104
121 104
105 105
106 105
120 105
121 105
122 105
106 106
107 106
121 106
122 106
123 106
107 107
108 107
122 107
123 107
124 107
108 108
109 108
123 108
124 108
125 108
109 109
110 109
124 109
125 109
126 109
110 110
111 110
125 110
126 110
127 110
111 111
112 111
126 111
127 111
128 111
112 112
113 112
127 112
128 112
113 113
114 113
128 113
129 113
130 113
144 113
114 114
115 114
129 114
130 114
131 114
115 115
116 115
130 115
131 115
132 115
116 116
117 116
131 116
132 116
133 116
117 117
118 117
132 117
133 117
134 117
118 118
119 118
133 118
134 118
135 118
119 119
120 119
134 119
135 119
136 119
120 120
121 120
135 120
136 120
137 120
121 121
122 121
136 121
137 121
138 121
122 122
123 122
137 122
138 122
139 122
123 123
124 123
138 123
139 123
140 123
124 124
125 124
139 124
140 124
141 124
125 125
126 125
140 125
141 125
142 125
126 126
127 126
141 126
142 126
143 126
127 127
128 127
142 127
143 127
144 127
128 128
129 128
143 128
144 128
129 129
130 129
144 129
145 129
146 129
160 129
130 130
131 130
145 130
146 130
147 130
131 131
132 131
146 131
147 131
148 131
132 132
133 132
147 132
148 132
149 132
133 133
134 133
148 133
149 133
150 133
134 134
135 134
149 134
150 134
151 134
135 135
136 135
150 135
151 135
152 135
136 136
137 136
151 136
152 136
153 136
137 137
138 137
152 137
153 137
154 137
138 138
139 138
153 138
154 138
155 138
139 139
140 139
154 139
155 139
156 139
140 140
141 140
155 140
156 140
157 140
141 141
142 141
156 141
157 141
158 141
142 142
143 142
157 142
158 142
159 142
143 143
144 143
158 143
159 143
160 143
144 144
145 144
159 144
160 144
145 145
146 145
160 145
161 145
146 146
147 146
161 146
147 147
148 147
161 147
148 148
149 148
161 148
149 149
150 149
161 149
150 150
151 150
161 150
151 151
152 151
161 151
152 152
153 152
161 152
153 153
154 153
161 153
154 154
155 154
161 154
155 155
156 155
161 155
156 156
157 156
161 156
157 157
158 157
161 157
158 158
159 158
161 158
159 159
160 159
161 159
160 160
161 160
161 161

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
}

.node {
  fill: steelblue;
}

.link {
  stroke: #ccc;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .size([width, height]);

d3.text("can_161.mtx", function(error, text) {
  if (error) throw error;

  var graph = parseMtx(text);

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link");

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 4.5)
      .call(force.drag);

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

  function tick() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

function parseMtx(text) {
  var nodes = [];

  var links = text
      .split(/\n/g) // split lines
      .filter(function(d) { return d.charAt(0) != "%"; }) // skip comments
      .slice(1, -1) // skip header line, last line
      .map(function(d) {
        d = d.split(/\s+/g);
        var source = d[0] - 1, target = d[1] - 1;
        return {
          source: nodes[source] || (nodes[source] = {index: source}),
          target: nodes[target] || (nodes[target] = {index: target})
        };
      });

  return {
    nodes: nodes,
    links: links
  };
}

</script>

thumbnail.png