I am trying to understand how the .sort() method works.
My implementation should be very simple, using the method:
.sort(function (a, b) {
});
I want to check whether the element is a member of a certain class. If it is, I want it to be put towards the top. Otherwise, it should go to the bottom. What's the pattern?
The sort is on a path group of states from a geojson projection:
d3.json("./data/states.json", function(us) {
mapSvg.selectAll("path")
.data(us.features)
.enter()
.append("path")
.attr("d", path).attr("class",function(d){return "border2 thestates"})
});
}
I want to bring some of the states to the front if they have a class.
The return value of the .sort() function should be as follows (from the documentation):
It should return either a negative, positive, or zero value. If negative, then a should be before b; if positive, then a should be after b; otherwise, a and b are considered equal and the order is arbitrary.
So in your case, it should be something like this:
function(a, b) {
if(a.memberOfClass() && !b.memberOfClass()) {
return -1;
} else if(b.memberOfClass()) {
return 1;
} else {
return 0;
}
}
You can simplify this because true also evaluates to 1:
function(a, b) {
return -a.memberOfClass() + b.memberOfClass();
}
Related
I have g.row elements containing g.cell elements, each containing a rect element. My nested data is bound to g.row and then g.cell. The rect elements access the data bound to g.cell.
At the moment my enter and exit selections add and remove g.cell. It would be more efficient to have them add and remove the rect elements, because g.cell has events bound to it that I need to reassign. But is this possible? I can't see how to get it to work.
I've managed to run cell.exit().selectAll("rect").remove(); which works fine. But cell.enter().selectAll("g.cell").append("rect"); throws an error ("[this code] is not a function"). While cell.enter().append("rect") doesn't append a rect.
Current code on g.cell:
var cell = row.selectAll("g.cell")
.data(function(d){
return d.value.filter(function(p){
if (p[1]=='') {
return horizNodesCopy.indexOf(p[0])!=-1;
} else {
return horizNodesCopy.indexOf(p[0]+' -- '+p[1])!=-1;
}
});
});
var cell2 = cell.enter().append("g")
.attr("class",function(d,i,j){ return "cell cell_"+i; })
.attr('transform',function(d,i,j){
if (d[1]=='') {
return 'translate('+ x(d[0]) +',0)';
} else {
return 'translate('+ x(d[0]+' -- '+d[1]) +',0)';
}
});
addRectangles(cell2,colorScale);
cell.exit().remove();
This feels like it's going to be something obvious :/
I'm not data-viz expert or d3, I have found plenty of examples to how to build brushing and zoom for example Mike.
They all have shown how to filter to the brushed area but I want to achieve to reverse of that effect, how?
Can someone through me ideas how to achieve it?
I don't know why I assumed you meant a bar chart when you linked to an area chart. You can ignore the highlighting section and skip to filtering if you're interested in doing this with line charts. There is no highlighting of line chart, just the brush itself.
Highlighting the bars in reverse
This isn't all that hard, but it's somewhat messy because we replace an undocumented function in the chart. Like most things in dc.js, if there isn't an option, you can usually replace the functionality (or add or change stuff once the chart has rendered/drawn).
Here there's a specific, public function which fades the deselected areas. It's called fadeDeselectedArea. (Actually it both fades and un-fades when the chart is ordinal, but we'll ignore that part.)
The original function looks like this:
_chart.fadeDeselectedArea = function () {
var bars = _chart.chartBodyG().selectAll('rect.bar');
var extent = _chart.brush().extent();
if (_chart.isOrdinal()) {
if (_chart.hasFilter()) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return _chart.hasFilter(d.x);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !_chart.hasFilter(d.x);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
} else {
if (!_chart.brushIsEmpty(extent)) {
var start = extent[0];
var end = extent[1];
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return d.x < start || d.x >= end;
});
} else {
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
}
};
source link
We'll ignore the ordinal part because that's only individual selection, not brushed selection. Here is the reverse of the second part:
spendHistChart.fadeDeselectedArea = function () {
var _chart = this;
var bars = _chart.chartBodyG().selectAll('rect.bar');
var extent = _chart.brush().extent();
// only covering the non-ordinal (ranged brush) case here...
if (!_chart.brushIsEmpty(extent)) {
var start = extent[0];
var end = extent[1];
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return d.x >= start && d.x < end;
});
} else {
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
};
Creating a variable _chart is just to keep the code the same as much as possible. You can see that d.x >= start && d.x < end is exactly the opposite of d.x < start || d.x >= end
Reversing the filtering
We'll need to add a filterHandler to the chart in order to reverse the filtering. Again, we'll base it off the default behavior, but here there's a legitimate customization point so we don't have to replace a function, just supply one:
spendHistChart.filterHandler(function(dimension, filters) {
if(filters.length === 0)
dimension.filter(null);
else {
// assume one RangedFilter but apply in reverse
// this is less efficient than filterRange but it shouldn't
// matter much unless the data is huge
var filter = filters[0];
dimension.filterFunction(function(d) {
return !filter.isFiltered(d);
})
}
});
Again, we cut out the cases we don't care about. There is no reason to be general about something that has a specific purpose and it will only cause maintenance problems. The only two cases we care about are no filter and one range filter.
Here the RangedFilter already supplies a filter function, so we can just call it and not (!) the result. This will be slightly less efficient than the filterRange but crossfilter has no native support for multiple ranges (or the inverse of a range).
That's it! Fiddle here: http://jsfiddle.net/gordonwoodhull/46snsbc2/8/
I've got a Sankey diagram in d3:
http://greencracker.github.io/test/
I'd like both the nodes & the links to sort from biggest at the top to smallest at the bottom.
I've got nodes sorted like I want, by modifying sankey.js like so:
function center(node) {
// return node.y + node.dy / 2;
return 0;}
Just with that modification, it looks perfect on Safari 8.
In Firefox, Chrome, nodes still sort from big to small like I'd like, yay!
But links are sorting from smallest ones at the top to big ones at the bottom.
Where to specify the sort so that all the browsers sort like I want? I would think somewhere in index.html?
Any ideas?
Screenshots here of what I'm after:
http://greencracker.net/?p=2237
You will need to modify the relaxLeftToRight, and relaxRightToLeft functions. Here are the updated functions:
function relaxLeftToRight(alpha) {
nodesByBreadth.forEach(function(nodes, breadth) {
nodes.forEach(function(node) {
if (node.targetLinks.length) {
// Value-weighted average of the y-position of source node centers linked to this node.
// var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
var y = d3.sum(node.targetLinks) ;
node.y += (y - center(node)) * alpha;
}
});
});
function weightedSource(link) {
return (link.source.y + link.sy + link.dy / 2) * link.value;
}
}
function relaxRightToLeft(alpha) {
nodesByBreadth.slice().reverse().forEach(function(nodes) {
nodes.forEach(function(node) {
if (node.sourceLinks.length) {
// Value-weighted average of the y-positions of target nodes linked to this node.
// var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
var y = d3.sum(node.sourceLinks);
node.y += (y - center(node)) * alpha;
}
});
});
function weightedTarget(link) {
return (link.target.y + link.ty + link.dy / 2) * link.value;
}
}
This example will sort by largest to smallest.
use a function like
function ascendingLinkSize(a, b) {
return a.value - b.value;
// return 0;
}
to sort by link size rather than node positions
In the function
function ascendingTargetDepth(a, b) {
return a.target.y + b.target.y;
// return 0;
}
You should have a.target.y - b.target.y; instead.
How to sort data in dc.js chart (like row) - Ascending x Descending
I want to reorder the chart (row/column) by specified attribute (like 'avg' -> ascending)
I'm trying to use ".top()"... but unsuccessfully
Thanks
draft below
jsfiddle -> ewr5Z/2/
You can use the ordering method:
chart.ordering(function(d){ return -d.value })
If you write a custom reduce, you can have more flexibility:
priceDimension = ndx.dimension(function(d) {return d.part_number; });
priceGroup = priceDimension.group().reduce(
function (p, v) {
++p.count;
p.sumPrice += v.price;
p.avgPrice = p.sumPrice/p.count;
return p;
},
function (p, v) {
--p.count;
p.sumPrice -= v.price;
p.avgPrice = p.sumPrice/p.count;
return p;
},
function () {
return { count:0, sumPrice:0, avgPrice};
});
....
chart.ordering(function(d){ return d.value.avgPrice});
If you want the user to be able to change the sort order, you'd need to build a sort button that changes the ordering and rerenders the chart.
I have a network diagram (force-directed graph), a scatterplot, and a table that are all interconnected (see jsFiddle). I have the interconnections working the way I want them for mouseover events. I would like to modify my code so that when I mouseover a node in the network diagram, not only is the moused-over node highlighted (and its connections in the scatterplot and table), but its immediate neighbor nodes are also highlighted (as well as their connections in the scatterplot and table).
I looked at the information in Highlight selected node, its links, and its children in a D3 force directed graph for help. Somewhere along the way (not exactly sure where) I found an example of a function that helps define the connected nodes, isConnected().
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
I'd like to incorporate this function into my mouseover events, perhaps with an if() statement, so that I can do all of the "highlighting" that I want. But, I'm new to D3 and js and am not sure how to set it up.
Below is the snippet of code (from the jsFiddle) that I would like to modify. I would appreciate any suggestions or pointers to other examples.
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", function(d) { return "node " + d.name + " " + d.location; })
.call(force.drag)
.on("mouseover", function(d) {
// I would like to insert an if statement to do all of these things to the connected nodes
// if(isConnected(d, o)) {
d3.select(this).select("circle").style("stroke-width", 6);
d3.select(this).select("circle").style("stroke", "orange");
d3.select(this).select("text").style("font", "20px sans-serif");
d3.selectAll("rect." + d.location).style("stroke-width", 6);
d3.selectAll("rect." + d.location).style("stroke", "orange");
d3.selectAll("text." + d.location).style("font", "20px sans-serif");
d3.selectAll("tr." + d.name).style("background-color", "orange");
//}
})
.on("mouseout", function(d) {
// if(isConnected(d, o)) {
d3.select(this).select("circle").style("stroke-width", 1.5);
d3.select(this).select("circle").style("stroke", "gray");
d3.select(this).select("text").style("font", "12px sans-serif");
d3.selectAll("rect." + d.location).style("stroke-width", 1.5);
d3.selectAll("rect." + d.location).style("stroke", "gray");
d3.selectAll("text." + d.location).style("font", "12px sans-serif");
d3.selectAll("tr." + d.name).style("background-color", "white");
//}
});
In another scenario I would put my visual objects into a graph data structure and navigate that to efficiently update the appropriate items. But this is d3, but so we will do the same thing but instead of a graph data structure that we create we will use d3 selections (which can be like graphs but for this they will look a lot more like arrays). Algorithmically this approach will not be as efficient, but our graphs are small.
So working backwards I will want a selection that includes only the picked node's neighboring
nodes. I will do this by selecting all the circles and then using the d3 selection filter method to reduce that to only those circles that are neighbors.
Of course then I need the list of neighbors, but a few nice js array methods make short work of that. The final relevant code (in mouseover) is not even that long - but I've added a bunch of comments:
// Figure out the neighboring node id's with brute strength because the graph is small
var nodeNeighbors = graph.links.filter(function(link) {
// Filter the list of links to only those links that have our target
// node as a source or target
return link.source.index === d.index || link.target.index === d.index;})
.map(function(link) {
// Map the list of links to a simple array of the neighboring indices - this is
// technically not required but makes the code below simpler because we can use
// indexOf instead of iterating and searching ourselves.
return link.source.index === d.index ? link.target.index : link.source.index; });
// Reset all circles - we will do this in mouseout also
svg.selectAll('circle').style('stroke', 'gray');
// now we select the neighboring circles and apply whatever style we want.
// Note that we could also filter a selection of links in this way if we want to
// Highlight those as well
svg.selectAll('circle').filter(function(node) {
// I filter the selection of all circles to only those that hold a node with an
// index in my listg of neighbors
return nodeNeighbors.indexOf(node.index) > -1;
})
.style('stroke', 'orange');
You can also try the fiddle
I think the important d3 concept relevant here is that when you associate data with an element (usually using the data() or datum() methods on selections) then that data sticks with that element and any future selections will always use it.
To link other aspects you can pull those attributes in a similar way and link them through d3. For example for the location rectangles you could add to mouseover:
var nodeLocations = graph.links.filter(function(link) {
return link.source.index === d.index || link.target.index === d.index;})
.map(function(link) {
return link.source.index === d.index ? link.target.location : link.source.location; });
d3.selectAll("rect").filter(function(node) { return nodeLocations.indexOf(node.location) > -1; }) .style("stroke", "cyan");
This thing I built does that with the Ego Network feature:
https://gist.github.com/emeeks/4588962
Add a .on("mouseover", findEgo) to your nodes and the following should work, as long as you have some kind of identifying uid attribute, which you could generate when you load the nodes if one isn't handy. It's a bit of overkill, since it allows for n-degree ego networks, and creates an aggregated table for other network analysis functions, but the basic functionality will give you what you want and you or other users might find that aspect useful:
function findEgo(d) {
var computedEgoArray = findEgoNetwork(d.id, 1, false,"individual");
d3.selectAll("circle.node").style("fill", function(p) {return p.id == d.id ? "purple" : computedEgoArray.indexOf(p.id) > -1 ? "blue" : "pink"})
}
function findEgoNetwork(searchNode, egoNetworkDegree, isDirected, searchType) {
var egoNetwork = {};
for (x in nodes) {
if (nodes[x].id == searchNode || searchType == "aggregate") {
egoNetwork[nodes[x].id] = [nodes[x].id];
var z = 0;
while (z < egoNetworkDegree) {
var thisEgoRing = egoNetwork[nodes[x].id].slice(0);
for (y in links) {
if (thisEgoRing.indexOf(links[y].source.id) > -1 && thisEgoRing.indexOf(links[y].target.id) == -1) {
egoNetwork[nodes[x].id].push(links[y].target.id)
}
else if (isDirected == false && thisEgoRing.indexOf(links[y].source.id) == -1 && thisEgoRing.indexOf(links[y].target.id) > -1) {
egoNetwork[nodes[x].id].push(links[y].source.id)
}
}
z++;
}
}
}
if (searchType == "aggregate") {
//if it's checking the entire network, pass back the entire object of arrays
return egoNetwork;
}
else {
//Otherwise only give back the array that corresponds with the search node
return egoNetwork[searchNode];
}
}