hnakamur/index.html

## index.html
<!DOCTYPE>
<html>
<head>
<title>network weathermap demo using cytoscape.js</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-automove@1.10.1/cytoscape-automove.js"></script>
<style>
#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
</style>
</head>
<body>
<div id="cy"></div>
<script>
// document.addEventListener('DOMContentLoaded', function () {

var cy = cytoscape({

  container: document.getElementById('cy'), // container to render in

  elements: { // list of graph elements to start with
    nodes: [
      { data: { id: 'a', label: 'コアルータ\n(core router)' }, position: { x: 50, y: 250 } },
      { data: { id: 'a2' }, classes: 'empty-joint' },
      { data: { id: 'b', label: 'ルータ\n(router)' }, position: { x: 550, y: 250 } },
      { data: { id: 'b2' }, classes: 'empty-joint' },
      { data: { id: 'c', label: 'スイッチ\n(switch)' }, position: { x: 300, y: 50 } },
      { data: { id: 'c2' }, classes: 'empty-joint' }
    ],
    edges: [
      { data: { id: 'ab', source: 'a', target: 'a2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
      { data: { id: 'ab2', source: 'b', target: 'a2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } },
      { data: { id: 'bc', source: 'b', target: 'b2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
      { data: { id: 'bc2', source: 'c', target: 'b2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } },
      { data: { id: 'ca', source: 'c', target: 'c2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
      { data: { id: 'ca2', source: 'a', target: 'c2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } }
    ]
  },

  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'content': 'data(id)'
      }
    },
    {
      selector: '.empty-joint',
      style: {
        'content': '',
        'background-opacity': 0,
        'width': '1px',
        'height': '1px',
        'border-width': 0
      }
    },

    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 'data(width)',
        'line-color': 'data(lineColor)',
        'target-arrow-color': 'data(lineColor)',
        'target-arrow-shape': 'triangle'
      }
    },

    {
      selector: 'node[label]',
      style: {
        'text-wrap': 'wrap',
        'label': 'data(label)'
      }
    },
    {
      selector: 'edge[label]',
      style: {
        'label': 'data(label)',
        'text-border-opacity': 1,
        'text-border-color': '#000',
        'text-border-width': '1px',
        'text-background-padding': '4px',
        'text-background-opacity': 1,
        'text-background-color': '#FFF',
        'text-background-shape': 'rectangle'
      }
    },
    {
      selector: '#a',
      style: {
        'shape': 'rectangle',
        'background-opacity': 0,
        'width': '72px',
        'height': '69px',
        'background-fit': 'cover cover',
        'background-image': 'data:image/gif;base64,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'
      }
    },
    {
      selector: '#a[label]',
      style: {
        'text-valign': 'bottom'
      }
    },
    {
      selector: '#b',
      style: {
        'shape': 'rectangle',
        'background-opacity': 0,
        'width': '60px',
        'height': '35px',
        'background-fit': 'cover cover',
        'background-image': 'data:image/gif;base64,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'
      }
    },
    {
      selector: '#b[label]',
      style: {
        'text-valign': 'bottom'
      }
    },
    {
      selector: '#c',
      style: {
        'shape': 'rectangle',
        'background-opacity': 0,
        'width': '78px',
        'height': '33px',
        'background-fit': 'cover cover',
        'background-image': 'data:image/gif;base64,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'
      }
    }
  ],

  layout: {
    name: 'preset'
  }

});

cy.automove({
  nodesMatching: cy.$('.empty-joint'),
  reposition: 'mean',
  meanOnSelfPosition: function( node ){ return false; }
});

// });
</script>

</body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<title>network weathermap demo using cytoscape.js</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
	<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
	<script src="https://unpkg.com/cytoscape-automove@1.10.1/cytoscape-automove.js"></script>
	<style>
	#cy {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<div id="cy"></div>
	<script>
	// document.addEventListener('DOMContentLoaded', function () {

	var cy = cytoscape({

	container: document.getElementById('cy'), // container to render in

	elements: { // list of graph elements to start with
	nodes: [
	{ data: { id: 'a', label: 'コアルータ\n(core router)' }, position: { x: 50, y: 250 } },
	{ data: { id: 'a2' }, classes: 'empty-joint' },
	{ data: { id: 'b', label: 'ルータ\n(router)' }, position: { x: 550, y: 250 } },
	{ data: { id: 'b2' }, classes: 'empty-joint' },
	{ data: { id: 'c', label: 'スイッチ\n(switch)' }, position: { x: 300, y: 50 } },
	{ data: { id: 'c2' }, classes: 'empty-joint' }
	],
	edges: [
	{ data: { id: 'ab', source: 'a', target: 'a2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
	{ data: { id: 'ab2', source: 'b', target: 'a2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } },
	{ data: { id: 'bc', source: 'b', target: 'b2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
	{ data: { id: 'bc2', source: 'c', target: 'b2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } },
	{ data: { id: 'ca', source: 'c', target: 'c2', label: '139.14K', width: '13px', lineColor: '#B3EAD9' } },
	{ data: { id: 'ca2', source: 'a', target: 'c2', label: '200.13K', width: '20px', lineColor: '#D1EAF8' } }
	]
	},

	style: [ // the stylesheet for the graph
	{
	selector: 'node',
	style: {
	'background-color': '#666',
	'content': 'data(id)'
	}
	},
	{
	selector: '.empty-joint',
	style: {
	'content': '',
	'background-opacity': 0,
	'width': '1px',
	'height': '1px',
	'border-width': 0
	}
	},

	{
	selector: 'edge',
	style: {
	'curve-style': 'bezier',
	'width': 'data(width)',
	'line-color': 'data(lineColor)',
	'target-arrow-color': 'data(lineColor)',
	'target-arrow-shape': 'triangle'
	}
	},

	{
	selector: 'node[label]',
	style: {
	'text-wrap': 'wrap',
	'label': 'data(label)'
	}
	},
	{
	selector: 'edge[label]',
	style: {
	'label': 'data(label)',
	'text-border-opacity': 1,
	'text-border-color': '#000',
	'text-border-width': '1px',
	'text-background-padding': '4px',
	'text-background-opacity': 1,
	'text-background-color': '#FFF',
	'text-background-shape': 'rectangle'
	}
	},
	{
	selector: '#a',
	style: {
	'shape': 'rectangle',
	'background-opacity': 0,
	'width': '72px',
	'height': '69px',
	'background-fit': 'cover cover',
	'background-image': 'data:image/gif;base64,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'
	}
	},
	{
	selector: '#a[label]',
	style: {
	'text-valign': 'bottom'
	}
	},
	{
	selector: '#b',
	style: {
	'shape': 'rectangle',
	'background-opacity': 0,
	'width': '60px',
	'height': '35px',
	'background-fit': 'cover cover',
	'background-image': 'data:image/gif;base64,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'
	}
	},
	{
	selector: '#b[label]',
	style: {
	'text-valign': 'bottom'
	}
	},
	{
	selector: '#c',
	style: {
	'shape': 'rectangle',
	'background-opacity': 0,
	'width': '78px',
	'height': '33px',
	'background-fit': 'cover cover',
	'background-image': 'data:image/gif;base64,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'
	}
	}
	],

	layout: {
	name: 'preset'
	}

	});

	cy.automove({
	nodesMatching: cy.$('.empty-joint'),
	reposition: 'mean',
	meanOnSelfPosition: function( node ){ return false; }
	});

	// });
	</script>

	</body>
	</html>