Search code examples
javascriptd3.jsd3plus

Change network chart dynamically with d3plus.js

I'm working now on visualization of some networks using D3plus library. What I want to do is to show different networks depending on the key of the object, e.g. year. There is a working example with tree_map chart. But I couldn't implement the same for network.

Here is my code:

<!doctype html>
<meta charset="utf-8">

<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>

<div id="viz"></div>

<script>
  var sample_data = [
    {"name": "point1", "year": 1994},
    {"name": "point2", "year": 1994},
    {"name": "point3", "year": 1994},
    {"name": "point4", "year": 1994},
    {"name": "point5", "year": 1994},
    {"name": "point6", "year": 1994},
    {"name": "point7", "year": 1994},
    {"name": "point8", "year": 1994},
    {"name": "point9", "year": 1994},
    {"name": "point10", "year": 1994},
    {"name": "point11", "year": 1994},
    {"name": "point12", "year": 1995}
  ]

  var positions = [
    {"name": "point1", "x": 3, "y": 7},
    {"name": "point2", "x": 2, "y": 6},
    {"name": "point3", "x": 4, "y": 6},
    {"name": "point4", "x": 1, "y": 5.5},
    {"name": "point5", "x": 5, "y": 5.5},
    {"name": "point6", "x": 2, "y": 4},
    {"name": "point7", "x": 4, "y": 4},
    {"name": "point8", "x": 1, "y": 3},
    {"name": "point9", "x": 5, "y": 3},
    {"name": "point10", "x": 2, "y": 1.5},
    {"name": "point11", "x": 4, "y": 1.5},
    {"name": "point12", "x": 2, "y": 7}
  ]

  var connections = []

  var visualization = d3plus.viz()
    .container("#viz")
    .type("network")
    .data(sample_data)   
    .nodes(positions)
    .edges(connections)
    .id("name")
    .time({"value": "year", "solo": 1994})
    .draw()

</script>

I need to show different nodes on click at the timeline, so that by choosing 1995 only "point12" node should be shown.

JSBin example

NOTE: what I have found also is an opened issue, but maybe this functionality was already implemented since that time.

Solution

  • It's possible to listen to the event triggered by the timeline and run custom code when the year range changes. Here is a re-interpretation of something in a post from the Google Group for D3plus:

    visualization.time({"solo": {
    "callback": function(timeline_range) {

        // update the nodes/edges
        visualization.nodes(new_nodes).edges(new_edges).draw();

    }
}});