red_grape 0.0.12 → 0.0.13
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -1
- data/bin/juicer +23 -5
- data/bin/redgrape +2 -2
- data/bin/trellis +3 -3
- data/lib/red_grape/element.rb +4 -0
- data/lib/red_grape/graph.rb +4 -3
- data/lib/red_grape/graph_store.rb +29 -0
- data/lib/red_grape/pipe/base.rb +2 -4
- data/lib/red_grape/pipe/context.rb +72 -22
- data/lib/red_grape/pipe/order_pipe.rb +12 -0
- data/lib/red_grape/pipe/{paths_pipe.rb → path_pipe.rb} +12 -3
- data/lib/red_grape/pipe/scatter_pipe.rb +1 -1
- data/lib/red_grape/pipe/select_pipe.rb +8 -1
- data/lib/red_grape/tools/irg.rb +2 -2
- data/lib/red_grape/tools/{graph_store.rb → trellis.rb} +2 -21
- data/lib/red_grape.rb +4 -2
- data/public/cellar/graph.html +220 -0
- data/public/cellar/index.html +78 -0
- data/public/cellar/vertex.html +103 -0
- data/public/js/d3.v2.js +9387 -0
- data/public/js/jquery-1.7.2.min.js +4 -0
- data/test/test_graph_store.rb +35 -0
- data/test/test_on_the_nature_of_pipes.rb +1 -2
- data/test/test_order_pipe.rb +13 -0
- data/test/test_select_pipe.rb +9 -0
- data/test/test_traversal_patterns.rb +31 -31
- metadata +17 -7
- data/lib/red_grape/path_group.rb +0 -12
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<script src="/js/jquery-1.7.2.min.js"></script>
|
|
4
|
+
<script>
|
|
5
|
+
$(function() {
|
|
6
|
+
function setGraph(graphId) {
|
|
7
|
+
if (graphId) {
|
|
8
|
+
graphs.val(graphId);
|
|
9
|
+
$('iframe').attr('src', '/cellar/graph.html#' + graphId);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
var iframeHeight = $('body').height() - $('header').height();
|
|
14
|
+
$('iframe').height(iframeHeight);
|
|
15
|
+
|
|
16
|
+
var graphs = $('#graphs');
|
|
17
|
+
graphs.change(function(evt) {
|
|
18
|
+
setGraph(graphs.val());
|
|
19
|
+
});
|
|
20
|
+
$.get(
|
|
21
|
+
'/graphs',
|
|
22
|
+
function(data) {
|
|
23
|
+
data = eval('(' + data + ')');
|
|
24
|
+
$.each(data.graphs, function(i, graph) {
|
|
25
|
+
graphs.append($('<option value="' + graph + '">' + graph + '</option>'));
|
|
26
|
+
});
|
|
27
|
+
setGraph(data.graphs[0]);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
32
|
+
<style>
|
|
33
|
+
body {
|
|
34
|
+
margin:0;
|
|
35
|
+
padding:0;
|
|
36
|
+
}
|
|
37
|
+
header {
|
|
38
|
+
margin:0;
|
|
39
|
+
width:100%;
|
|
40
|
+
background-color:black;
|
|
41
|
+
box-shadow: 0px 2px 3px #888;
|
|
42
|
+
}
|
|
43
|
+
header h1 {
|
|
44
|
+
display:inline;
|
|
45
|
+
color:white;
|
|
46
|
+
margin-left:10px;
|
|
47
|
+
font-size:1em;
|
|
48
|
+
font-weight:normal;
|
|
49
|
+
}
|
|
50
|
+
header h1 a {
|
|
51
|
+
text-decoration:none;
|
|
52
|
+
color:white;
|
|
53
|
+
}
|
|
54
|
+
header select {
|
|
55
|
+
position:absolute;
|
|
56
|
+
right:10px;
|
|
57
|
+
}
|
|
58
|
+
iframe {
|
|
59
|
+
width:100%;
|
|
60
|
+
height:500px;
|
|
61
|
+
border:none;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
<header>
|
|
67
|
+
<h1>
|
|
68
|
+
<a href="/cellar/index.html">The Juice Cellar: a Graph Viewer</a>
|
|
69
|
+
</h1>
|
|
70
|
+
<select id="graphs">
|
|
71
|
+
<option>[Change a Graph]</option>
|
|
72
|
+
</select>
|
|
73
|
+
</header>
|
|
74
|
+
<section>
|
|
75
|
+
<iframe name="graph"></iframe>
|
|
76
|
+
</seciton>
|
|
77
|
+
</body>
|
|
78
|
+
</html>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
5
|
+
<title>Flare Dendrogram</title>
|
|
6
|
+
<!--script type='text/javascript' src='/js/d3.v3.js'></script-->
|
|
7
|
+
<script type='text/javascript' src='/js/d3.v2.js'></script>
|
|
8
|
+
<style type='text/css'>
|
|
9
|
+
.node circle {
|
|
10
|
+
fill: #fff;
|
|
11
|
+
stroke: steelblue;
|
|
12
|
+
stroke-width: 1.5px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.node {
|
|
16
|
+
font: 10px sans-serif;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.link {
|
|
20
|
+
fill: none;
|
|
21
|
+
stroke: #ccc;
|
|
22
|
+
stroke-width: 1.5px;
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<div id="chart"></div>
|
|
28
|
+
<script type='text/javascript'>
|
|
29
|
+
var json = {
|
|
30
|
+
"name":"node1",
|
|
31
|
+
"children":[
|
|
32
|
+
{
|
|
33
|
+
"name":"node2",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name":"node3",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name":"node4",
|
|
40
|
+
"children":[
|
|
41
|
+
{
|
|
42
|
+
"name":"node3",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name":"node5"
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
};
|
|
51
|
+
/*
|
|
52
|
+
var node1 = { "name":"node1" };
|
|
53
|
+
var node2 = { "name":"node2" };
|
|
54
|
+
var node3 = { "name":"node3" };
|
|
55
|
+
var node4 = { "name":"node4" };
|
|
56
|
+
var node5 = { "name":"node5" };
|
|
57
|
+
node1.children = [ node2, node3, node4 ];
|
|
58
|
+
node3.children = [ node3, node5 ];
|
|
59
|
+
var json = node1;
|
|
60
|
+
*/
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
var radius = 960 / 2;
|
|
64
|
+
|
|
65
|
+
var cluster = d3.layout.cluster()
|
|
66
|
+
.size([360, radius - 120]);
|
|
67
|
+
cluster.sort(function(a, b) { console.log(a.name, b.name); return d3.ascending(a.name, b.name)});
|
|
68
|
+
|
|
69
|
+
var diagonal = d3.svg.diagonal.radial()
|
|
70
|
+
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
|
|
71
|
+
|
|
72
|
+
var vis = d3.select("#chart").append("svg")
|
|
73
|
+
.attr("width", radius * 2)
|
|
74
|
+
.attr("height", radius * 2)
|
|
75
|
+
.append("g")
|
|
76
|
+
.attr("transform", "translate(" + radius + "," + radius + ")");
|
|
77
|
+
|
|
78
|
+
var nodes = cluster.nodes(json);
|
|
79
|
+
|
|
80
|
+
var link = vis.selectAll("path.link")
|
|
81
|
+
.data(cluster.links(nodes))
|
|
82
|
+
.enter().append("path")
|
|
83
|
+
.attr("class", "link")
|
|
84
|
+
.attr("d", diagonal);
|
|
85
|
+
|
|
86
|
+
var node = vis.selectAll("g.node")
|
|
87
|
+
.data(nodes)
|
|
88
|
+
.enter().append("g")
|
|
89
|
+
.attr("class", "node")
|
|
90
|
+
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
|
|
91
|
+
|
|
92
|
+
node.append("circle")
|
|
93
|
+
.attr("r", 4.5);
|
|
94
|
+
|
|
95
|
+
node.append("text")
|
|
96
|
+
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
|
|
97
|
+
.attr("dy", ".31em")
|
|
98
|
+
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
|
|
99
|
+
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
|
|
100
|
+
.text(function(d) { return d.name; });
|
|
101
|
+
</script>
|
|
102
|
+
</body>
|
|
103
|
+
</html>
|