Cytoscape network graphing with images
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/cytoscape/2.3.4/cytoscape.min.js"></script>
from <a target="_blank" href="http://jsbin.com/gist/aedff159b0df05ccfaa5?html,css,js,output">http://jsbin.com/gist/aedff159b0df05ccfaa5</a>
<div id="cy"></div>
CSS
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 95%;
width: 100%;
position: absolute;
top: 20px;
}
JavaScript
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'height': 80,
'width': 80,
'background-fit': 'cover',
'border-color': '#000',
'border-width': 3,
'border-opacity': 0.5
})
.selector('.eating')
.css({
'border-color': 'orange'
})
.selector('.eater')
.css({
'border-width': 9
})
.selector('edge')
.css({
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': 'steelblue',
'target-arrow-color': 'steelblue'
})
.selector('#bird')
.css({
'border-width': 10,
'border-color': 'green',
'background-image': 'http://www.goodoldfashioned.com/img/minion.png'
})
.selector('#cat')
.css({
'background-image': 'http://www.goodoldfashioned.com/img/typewriter.jpg'
})
.selector('#ladybug')
.css({
'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
})
.selector('#aphid')
.css({
'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
})
.selector('#rose')
.css({
'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg',
'background-width': '5%',
'background-height': '5%',
'background-fit': 'contain'
})
.selector('#grasshopper')
.css({
'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
})
.selector('#plant')
.css({
'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
})
.selector('#wheat')
.css({
'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
}),
elements: {
nodes: [
{ data: { id: 'cat' } },
{ data: { id: 'bird' } },
{...