d3.js force graph

A simple force graph using d3.js.

by Serhii Matrunchyk

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.link {
    stroke: #666;
    opacity: 0.6;
    stroke-width: 1.5px;
}
.node circle {
    stroke: #fff;
    opacity: 0.6;
    stroke-width: 1.5px;
}
text {
    font: 15px serif;
    opacity: 0.6;
    pointer-events: none;
}

JavaScript

const nodes = [
    {
      status: 'alive',
      isProband: true,
      clinicalInfos: [],
      ethnicities: [],
      id: 1,
      name: 'Danielle 24.03',
      gender: 'FEMALE',
      birthDate: '1980-01-01T00:00:00Z',
    },
    {
      status: 'alive',
      isProband: false,
      clinicalInfos: [],
      ethnicities: [],
      id: 2,
      name: 'father (2)',
      gender: 'MALE',
    },
    {
      status: 'alive',
      isProband: false,
      clinicalInfos: [],
      ethnicities: [],
      id: 3,
      name: 'mother (3)',
      gender: 'FEMALE',
    },
    {
      status: 'alive',
      isProband: false,
      clinicalInfos: [],
      ethnicities: [],
      id: 4,
      name: 'partner',
      gender: 'MALE',
    },
    {
      status: 'alive',
      isProband: false,
      clinicalInfos: [],
      ethnicities: [],
      id: 5,
      name: 'divorced',
      gender: 'MALE',
    },
    {
    status: 'alive',
       isProband: false,
       clinicalInfos: [],
       ethnicities: [],
      id: 6,
      name: 'divorced',
       gender: 'MALE',
    },
     {
      status: 'alive',
      isProband: false,
      clinicalInfos: [],
       ethnicities: [],
      id: 7,
       name: 'divorced',
       gender: 'MALE',
     },
  ];
  
  const links = [
    {
      id: 1,
      source: 1,
      target: 0,
      relationType: 'parent',
    },
    {
      id: 2,
      source: 2,
      target: 0,
      relationType: 'parent',
    },
    {
      id: 3,
      source: 1,
      target: 2,
      relationType: 'partner',
    },
    {
      id: 4,
      source: 0,
      target: 3,
      relationType: 'partner',
    },
    {
      id: 5,
      source: 0,
      target: 4,
      relationType: 'divorced',
    },
    {
      id: 6,
      source: 0,
      target: 5,
    relationType: 'divorced',
    },
    {
   id: 7,
     source: 0,
    target: 6,
    relationType: 'divorced',
    },
  ];

var width = 800
height = 300;

var force = d3.layout.force()
  .nodes(nodes)
 ...