グラフ・ネットワーク分析のJSON結果をブラウザ上で描画する Cytoscape.js

var cy = cytoscape({
  container: document.getElementById('cy'),

  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'height': 'data(size)',
        'width': 'data(size)',
        'border-color': '#000',
        'border-width': '1',
        'content': 'data(name)'
      })
    .selector('edge')
      .css({
        'width': 'data(strength)'
      })
    .selector('#1')
      .css({
        'background-color': 'red'
      }),

  elements: {
    nodes: [
      { data: { id: '1', size: 50, name: 'a' } },
      { data: { id: '2', size: 20, name: 'b' } },
      { data: { id: '3', size: 40, name: 'c' } }
    ],
    edges: [
      { data: { source: '1', target: '2', strength: 5 } },
      { data: { source: '1', target: '3', strength: 20 } }
    ]
  },
});