<style>
#slice_interaction_chart_placeholder {
text-align: center;
- margin: -40px 20px 20px 0px;
color:#fff;
position: relative;
height: 100%;
color:red;
background-color: lightyellow;
}
-#sliceEngagementTitle {
- margin-top: -50px;
- margin-left: -40px;
-
+.sliceinteractions_column {
+ display: table-cell;\r
+ padding: 10px;\r
+}
+#interactions_function {
+ width: 125px;
}
</style>
-<h3 id="sliceEngagementTitle"> Involvement between Slices by User Engagement</h3>
+
+<div class="row">
+ <div class="sliceinteractions_column">
+ <select id="interactions_function">
+ <option value="networks">networks</option>
+ <option value="users">users</option>
+ <option value="owner sites">sites</option>
+ <option value="sliver_sites">sliver_sites</option>
+ <option value="sliver_nodes">sliver_nodes</option>
+ </select>
+ </div>
+ <div class="sliceinteractions_column">
+ <h3 id="sliceEngagementTitle">Slice Interactions</h3>
+ </div>
+</div>
+
<div id="slice_interaction_chart_placeholder"></div>
<script>
-
- /* d3.json(datasetURL, function(error, matrix) {
-
- if (error) {alert("Error reading file: ", error.statusText); return; }
-
- */
- actualData = [[2, 2, 2, 2, 2, 2, 2, 1, 2, 1],
- [2, 7, 3, 7, 7, 3, 2, 2, 7, 2],
- [2, 3, 4, 3, 4, 2, 2, 2, 3, 2],
- [2, 7, 3, 7, 7, 3, 2, 2, 7, 2],
- [2, 7, 4, 7, 15, 3, 2, 6, 7, 6],
- [2, 3, 2, 3, 3, 3, 2, 1, 3, 1],
- [2, 2, 2, 2, 2, 2, 2, 1, 2, 1],
- [1, 2, 2, 2, 6, 1, 1, 6, 2, 6],
- [2, 7, 3, 7, 7, 3, 2, 2, 7, 2],
- [1, 2, 2, 2, 6, 1, 1, 6, 2, 6]];
// Chord Diagram for showing Collaboration between users found in an anchor query
// Collaboration View
outerRadius = Math.min(width, height) / 2 - 100,
innerRadius = outerRadius - 18;
-var dataset = "#allinfo";
-//string url for the initial data set
-//would usually be a file path url, here it is the id
-//selector for the <pre> element storing the data
-
//create number formatting functions
var formatPercent = d3.format("%");
var numberWithCommas = d3.format("0,f");
-//create the arc path data generator for the groups
-var arc = d3.svg.arc()
- .innerRadius(innerRadius)
- .outerRadius(outerRadius);
-
-//create the chord path data generator for the chords
-var path = d3.svg.chord()
- .radius(innerRadius);
-
//define the default chord layout parameters
//within a function that returns a new layout object;
//that way, you can create multiple chord layouts
//that are the same except for the data.
function getDefaultLayout() {
return d3.layout.chord()
-// .padding(0.03)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending);
-}
+}
var last_layout; //store layout between updates
-var users = [{"color": "#005586", "name": "Owl"}, {"color": "#6ebe49", "name": "DnsDemux"}, {"color": "orange", "name": "Infrastructure"}, {"color": "#707170", "name": "HyperCache"}, {"color": "#00c4b3", "name": "Syndicate"}, {"color": "#077767", "name": "Hadoop"}, {"color": "dodgerblue", "name": "Stork"}, {"color": "#a79b94", "name": "test2"}, {"color": "#c4e76a", "name": "DnsRedir"}, {"color": "red", "name": "test"}];
-
-/*** Initialize the visualization ***/
-var g = d3.select("#slice_interaction_chart_placeholder").append("svg")
- .attr("width", width)
- .attr("height", height)
- .append("g")
- .attr("id", "circle")
- .attr("transform",
- "translate(" + width / 2 + "," + height / 2 + ")");
-//the entire graphic will be drawn within this <g> element,
-//so all coordinates will be relative to the center of the circle
-
-g.append("circle")
- .attr("r", outerRadius);
-//this circle is set in CSS to be transparent but to respond to mouse events
-//It will ensure that the <g> responds to all mouse events within
-//the area, even after chords are faded out.
-
-/*** Read in the neighbourhoods data and update with initial data matrix ***/
-//normally this would be done with file-reading functions
-//d3.csv and d3.json and callbacks,
-//instead we're using the string-parsing functions
-//d3.csv.parse and JSON.parse, both of which return the data,
-//no callbacks required.
-
-
- updateChords(dataset);
- //call the update method with the default dataset
-
-//} ); //end of d3.csv function
+var g;
+var arc;
+var path;
+
+function init_visualization() {
+ arc = d3.svg.arc()
+ .innerRadius(innerRadius)
+ .outerRadius(outerRadius);
+
+ path = d3.svg.chord()
+ .radius(innerRadius);
+
+
+ /*** Initialize the visualization ***/
+ g = d3.select("#slice_interaction_chart_placeholder").append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("id", "circle")
+ .attr("transform",
+ "translate(" + width / 2 + "," + height / 2 + ")");
+ //the entire graphic will be drawn within this <g> element,
+ //so all coordinates will be relative to the center of the circle
+
+ g.append("circle")
+ .attr("r", outerRadius);
+}
+
+$( document ).ready(function() {
+ init_visualization();
+ $('#interactions_function').change(function() {
+ updateInteractions();
+ });
+ updateInteractions();
+});
+
+function updateInteractions() {
+ $( "#sliceEngagementTitle" ).html("<h3>Loading...</h3>");
+ $.ajax({
+ url : "/admin/sliceinteractions/" + $("#interactions_function :selected").text() + "/",
+ dataType : 'json',
+ type : 'GET',
+ success: function(newData)
+ {
+ $( "#sliceEngagementTitle" ).html("<h3>" + newData["title"] + "</h3>");
+ updateChords(newData["groups"], newData["matrix"], newData["objectName"])
+ }
+ });
+}
/* Create OR update a chord layout from a data matrix */
-function updateChords( datasetURL ) {
-
- /* d3.json(datasetURL, function(error, matrix) {
+function updateChords( users, matrix, objectName ) {
- if (error) {alert("Error reading file: ", error.statusText); return; }
-
- */
- //var matrix = JSON.parse( d3.select(datasetURL).text() );
- var matrix = actualData;
- // instead of d3.json
-
/* Compute chord layout. */
layout = getDefaultLayout(); //create a new layout object
layout.matrix(matrix);
.duration(1500)
.attr("opacity", 0)
.remove(); //remove after transitions are complete
-
+
var newGroups = groupG.enter().append("g")
.attr("class", "group");
//the enter selection is stored in a variable so we can
//Update the (tooltip) title text based on the data
groupG.select("title")
.text(function(d, i) {
- return "Slice (" + users[i].name +
+ return "Slice (" + users[i].name +
") "
;
});
.text(function(d) {
if (users[d.target.index].name !== users[d.source.index].name) {
return [numberWithCommas(d.source.value),
- " users in common between \n",
+ " " + objectName + " in common between \n",
users[d.source.index].name,
" and ",
users[d.target.index].name,
"\n"
- ].join("");
+ ].join("");
//joining an array of many strings is faster than
- //repeated calls to the '+' operator,
+ //repeated calls to the '+' operator,
//and makes for neater code!
- }
+ }
else { //source and target are the same
- return numberWithCommas(d.source.value)
- + " users are only in Slice ("
+ return numberWithCommas(d.source.value)
+ + " " + objectName + " are only in Slice ("
+ users[d.source.index].name + ")";
}
});
chordPaths.classed("fade", false);
});
*/
-
+
last_layout = layout; //save for next update
// }); //end of d3.json
}
else {
//create a zero-width chord object
+/* XXX SMBAKER: the code commented out below was causing an error,
+ so I replaced it with the following code from stacktrace
if (oldLayout) {
var oldGroups = oldLayout.groups().filter(function(group) {
return ( (group.index == d.source.index) ||
//the OR in target is in case source and target are equal
//in the data, in which case only one group will pass the
//filter function
-
+
if (d.source.index != old.source.index ){
//swap source and target to match the new data
old = {
}
}
else old = d;
-
+
var emptyChord = {
source: { startAngle: old.source.startAngle,
endAngle: old.source.startAngle},
target: { startAngle: old.target.startAngle,
endAngle: old.target.startAngle}
};
+ tween = d3.interpolate( emptyChord, d );*/
+
+ //create a zero-width chord object
+ var emptyChord = {\r
+ source: { startAngle: d.source.startAngle,\r
+ endAngle: d.source.startAngle},\r
+ target: { startAngle: d.target.startAngle,\r
+ endAngle: d.target.startAngle}\r
+ };\r
tween = d3.interpolate( emptyChord, d );
}
git://git.onelab.eu / plstackapi.git / blobdiff