So I've been using D3.js to make display information from a Facebook network, and the nodes in the network represent the different people in the group. I recently started dealing with centrality and wanted some nodes to be different in color so that they can stand out.
In my JSON file the nodes are represented as so:
{"nodes":[{"id":"10066","group":1},{"id":"10072","group":2},{"id":"10075","group":1},{"id":"10077","group":1},{"id":"10093","group":1},{"id":"10114","group":2}],
The "group 1" nodes are supposed to be blue, while the "group 2" nodes are supposed to be orange. For most of the graphs it's fine, but for some graphs the colors are switched. Is there any way to keep the colors consistant with the group?
Here is the code for when I build the nodes:
//sets up the nodes
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 10)
.attr("fill", function (d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
Oh and the color scale:
var color = d3.scaleOrdinal(d3.schemeCategory10);
This is what ALL of the networks should look like:
But some of them end up like this:
If you need the entire code, or more examples go to: https://github.com/AnimNations/Biomed-Research-Undergrad

