I adapt the scatterplot matrix designed by MBostock (see here) to my data, as you can see in this working fiddle : http://jsfiddle.net/UYqmP/
As you can see in this code, my data have this json form :
var d = ' [{"gtheta1":0.9747193937107533,"greduc-contagion":0.3775906327152618,"gtheta2":0.9377611038894604,"medOutTrafficReduction":3.0805087784299356,"medNumberPeopleInfected":99.87409839935529,"gpcr":1.0}]'
This json take lines of my original csv : [{line1},{line2},etc.]
Brush selection with d3.js permits us to select subset of value graphicaly, so my questions is simple, how can i retrieve lines which correspond to selected circle by user, and how can i display it into a dynamic table under the graphics ?
I create the div
for table, and start to create a tabularfunction()
, but i don't know how to retrieve the data back to selected circle (cannot find the good pointer in the d3 parameters), and how to call this tabularFunction()
tabulate(tab,["gpcr", "greduc-contagion","gtheta1","gtheta2","medNumberPeopleInfected", "medOutTrafficReduction"]) ;
function tabulate(data, columns) {
//Retrieve selected lines from list of circle given by D3 ?
var table = d3.select("#table").append("table").attr("style", "margin-left: 50px"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(data)
.enter()
.append("td")
.text(function(d) { return d.value; });
return table;
}
For the call of this function, i try first to pass data retrieved by brushmove()
into tabulate()
but this is stupid, because at each movement of mouse, all row are added to older row, so i need to remove the previous table before redraw ...
function brushmove(p) {
var e = brush.extent();
var tab = svg.selectAll("circle").classed("hidden", function(d) {
return e[0][0] > d[p.x] || d[p.x] > e[1][0]
|| e[0][4] > d[p.y] || d[p.y] > e[1][5];
});
//tabulate(tab,["gpcr", "greduc-contagion","gtheta1","gtheta2","medNumberPeopleInfected", "medOutTrafficReduction"]) ;
}
UPDATE 1 :
I post an example of selection :
I did a R/Shiny-based app with a (uni-directed) lnik between the user brush and the display of a table. Get the code here
Here's the idea :
function brushend() {
if (brush.empty()){
svg.selectAll(".greyed").classed("greyed", false);
}
var circleStates = d3.select('svg')
.select('g.cell')
.selectAll('circle'[0])
.map(function(d) {return d.className['baseVal']});
Shiny.onInputChange("mydata", circleStates);
}
circleStates is then converted into a TRUE/FALSE vector, and is used as a dataframe filtering vector.
dfFilter <- input$mydata
displayDF <- baseData$df #data sent to d3.js
dfFilter[dfFilter==''] <- TRUE
dfFilter[dfFilter=='greyed'] <- FALSE
return(displayDF[dfFilter == TRUE,, drop=FALSE])