Skip to content

Instantly share code, notes, and snippets.

@DaveWelling

DaveWelling/_.md

Created July 12, 2014 03:07
Show Gist options
  • Save DaveWelling/6266997441fd6fd95741 to your computer and use it in GitHub Desktop.
Save DaveWelling/6266997441fd6fd95741 to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
_.md
Raw
config.json
{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"node1.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nodeDiagram":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nodeDiagram.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}
Raw
inlet.js
var svg = d3.select("svg")
var stamp1 = tributary.node1.Node1.Stamp;
var stamp2 = tributary.node1.Node2.Stamp;
function createNodeDiagram(stamp) {
var g = svg.append("g");
nodeChart = d3.ItcNodeGraph.itcNode();
nodeChart.stamp(stamp);
nodeChart.width(60);
nodeChart.heightOfStampValues(5);
nodeChart(g);
return g;
}
createNodeDiagram(stamp1)
var d2 = createNodeDiagram(stamp2);
d2.attr("transform", "translate(45, 25)");
var force = d3.layout.force()
.gravity(0.05)
.distance(100)
.charge(-100)
.size([500, 500]);
var links = [{source: 1, target: 0}];
force
.nodes(tributary.node1)
.links(links)
.start();
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.classed("link", true)
.attr({
"stroke": "#ccc"
});
var node = svg.selectAll(".node")
.data(tributary.node1)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
Raw
node1.json
{
"Node1": {
"Stamp": {
"Event": {
"Left": {
"Left": null,
"Right": null,
"Value": 2,
"IsLeaf": true
},
"Right": {
"Left": null,
"Right": null,
"Value": 0,
"IsLeaf": true
},
"Value": 1,
"IsLeaf": false
},
"Id": {
"IsLeaf": false,
"Value": 0,
"Left": {
"IsLeaf": true,
"Value": 0,
"Left": null,
"Right": null
},
"Right": {
"IsLeaf": false,
"Value": 0,
"Left": {
"IsLeaf": true,
"Value": 1,
"Left": null,
"Right": null
},
"Right": {
"IsLeaf": true,
"Value": 0,
"Left": null,
"Right": null
}
}
}
},
"SomeValue0": null
},
"Node2": {
"Stamp": {
"Event": {
"Left": null,
"Right": null,
"Value": 0,
"IsLeaf": true
},
"Id": {
"IsLeaf": false,
"Value": 0,
"Left": {
"IsLeaf": true,
"Value": 0,
"Left": null,
"Right": null
},
"Right": {
"IsLeaf": false,
"Value": 0,
"Left": {
"IsLeaf": true,
"Value": 0,
"Left": null,
"Right": null
},
"Right": {
"IsLeaf": true,
"Value": 1,
"Left": null,
"Right": null
}
}
}
},
"SomeValue0": null
}
}
Raw
nodeDiagram.js
/// <reference path="../lib/d3.v3.min.js" />
d3.ItcNodeGraph = d3.ItcNodeGraph || {};
d3.ItcNodeGraph.itcNode = function () {
var stamp;
var height;
var chartWidth;
var heightUnitPixels = 10;
var chartX = 20;
var chartY = 0;
var g;
function chart(group) {
g = group;
update();
}
function update() {
g.append("rect")
.attr({
height: 1,
width: chartWidth,
x: chartX,
y: chartY,
fill: "#5325b0"
});
// ID
drawId([stamp.Id], chartWidth, chartX);
// Event
drawEvent(stamp.Event, chartWidth, chartY + heightUnitPixels);
}
chart.update = update;
chart.stamp = function (value) {
if (!arguments.length) return stamp;
stamp = value;
return chart;
};
chart.height = function (value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.width = function (value) {
if (!arguments.length) return chartWidth;
chartWidth = value;
return chart;
};
chart.heightOfStampValues = function (value) {
if (!arguments.length) return heightUnitPixels;
heightUnitPixels = value;
return chart;
};
function drawEvent(event, startingWidth, startingY) {
var nesting = 0;
drawValue(event, chartX, startingY, chartWidth);
function drawValue(innerEvent, innerStartingX, innerStartingY, innerWidth) {
nesting++;
var valueBar = g.append('rect').classed('eventBar' + nesting, true);
var innerBarHeight = innerEvent.Value * heightUnitPixels;
valueBar.attr({
x: innerStartingX,
y: innerStartingY,
width: innerWidth,
height: innerBarHeight,
fill: "#5325b0",
stroke: "#000000"
});
if (innerEvent.Left && innerEvent.Left.Value > 0) {
drawValue(innerEvent.Left, innerStartingX, innerStartingY + innerBarHeight, innerWidth / 2);
}
if (innerEvent.Right && innerEvent.Right.Value > 0) {
drawValue(innerEvent.Right, innerStartingX + innerWidth / 2, innerStartingY + innerBarHeight, innerWidth / 2);
}
}
}
function drawId(id, startingWidth, startingX) {
var nesting = 0;
innerDrawId(id, startingWidth, startingX);
function innerDrawId(innerId, innerStartingWidth, innerStartingX) {
nesting++;
//console.log(nesting);
var idBars = g.selectAll('rect.idBar' + nesting).data(innerId);
idBars.enter().append('rect').classed('idBar' + nesting, true);
idBars.attr({
x: innerStartingX,
y: chartY,
fill: function (d) {
return ((d && d.Value > 0) ? "#7fdfff" : "#fffffe");
},
stroke: "#000000",
height: heightUnitPixels,
width: function (d) {
var barWidth;
if (d.IsLeaf) {
//console.log('nesting:' + nesting + ' | w1 | barWidth:' + innerStartingWidth + ' | X:' + innerStartingX + ' | data: (' + d.IsLeaf + ',' + d.Value + ',' + (d.Left ? d.Left.Value : 'null') + ',' + (d.Right ? d.Right.Value : 'null') + ')');
return innerStartingWidth;
}
if ((d.Left) && (d.Right)) {
barWidth = innerStartingWidth / 3;
//console.log('nesting:' + nesting + ' | w2 | barWidth:' + barWidth + ' | X:' + innerStartingX + ' | data: (' + d.IsLeaf + ',' + d.Value + ',' + (d.Left ? d.Left.Value : 'null') + ',' + (d.Right ? d.Right.Value : 'null') + ')');
innerDrawId([d.Left], barWidth, innerStartingX + barWidth);
innerDrawId([d.Right], barWidth, innerStartingX + barWidth + barWidth);
return barWidth;
}
barWidth = innerStartingWidth / 2;
//console.log('nesting:' + nesting + ' | w3 | barWidth:' + barWidth + ' | X:' + innerStartingX + ' | data: (' + d.IsLeaf + ',' + d.Value + ',' + (d.Left ? d.Left.Value : 'null') + ',' + (d.Right ? d.Right.Value : 'null') + ')');
if (d.Left) {
innerDrawId(d.Left, barWidth, innerStartingX + barWidth);
} else {
innerDrawId(d.Right, barWidth, innerStartingX + barWidth);
}
return barWidth;
}
});
}
}
return chart;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment