Post
Ask Question

Angular nvd3 Force Direction Graph In MVC 5

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. }  
    4.   
    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>  
    12.   
    13. <div ng-app="myapp" ng-controller="GraphController">  
    14.   
    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']);  
    2.   
    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.     };  
    25.   
    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.
Next Recommended Reading How To Migrate MVC 3 Application To MVC 5