Skip to content

Instantly share code, notes, and snippets.

@gre
Created June 15, 2014 16:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gre/8caa85c90b134f3c8852 to your computer and use it in GitHub Desktop.
Save gre/8caa85c90b134f3c8852 to your computer and use it in GitHub Desktop.
GLSL.io 1.3 graph dependencies
<html>
<head>
<title>dependo</title>
<style>
body {
background: #fff;
padding:0;
margin:0;
font-family:helvetica,arial;
overflow: hidden;
}
.graph {
width:100%;
height: 100%;
fill: #000;
overflow: hidden;
position: relative;
}
svg {
height: 100%;
width: 100%;
}
g.dimmed {
stroke-opacity: 0.05;
}
g.dimmed text.shadow {
stroke-opacity: 0;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
path.link.licensing {
stroke: green;
}
path.link.resolved {
stroke-dasharray: 0,2 1;
}
.control-zoom {
position: fixed;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.25);
padding: 5px;
border-radius: 7px;
z-index: 100;
}
.control-zoom a {
background: rgba(255, 255, 255, 0.75);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
width: 19px;
height: 19px;
border-radius: 4px;
}
.control-zoom a:last-child {
margin: 0;
}
.control-zoom a:hover {
background-color: white;
}
.control-zoom > .control-zoom-in {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUwRTZCRkI3NjQzNzExRTBBQUI3RTAwMUU2MTZDRkQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUwRTZCRkI4NjQzNzExRTBBQUI3RTAwMUU2MTZDRkQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTBFNkJGQjU2NDM3MTFFMEFBQjdFMDAxRTYxNkNGRDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTBFNkJGQjY2NDM3MTFFMEFBQjdFMDAxRTYxNkNGRDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7cwPMXAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAARSURBVAhbY3jcwABBcAATAQBxlwhT4XiahwAAAABJRU5ErkJggg==);
margin-bottom: 5px;
}
.control-zoom > .control-zoom-out {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5MjRDMEQ5NjQzNzExRTBCM0JDQkU2MzVGQTBCNjRDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5MjRDMERBNjQzNzExRTBCM0JDQkU2MzVGQTBCNjRDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTkyNEMwRDc2NDM3MTFFMEIzQkNCRTYzNUZBMEI2NEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTkyNEMwRDg2NDM3MTFFMEIzQkNCRTYzNUZBMEI2NEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7uh53jAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAARSURBVAhbY/jfwABBcAATAQB6xwj7vHGbwAAAAABJRU5ErkJggg==);
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="graph">
<div class="control-zoom">
<a class="control-zoom-in" href="#" title="Zoom in"></a>
<a class="control-zoom-out" href="#" title="Zoom out"></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var getGraphData = function() { return {"directed":true,"multigraph":false,"graph":[],"nodes":[{"id":"core/app"},{"id":"core/router"},{"id":"lodash"},{"id":"q"},{"id":"react"},{"id":"ui/app"},{"id":"core/cache"},{"id":"store"},{"id":"director"},{"id":"qdebounce"},{"id":"embed/LinearPlayer"},{"id":"mixins/Promises"},{"id":"ui/TransitionCanvas/index"},{"id":"embed/index"},{"id":"images/index"},{"id":"images/resolveTextureUniforms"},{"id":"qimage"},{"id":"images/textures"},{"id":"index"},{"id":"model/index"},{"id":"screens/index"},{"id":"qajax"},{"id":"screens/about/article"},{"id":"highlight.js"},{"id":"screens/about/index"},{"id":"screens/editor/EditorScreen/index"},{"id":"glsl-transition-validator"},{"id":"screens/editor/LicenseLabel/index"},{"id":"screens/editor/TransitionActions/index"},{"id":"screens/editor/TransitionComments/index"},{"id":"screens/editor/TransitionEditor/index"},{"id":"screens/editor/TransitionInfos/index"},{"id":"screens/editor/TransitionPreview/index"},{"id":"screens/editor/UniformsEditor/index"},{"id":"screens/editor/UniformsEditor/uniformValuesForUniforms"},{"id":"ui/Toolbar/index"},{"id":"screens/editor/GlslEditor/index"},{"id":"ui/Link/index"},{"id":"screens/editor/PublishButton/index"},{"id":"ui/Button/index"},{"id":"screens/editor/SaveButton/index"},{"id":"screens/editor/StatusMessage/index"},{"id":"ui/Vignette/index"},{"id":"screens/editor/UniformComponentInput/index"},{"id":"screens/editor/UniformComponentInput/primitiveTypes"},{"id":"screens/editor/UniformEditor/arityForType"},{"id":"screens/editor/UniformEditor/componentLinesForType"},{"id":"screens/editor/UniformEditor/index"},{"id":"screens/editor/UniformEditor/labelsForType"},{"id":"screens/editor/UniformEditor/primitiveForType"},{"id":"screens/editor/index"},{"id":"qstart"},{"id":"screens/error/index"},{"id":"screens/gallery/GalleryScreen/index"},{"id":"screens/gallery/TransitionsBrowser/index"},{"id":"screens/gallery/TransitionPreview/index"},{"id":"screens/gallery/TransitionsBrowserPager/index"},{"id":"ui/TransitionCanvasCache/SharedCanvas"},{"id":"ui/button/index"},{"id":"screens/gallery/index"},{"id":"ui/Footer/index"},{"id":"ui/Header/index"},{"id":"ui/Logo/index"},{"id":"ui/ScreenContainer/index"},{"id":"glsl-transition"},{"id":"ui/TransitionCanvasCache/index"},{"id":"raf"},{"id":"ui/vignette/index"}],"links":[{"source":0,"target":1},{"source":0,"target":2},{"source":0,"target":3},{"source":0,"target":4},{"source":0,"target":5},{"source":6,"target":3},{"source":6,"target":7},{"source":1,"target":8},{"source":1,"target":2},{"source":1,"target":3},{"source":1,"target":9},{"source":10,"target":11},{"source":10,"target":4},{"source":10,"target":12},{"source":13,"target":10},{"source":13,"target":14},{"source":13,"target":15},{"source":13,"target":2},{"source":13,"target":3},{"source":13,"target":4},{"source":14,"target":3},{"source":14,"target":16},{"source":15,"target":17},{"source":15,"target":2},{"source":15,"target":3},{"source":17,"target":16},{"source":18,"target":0},{"source":18,"target":2},{"source":18,"target":19},{"source":18,"target":3},{"source":18,"target":4},{"source":18,"target":20},{"source":11,"target":3},{"source":19,"target":0},{"source":19,"target":6},{"source":19,"target":21},{"source":22,"target":23},{"source":22,"target":2},{"source":22,"target":4},{"source":24,"target":21},{"source":24,"target":22},{"source":25,"target":1},{"source":25,"target":26},{"source":25,"target":15},{"source":25,"target":2},{"source":25,"target":11},{"source":25,"target":19},{"source":25,"target":3},{"source":25,"target":4},{"source":25,"target":27},{"source":25,"target":28},{"source":25,"target":29},{"source":25,"target":30},{"source":25,"target":31},{"source":25,"target":32},{"source":25,"target":33},{"source":25,"target":34},{"source":25,"target":35},{"source":36,"target":2},{"source":36,"target":4},{"source":27,"target":4},{"source":27,"target":37},{"source":38,"target":4},{"source":38,"target":39},{"source":40,"target":4},{"source":40,"target":41},{"source":40,"target":39},{"source":41,"target":4},{"source":28,"target":4},{"source":28,"target":38},{"source":28,"target":40},{"source":28,"target":37},{"source":29,"target":4},{"source":29,"target":37},{"source":30,"target":26},{"source":30,"target":4},{"source":30,"target":36},{"source":30,"target":41},{"source":31,"target":4},{"source":31,"target":37},{"source":32,"target":4},{"source":32,"target":42},{"source":43,"target":17},{"source":43,"target":2},{"source":43,"target":4},{"source":43,"target":44},{"source":44,"target":17},{"source":45,"target":2},{"source":47,"target":2},{"source":47,"target":4},{"source":47,"target":43},{"source":47,"target":45},{"source":47,"target":46},{"source":47,"target":48},{"source":47,"target":49},{"source":48,"target":2},{"source":49,"target":2},{"source":33,"target":2},{"source":33,"target":4},{"source":33,"target":47},{"source":33,"target":34},{"source":34,"target":2},{"source":34,"target":45},{"source":34,"target":49},{"source":50,"target":14},{"source":50,"target":15},{"source":50,"target":2},{"source":50,"target":3},{"source":50,"target":51},{"source":50,"target":25},{"source":52,"target":4},{"source":52,"target":37},{"source":53,"target":2},{"source":53,"target":4},{"source":53,"target":54},{"source":53,"target":37},{"source":53,"target":35},{"source":55,"target":4},{"source":55,"target":42},{"source":54,"target":2},{"source":54,"target":4},{"source":54,"target":55},{"source":54,"target":56},{"source":54,"target":57},{"source":56,"target":4},{"source":56,"target":58},{"source":59,"target":26},{"source":59,"target":14},{"source":59,"target":15},{"source":59,"target":2},{"source":59,"target":3},{"source":59,"target":51},{"source":59,"target":53},{"source":20,"target":24},{"source":20,"target":50},{"source":20,"target":52},{"source":20,"target":59},{"source":60,"target":4},{"source":60,"target":37},{"source":61,"target":2},{"source":61,"target":4},{"source":61,"target":37},{"source":61,"target":62},{"source":37,"target":1},{"source":37,"target":4},{"source":37,"target":39},{"source":62,"target":4},{"source":62,"target":37},{"source":63,"target":4},{"source":35,"target":4},{"source":12,"target":64},{"source":12,"target":2},{"source":12,"target":4},{"source":57,"target":64},{"source":57,"target":2},{"source":65,"target":2},{"source":65,"target":3},{"source":65,"target":66},{"source":65,"target":4},{"source":5,"target":4},{"source":5,"target":60},{"source":5,"target":61},{"source":5,"target":63},{"source":58,"target":11},{"source":58,"target":3},{"source":58,"target":4},{"source":67,"target":64},{"source":67,"target":2},{"source":67,"target":3},{"source":67,"target":4},{"source":67,"target":37},{"source":67,"target":12},{"source":67,"target":65}]};};
(function() {
var url = 'data.json'
var r = 10;
var graph, layout, zoom, nodes, links, data;
var linkedByIndex = {};
var graphWidth, graphHeight;
// Helpers
function formatClassName(prefix, object) {
return prefix + '-' + object.id.replace(/(\.|\/)/gi, '-');
}
function findElementByNode(prefix, node) {
var selector = '.'+formatClassName(prefix, node);
return graph.select(selector);
}
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
function fadeRelatedNodes(d, opacity, nodes, links) {
// Clean
$('path.link').removeAttr('data-show');
nodes.style("stroke-opacity", function(o) {
if (isConnected(d, o)) {
thisOpacity = 1;
} else {
thisOpacity = opacity;
}
this.setAttribute('fill-opacity', thisOpacity);
this.setAttribute('stroke-opacity', thisOpacity);
if(thisOpacity == 1) {
this.classList.remove('dimmed');
} else {
this.classList.add('dimmed');
}
return thisOpacity;
});
links.style("stroke-opacity", function(o) {
if (o.source === d) {
// Highlight target/sources of the link
var elmNodes = graph.selectAll('.'+formatClassName('node', o.target));
elmNodes.attr('fill-opacity', 1);
elmNodes.attr('stroke-opacity', 1);
elmNodes.classed('dimmed', false);
// Highlight arrows
var elmCurrentLink = $('path.link[data-source=' + o.source.index + ']');
elmCurrentLink.attr('data-show', true);
elmCurrentLink.attr('marker-end', 'url(#regular)');
return 1;
} else {
var elmAllLinks = $('path.link:not([data-show])');
if(opacity == 1) {
elmAllLinks.attr('marker-end', 'url(#regular)');
} else {
elmAllLinks.attr('marker-end', '');
}
return opacity;
}
});
}
function render() {
zoom = d3.behavior.zoom();
zoom.on("zoom", onZoomChanged);
// Setup layout
layout = d3.layout.force()
.gravity(.05)
.charge(-300)
.linkDistance(100);
// Setup graph
graph = d3.select(".graph")
.append("svg:svg")
.attr("pointer-events", "all")
.call(zoom)
.append('svg:g')
.attr('width', graphWidth)
.attr('height', graphHeight);
d3.select(window).on("resize", resize);
// Load graph data
var graphData = window.getGraphData();
renderGraph(graphData);
data = graphData;
// Resize
resize();
centerGraph();
// Controlers
$('.control-zoom a').on('click', onControlZoomClicked);
}
function resize() {
graphWidth = window.innerWidth,
graphHeight = window.innerHeight;
graph.attr("width", graphWidth)
.attr("height", graphHeight);
layout.size([graphWidth, graphHeight])
.resume();
}
function centerGraph() {
var centerTranslate = [
(graphWidth / 2) - (graphWidth * 0.2 / 2),
(graphHeight / 2) - (graphHeight * 0.2 / 2),
];
zoom.translate(centerTranslate);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}
function renderGraph(data) {
// Markers
graph.append("svg:defs").selectAll("marker")
.data(['regular'])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
// Lines
links = graph.append('svg:g').selectAll("line")
.data(data.links)
.enter().append("svg:path")
.attr('class', 'link')
.attr("data-target", function(o) { return o.target })
.attr("data-source", function(o) { return o.source })
.attr("marker-end", function(d) { return "url(#regular)"; });
// Nodes
nodes = graph.append('svg:g').selectAll("node")
.data(data.nodes)
.enter().append("svg:g")
.attr("class","node")
.call(layout.drag)
.on("mousedown", onNodeMouseDown);
// Circles
nodes.attr("class", function(d) { return formatClassName('node', d) })
nodes.append("svg:circle")
.attr("class", function(d) { return formatClassName('circle', d) })
.attr("r", 6)
.on("mouseover", _.bind(onNodeMouseOver, this, nodes, links))
.on("mouseout", _.bind(onNodeMouseOut, this, nodes, links) );
// A copy of the text with a thick white stroke for legibility.
nodes.append("svg:text")
.attr("x", 15)
.attr("y", ".31em")
.attr("class", function(d) { return 'shadow ' + formatClassName('text', d) })
.text(function(d) { return d.id; });
nodes.append("svg:text")
.attr("class", function(d) { return formatClassName('text', d) })
.attr("x", 15)
.attr("y", ".31em")
.text(function(d) { return d.id; });
// Build linked index
data.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
// Draw the
layout.nodes(data.nodes);
layout.links(data.links);
layout.on("tick", onTick);
layout.start();
zoom.scale(0.4);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "scale(" + zoom.scale() + ")");
}
function onNodeMouseOver(nodes, links, d) {
// Highlight circle
var elm = findElementByNode('circle', d);
elm.style("fill", '#b94431');
// Highlight related nodes
fadeRelatedNodes(d, .05, nodes, links);
}
function onNodeMouseOut(nodes, links, d) {
// Highlight circle
var elm = findElementByNode('circle', d);
elm.style("fill", '#ccc');
// Highlight related nodes
fadeRelatedNodes(d, 1, nodes, links);
}
function onTick(e) {
links.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function onControlZoomClicked(e) {
var elmTarget = $(this)
var scaleProcentile = 0.20;
// Scale
var currentScale = zoom.scale();
var newScale;
if(elmTarget.hasClass('control-zoom-in')) {
newScale = currentScale * (1 + scaleProcentile);
} else {
newScale = currentScale * (1 - scaleProcentile);
}
newScale = Math.max(newScale, 0);
// Translate
var centerTranslate = [
(graphWidth / 2) - (graphWidth * newScale / 2),
(graphHeight / 2) - (graphHeight * newScale / 2)
];
// Store values
zoom
.translate(centerTranslate)
.scale(newScale);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}
function onZoomChanged() {
graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
function onNodeMouseDown(d) {
d.fixed = true;
d3.select(this).classed("sticky", true);
}
render();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment