Hi, every one! Welcome back. In this post, I am going to show you the real time demo of the Angular nvd3 Force Directed Graph.There might be many graph libraries for Angular charts on the internet but nvd3 provides rich user interaction events and good looking UI. It simply looks beautiful. Force graph is used to display the network of things. For example diagrammatic representation of your Facebook connection. Given below, is the simple live demo of Force Directed Graph with some sample data.

Click here for a live demo of Force Direction Graph.

  1. Create ASP.NET MVC Web Application (I created in Visual Studio 2013).
  2. Create a Controller (HomeController).
  3. Create an Index action and add View to this action.
  4. Replace the Index view code with the code, as shown below:

    Index.cshtml
    1. @{
    2. ViewBag.Title = "mitechdev.com";
    3. }
    5. <h2>Angular nvd3-Force Direction Graph</h2>
    6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.css" />
    7. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    8. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    9. <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.js"></script>
    10. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.7/angular-nvd3.min.js"></script>
    11. <script src="~/Scripts/myscript.js"></script>
    13. <div ng-app="myapp" ng-controller="GraphController">
    15. <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    16. </div>
  5. Add the script code, given below, for Graph display...
  6. The script, given below, is to display the graph. Here, we must add nvd3 directive as dependency in an Angular module.
  7. We can customize this graph, using $scope.options and I have prepared the data source, using $scope.data. .

    myscript.js
    1. var app = angular.module('myapp', ['nvd3']);
    3. app.controller('GraphController', function ($scope) {
    4. var color = d3.scale.category20()
    5. $scope.options = {
    6. chart: {
    7. type: 'forceDirectedGraph',
    8. height: 500,
    9. // width: (function () { return nv.utils.windowSize().width })(),
    10. width:700,
    11. margin: { top: 20, right: 20, bottom: 20, left: 20 },
    12. color: function (d) {
    13. return color(d.group)
    14. },
    15. nodeExtras: function (node) {
    16. node && node
    17. .append("text")
    18. .attr("dx", 8)
    19. .attr("dy", ".35em")
    20. .text(function (d) { return d.name })
    21. .style('font-size', '10px');
    22. }
    23. }
    24. };
    26. $scope.data = {
    27. "nodes": [
    28. { "name": "Myriel", "group": 1 },
    29. { "name": "Napoleon", "group": 1 },
    30. { "name": "Mlle.Baptistine", "group": 1 },
    31. { "name": "Mme.Magloire", "group": 1 },
    32. { "name": "CountessdeLo", "group": 1 },
    33. { "name": "Geborand", "group": 1 },
    34. { "name": "Champtercier", "group": 1 },
    35. { "name": "Cravatte", "group": 1 },
    36. { "name": "Count", "group": 1 },
    37. { "name": "OldMan", "group": 1 },
    38. { "name": "Labarre", "group": 2 },
    39. { "name": "Valjean", "group": 2 },
    40. { "name": "Marguerite", "group": 3 },
    41. { "name": "Mme.deR", "group": 2 },
    42. { "name": "Isabeau", "group": 2 },
    43. { "name": "Gervais", "group": 2 },
    44. { "name": "Tholomyes", "group": 3 },
    45. { "name": "Listolier", "group": 3 },
    46. { "name": "Fameuil", "group": 3 },
    47. { "name": "Blacheville", "group": 3 },
    48. { "name": "Favourite", "group": 3 },
    49. { "name": "Dahlia", "group": 3 },
    50. { "name": "Zephine", "group": 3 },
    51. { "name": "Fantine", "group": 3 },
    52. { "name": "Mme.Thenardier", "group": 4 },
    53. { "name": "Thenardier", "group": 4 },
    54. { "name": "Cosette", "group": 5 },
    55. { "name": "Javert", "group": 4 },
    56. { "name": "Fauchelevent", "group": 0 },
    57. { "name": "Bamatabois", "group": 2 },
    58. { "name": "Perpetue", "group": 3 },
    59. { "name": "Simplice", "group": 2 },
    60. { "name": "Scaufflaire", "group": 2 },
    61. { "name": "Woman1", "group": 2 },
    62. { "name": "Judge", "group": 2 },
    63. { "name": "Champmathieu", "group": 2 },
    64. { "name": "Brevet", "group": 2 },
    65. { "name": "Chenildieu", "group": 2 },
    66. { "name": "Cochepaille", "group": 2 },
    67. { "name": "Pontmercy", "group": 4 },
    68. { "name": "Boulatruelle", "group": 6 },
    69. { "name": "Eponine", "group": 4 },
    70. { "name": "Anzelma", "group": 4 },
    71. { "name": "Woman2", "group": 5 },
    72. { "name": "MotherInnocent", "group": 0 },
    73. { "name": "Gribier", "group": 0 },
    74. { "name": "Jondrette", "group": 7 },
    75. { "name": "Mme.Burgon", "group": 7 },
    76. { "name": "Gavroche", "group": 8 },
    77. { "name": "Gillenormand", "group": 5 },
    78. { "name": "Magnon", "group": 5 },
    79. { "name": "Mlle.Gillenormand", "group": 5 },
    80. { "name": "Mme.Pontmercy", "group": 5 },
    81. { "name": "Mlle.Vaubois", "group": 5 },
    82. { "name": "Lt.Gillenormand", "group": 5 },
    83. { "name": "Marius", "group": 8 },
    84. { "name": "BaronessT", "group": 5 },
    85. { "name": "Mabeuf", "group": 8 },
    86. { "name": "Enjolras", "group": 8 },
    87. { "name": "Combeferre", "group": 8 },
    88. { "name": "Prouvaire", "group": 8 },
    89. { "name": "Feuilly", "group": 8 },
    90. { "name": "Courfeyrac", "group": 8 },
    91. { "name": "Bahorel", "group": 8 },
    92. { "name": "Bossuet", "group": 8 },
    93. { "name": "Joly", "group": 8 },
    94. { "name": "Grantaire", "group": 8 },
    95. { "name": "MotherPlutarch", "group": 9 },
    96. { "name": "Gueulemer", "group": 4 },
    97. { "name": "Babet", "group": 4 },
    98. { "name": "Claquesous", "group": 4 },
    99. { "name": "Montparnasse", "group": 4 },
    100. { "name": "Toussaint", "group": 5 },
    101. { "name": "Child1", "group": 10 },
    102. { "name": "Child2", "group": 10 },
    103. { "name": "Brujon", "group": 4 },
    104. { "name": "Mme.Hucheloup", "group": 8 }
    105. ],
    106. "links": [
    107. { "source": 1, "target": 0, "value": 1 },
    108. { "source": 2, "target": 0, "value": 8 },
    109. { "source": 3, "target": 0, "value": 10 },
    110. { "source": 3, "target": 2, "value": 6 },
    111. { "source": 4, "target": 0, "value": 1 },
    112. { "source": 5, "target": 0, "value": 1 },
    113. { "source": 6, "target": 0, "value": 1 },
    114. { "source": 7, "target": 0, "value": 1 },
    115. { "source": 8, "target": 0, "value": 2 },
    116. { "source": 9, "target": 0, "value": 1 },
    117. { "source": 11, "target": 10, "value": 1 },
    118. { "source": 11, "target": 3, "value": 3 },
    119. { "source": 11, "target": 2, "value": 3 },
    120. { "source": 11, "target": 0, "value": 5 },
    121. { "source": 12, "target": 11, "value": 1 },
    122. { "source": 13, "target": 11, "value": 1 },
    123. { "source": 14, "target": 11, "value": 1 },
    124. { "source": 15, "target": 11, "value": 1 },
    125. { "source": 17, "target": 16, "value": 4 },
    126. { "source": 18, "target": 16, "value": 4 },
    127. { "source": 18, "target": 17, "value": 4 },
    128. { "source": 19, "target": 16, "value": 4 },
    129. { "source": 19, "target": 17, "value": 4 },
    130. { "source": 19, "target": 18, "value": 4 },
    131. { "source": 20, "target": 16, "value": 3 },
    132. { "source": 20, "target": 17, "value": 3 },
    133. { "source": 20, "target": 18, "value": 3 },
    134. { "source": 20, "target": 19, "value": 4 },
    135. { "source": 21, "target": 16, "value": 3 },
    136. { "source": 21, "target": 17, "value": 3 },
    137. { "source": 21, "target": 18, "value": 3 },
    138. { "source": 21, "target": 19, "value": 3 },
    139. { "source": 21, "target": 20, "value": 5 },
    140. { "source": 22, "target": 16, "value": 3 },
    141. { "source": 22, "target": 17, "value": 3 },
    142. { "source": 22, "target": 18, "value": 3 },
    143. { "source": 22, "target": 19, "value": 3 },
    144. { "source": 22, "target": 20, "value": 4 },
    145. { "source": 22, "target": 21, "value": 4 },
    146. { "source": 23, "target": 16, "value": 3 },
    147. { "source": 23, "target": 17, "value": 3 },
    148. { "source": 23, "target": 18, "value": 3 },
    149. { "source": 23, "target": 19, "value": 3 },
    150. { "source": 23, "target": 20, "value": 4 },
    151. { "source": 23, "target": 21, "value": 4 },
    152. { "source": 23, "target": 22, "value": 4 },
    153. { "source": 23, "target": 12, "value": 2 },
    154. { "source": 23, "target": 11, "value": 9 },
    155. { "source": 24, "target": 23, "value": 2 },
    156. { "source": 24, "target": 11, "value": 7 },
    157. { "source": 25, "target": 24, "value": 13 },
    158. { "source": 25, "target": 23, "value": 1 },
    159. { "source": 25, "target": 11, "value": 12 },
    160. { "source": 26, "target": 24, "value": 4 },
    161. { "source": 26, "target": 11, "value": 31 },
    162. { "source": 26, "target": 16, "value": 1 },
    163. { "source": 26, "target": 25, "value": 1 },
    164. { "source": 27, "target": 11, "value": 17 },
    165. { "source": 27, "target": 23, "value": 5 },
    166. { "source": 27, "target": 25, "value": 5 },
    167. { "source": 27, "target": 24, "value": 1 },
    168. { "source": 27, "target": 26, "value": 1 },
    169. { "source": 28, "target": 11, "value": 8 },
    170. { "source": 28, "target": 27, "value": 1 },
    171. { "source": 29, "target": 23, "value": 1 },
    172. { "source": 29, "target": 27, "value": 1 },
    173. { "source": 29, "target": 11, "value": 2 },
    174. { "source": 30, "target": 23, "value": 1 },
    175. { "source": 31, "target": 30, "value": 2 },
    176. { "source": 31, "target": 11, "value": 3 },
    177. { "source": 31, "target": 23, "value": 2 },
    178. { "source": 31, "target": 27, "value": 1 },
    179. { "source": 32, "target": 11, "value": 1 },
    180. { "source": 33, "target": 11, "value": 2 },
    181. { "source": 33, "target": 27, "value": 1 },
    182. { "source": 34, "target": 11, "value": 3 },
    183. { "source": 34, "target": 29, "value": 2 },
    184. { "source": 35, "target": 11, "value": 3 },
    185. { "source": 35, "target": 34, "value": 3 },
    186. { "source": 35, "target": 29, "value": 2 },
    187. { "source": 36, "target": 34, "value": 2 },
    188. { "source": 36, "target": 35, "value": 2 },
    189. { "source": 36, "target": 11, "value": 2 },
    190. { "source": 36, "target": 29, "value": 1 },
    191. { "source": 37, "target": 34, "value": 2 },
    192. { "source": 37, "target": 35, "value": 2 },
    193. { "source": 37, "target": 36, "value": 2 },
    194. { "source": 37, "target": 11, "value": 2 },
    195. { "source": 37, "target": 29, "value": 1 },
    196. { "source": 38, "target": 34, "value": 2 },
    197. { "source": 38, "target": 35, "value": 2 },
    198. { "source": 38, "target": 36, "value": 2 },
    199. { "source": 38, "target": 37, "value": 2 },
    200. { "source": 38, "target": 11, "value": 2 },
    201. { "source": 38, "target": 29, "value": 1 },
    202. { "source": 39, "target": 25, "value": 1 },
    203. { "source": 40, "target": 25, "value": 1 },
    204. { "source": 41, "target": 24, "value": 2 },
    205. { "source": 41, "target": 25, "value": 3 },
    206. { "source": 42, "target": 41, "value": 2 },
    207. { "source": 42, "target": 25, "value": 2 },
    208. { "source": 42, "target": 24, "value": 1 },
    209. { "source": 43, "target": 11, "value": 3 },
    210. { "source": 43, "target": 26, "value": 1 },
    211. { "source": 43, "target": 27, "value": 1 },
    212. { "source": 44, "target": 28, "value": 3 },
    213. { "source": 44, "target": 11, "value": 1 },
    214. { "source": 45, "target": 28, "value": 2 },
    215. { "source": 47, "target": 46, "value": 1 },
    216. { "source": 48, "target": 47, "value": 2 },
    217. { "source": 48, "target": 25, "value": 1 },
    218. { "source": 48, "target": 27, "value": 1 },
    219. { "source": 48, "target": 11, "value": 1 },
    220. { "source": 49, "target": 26, "value": 3 },
    221. { "source": 49, "target": 11, "value": 2 },
    222. { "source": 50, "target": 49, "value": 1 },
    223. { "source": 50, "target": 24, "value": 1 },
    224. { "source": 51, "target": 49, "value": 9 },
    225. { "source": 51, "target": 26, "value": 2 },
    226. { "source": 51, "target": 11, "value": 2 },
    227. { "source": 52, "target": 51, "value": 1 },
    228. { "source": 52, "target": 39, "value": 1 },
    229. { "source": 53, "target": 51, "value": 1 },
    230. { "source": 54, "target": 51, "value": 2 },
    231. { "source": 54, "target": 49, "value": 1 },
    232. { "source": 54, "target": 26, "value": 1 },
    233. { "source": 55, "target": 51, "value": 6 },
    234. { "source": 55, "target": 49, "value": 12 },
    235. { "source": 55, "target": 39, "value": 1 },
    236. { "source": 55, "target": 54, "value": 1 },
    237. { "source": 55, "target": 26, "value": 21 },
    238. { "source": 55, "target": 11, "value": 19 },
    239. { "source": 55, "target": 16, "value": 1 },
    240. { "source": 55, "target": 25, "value": 2 },
    241. { "source": 55, "target": 41, "value": 5 },
    242. { "source": 55, "target": 48, "value": 4 },
    243. { "source": 56, "target": 49, "value": 1 },
    244. { "source": 56, "target": 55, "value": 1 },
    245. { "source": 57, "target": 55, "value": 1 },
    246. { "source": 57, "target": 41, "value": 1 },
    247. { "source": 57, "target": 48, "value": 1 },
    248. { "source": 58, "target": 55, "value": 7 },
    249. { "source": 58, "target": 48, "value": 7 },
    250. { "source": 58, "target": 27, "value": 6 },
    251. { "source": 58, "target": 57, "value": 1 },
    252. { "source": 58, "target": 11, "value": 4 },
    253. { "source": 59, "target": 58, "value": 15 },
    254. { "source": 59, "target": 55, "value": 5 },
    255. { "source": 59, "target": 48, "value": 6 },
    256. { "source": 59, "target": 57, "value": 2 },
    257. { "source": 60, "target": 48, "value": 1 },
    258. { "source": 60, "target": 58, "value": 4 },
    259. { "source": 60, "target": 59, "value": 2 },
    260. { "source": 61, "target": 48, "value": 2 },
    261. { "source": 61, "target": 58, "value": 6 },
    262. { "source": 61, "target": 60, "value": 2 },
    263. { "source": 61, "target": 59, "value": 5 },
    264. { "source": 61, "target": 57, "value": 1 },
    265. { "source": 61, "target": 55, "value": 1 },
    266. { "source": 62, "target": 55, "value": 9 },
    267. { "source": 62, "target": 58, "value": 17 },
    268. { "source": 62, "target": 59, "value": 13 },
    269. { "source": 62, "target": 48, "value": 7 },
    270. { "source": 62, "target": 57, "value": 2 },
    271. { "source": 62, "target": 41, "value": 1 },
    272. { "source": 62, "target": 61, "value": 6 },
    273. { "source": 62, "target": 60, "value": 3 },
    274. { "source": 63, "target": 59, "value": 5 },
    275. { "source": 63, "target": 48, "value": 5 },
    276. { "source": 63, "target": 62, "value": 6 },
    277. { "source": 63, "target": 57, "value": 2 },
    278. { "source": 63, "target": 58, "value": 4 },
    279. { "source": 63, "target": 61, "value": 3 },
    280. { "source": 63, "target": 60, "value": 2 },
    281. { "source": 63, "target": 55, "value": 1 },
    282. { "source": 64, "target": 55, "value": 5 },
    283. { "source": 64, "target": 62, "value": 12 },
    284. { "source": 64, "target": 48, "value": 5 },
    285. { "source": 64, "target": 63, "value": 4 },
    286. { "source": 64, "target": 58, "value": 10 },
    287. { "source": 64, "target": 61, "value": 6 },
    288. { "source": 64, "target": 60, "value": 2 },
    289. { "source": 64, "target": 59, "value": 9 },
    290. { "source": 64, "target": 57, "value": 1 },
    291. { "source": 64, "target": 11, "value": 1 },
    292. { "source": 65, "target": 63, "value": 5 },
    293. { "source": 65, "target": 64, "value": 7 },
    294. { "source": 65, "target": 48, "value": 3 },
    295. { "source": 65, "target": 62, "value": 5 },
    296. { "source": 65, "target": 58, "value": 5 },
    297. { "source": 65, "target": 61, "value": 5 },
    298. { "source": 65, "target": 60, "value": 2 },
    299. { "source": 65, "target": 59, "value": 5 },
    300. { "source": 65, "target": 57, "value": 1 },
    301. { "source": 65, "target": 55, "value": 2 },
    302. { "source": 66, "target": 64, "value": 3 },
    303. { "source": 66, "target": 58, "value": 3 },
    304. { "source": 66, "target": 59, "value": 1 },
    305. { "source": 66, "target": 62, "value": 2 },
    306. { "source": 66, "target": 65, "value": 2 },
    307. { "source": 66, "target": 48, "value": 1 },
    308. { "source": 66, "target": 63, "value": 1 },
    309. { "source": 66, "target": 61, "value": 1 },
    310. { "source": 66, "target": 60, "value": 1 },
    311. { "source": 67, "target": 57, "value": 3 },
    312. { "source": 68, "target": 25, "value": 5 },
    313. { "source": 68, "target": 11, "value": 1 },
    314. { "source": 68, "target": 24, "value": 1 },
    315. { "source": 68, "target": 27, "value": 1 },
    316. { "source": 68, "target": 48, "value": 1 },
    317. { "source": 68, "target": 41, "value": 1 },
    318. { "source": 69, "target": 25, "value": 6 },
    319. { "source": 69, "target": 68, "value": 6 },
    320. { "source": 69, "target": 11, "value": 1 },
    321. { "source": 69, "target": 24, "value": 1 },
    322. { "source": 69, "target": 27, "value": 2 },
    323. { "source": 69, "target": 48, "value": 1 },
    324. { "source": 69, "target": 41, "value": 1 },
    325. { "source": 70, "target": 25, "value": 4 },
    326. { "source": 70, "target": 69, "value": 4 },
    327. { "source": 70, "target": 68, "value": 4 },
    328. { "source": 70, "target": 11, "value": 1 },
    329. { "source": 70, "target": 24, "value": 1 },
    330. { "source": 70, "target": 27, "value": 1 },
    331. { "source": 70, "target": 41, "value": 1 },
    332. { "source": 70, "target": 58, "value": 1 },
    333. { "source": 71, "target": 27, "value": 1 },
    334. { "source": 71, "target": 69, "value": 2 },
    335. { "source": 71, "target": 68, "value": 2 },
    336. { "source": 71, "target": 70, "value": 2 },
    337. { "source": 71, "target": 11, "value": 1 },
    338. { "source": 71, "target": 48, "value": 1 },
    339. { "source": 71, "target": 41, "value": 1 },
    340. { "source": 71, "target": 25, "value": 1 },
    341. { "source": 72, "target": 26, "value": 2 },
    342. { "source": 72, "target": 27, "value": 1 },
    343. { "source": 72, "target": 11, "value": 1 },
    344. { "source": 73, "target": 48, "value": 2 },
    345. { "source": 74, "target": 48, "value": 2 },
    346. { "source": 74, "target": 73, "value": 3 },
    347. { "source": 75, "target": 69, "value": 3 },
    348. { "source": 75, "target": 68, "value": 3 },
    349. { "source": 75, "target": 25, "value": 3 },
    350. { "source": 75, "target": 48, "value": 1 },
    351. { "source": 75, "target": 41, "value": 1 },
    352. { "source": 75, "target": 70, "value": 1 },
    353. { "source": 75, "target": 71, "value": 1 },
    354. { "source": 76, "target": 64, "value": 1 },
    355. { "source": 76, "target": 65, "value": 1 },
    356. { "source": 76, "target": 66, "value": 1 },
    357. { "source": 76, "target": 63, "value": 1 },
    358. { "source": 76, "target": 62, "value": 1 },
    359. { "source": 76, "target": 48, "value": 1 },
    360. { "source": 76, "target": 58, "value": 1 }
    361. ]
    362. }
    363. });

Conclusion

I hope this article may be helpful for many readers.