<link href="https://fonts.googleapis.com/css?family=Work+Sans:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script>
<div id = "container">
<div id = "controlPanel">
<div id = "title">
MLK's Constellation of Concern
</div>
<div class = "instructions">
<p> Click and drag nodes to manipulate shape</p>
<p>Two-finger swipe to zoom in and out</p>
<!-- <p> Change enitre formation by choosing one of the built in options -->
</p>
</div>
<div id="controls">
<input type="radio" value="breadthfirst" id="breadthfirst"> <label for="breadthfirst"><span></span>Breadthfirst</label>
<input type="radio" value="grid" id="grid">
<label for="grid"><span></span>Grid</label>
<br><br>
<input type="radio" value="cose" id="cose"> <label for="cose"><span></span>Cose</label>
<input type="radio" value="concentric" id="concentric"> <label for="concentric"><span></span>Concentric</label>
</div>
</div>
<div id="cyto">
</div>
<!-- this should be an interface js once I figure it out or find a better solution -->
<!-- <div class = "instructions"> -->
</div>
body {
font-family: 'Oswald', sans-serif;
font-size: 21px;
color: #d22042;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/chalkboard.jpg");
}
#container{
display: grid;
width: 100vw;
grid-template-rows: 20vw 80vw;
height: 100vh;
}
#controlPanel{
grid-row: 1/1;
/* border: solid 2px #fff; */
display: grid;
grid-gap: 1em;
grid-template-columns: 45% 20% 30%;
}
.instructions {
color: white;
/* padding: .5em; */
}
#title{
font-family: "Work Sans", sans-serif;
font-size: 2.2em;
color: #d22042;
width: 65%;
line-height: .9em;
}
p {
font-family: "Work Sans", sans-serif;
color: rgba(249, 218, 120, 1);
font-size: 80%;
font-weight: 200;
}
#controls {
color: @yellow;
/* width: 15vw; */
}
#cyto {
/* border: solid 2px red; */
font-family: "Work Sans", sans-serif !important;
font-size: 90%;
}
/* input[type="radio"] {
display:inline-block;
transform: scale(2);
padding: 3.9em;
width: 50%;
} */
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}
//init the graph
document.addEventListener('DOMContentLoaded', function() {
cy = cytoscape({
container: document.getElementById('cyto'),
layout: { name: 'cose'},
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
// 'content': 'data(id)',
'width': '5px',
'height': '5px',
'content': 'data(id)',
'text-align': 'center',
// 'color': '#fffff8',
'color': '#D22042',
// 'text-outline-width': 2,
'background-color': '#D22042',
'z-index': 1,
'font-family': 'Work Sans',
'font-size': '9px'
// 'text-outline-color': '#999'
})
.selector('edge')
.css({
'width': .9,
'curve-style': 'bezier',
// 'target-arrow-shape': 'triangle',
'target-arrow-color': 'rgba(95, 33, 55, .4)',
'line-color': 'rgb(249, 218, 120)',
'z-index': -1
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: [
{
group: 'nodes',
data : {id : 'TRUTH'}
},{
group: 'nodes',
data : {id : 'JUSTICE'}
},
{
group: 'nodes',
data : {id : 'BROTHERHOOD'}
},
// {
// group: 'nodes',
// data : {id : 'CONCERNS'}
// },
{
group: 'nodes',
data : {id : 'A BETTER WORLD'}
},
{
group: 'edges',
data : {
id : 'edge1',
source: 'JUSTICE',
target: 'TRUTH'
}
},
{
group: 'edges',
data : {
id : 'edge2',
source: 'JUSTICE',
target: 'A BETTER WORLD'
}
},
{
group: 'edges',
data : {
id : 'edge3',
source: 'A BETTER WORLD',
target: 'BROTHERHOOD'
}
},
{
group: 'edges',
data : {
id : 'edge',
source: 'TRUTH',
target: 'BROTHERHOOD'
}
},
{
group: 'edges',
data : {
id : 'edge6',
source: 'TRUTH',
target: 'A BETTER WORLD'
}
},
{
group: 'edges',
data : {
id : 'edge7',
source: 'BROTHERHOOD',
target: 'JUSTICE'
}
}
],
ready: function(){
document.getElementById('controls').addEventListener("click", function(e) {
if(e.target.nodeName.toLowerCase() === "input") {
cy.layout({ name: e.target.value });
}
});
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
window.cy = this;
}
});
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.