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://ift.tt/1CDhTJn"></script>
<script src="http://ift.tt/1MRqRps"></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.
NOTE: what I have found also is an opened issue, but maybe this functionality was already implemented since that time.
Aucun commentaire:
Enregistrer un commentaire