D3.ipynb
1357 lines
| 53.7 KiB
| text/plain
|
TextLexer
In [1]:
from __future__ import print_function # py 2.7 compat
import networkx as nx
This notebook demonstrates how NetworkX and D3 can be married using custom widget code.
Hooking NetworkX Graphs¶
NetworkX graphs do not have events that can be listened to. In order to watch the NetworkX graph object for changes a custom eventful graph object must be created. The custom eventful graph object will inherit from the base graph object and use special eventful dictionaries instead of standard Python dict instances. Because NetworkX nests dictionaries inside dictionaries, it's important that the eventful dictionary is capable of recognizing when a dictionary value is set to another dictionary instance. When this happens, the eventful dictionary needs to also make the new dictionary an eventful dictionary. This allows the eventful dictionary to listen to changes made to dictionaries within dictionaries.
In [2]:
class EventfulDict(dict):
def __init__(self, *args, **kwargs):
self._add_callbacks = []
self._del_callbacks = []
self._set_callbacks = []
dict.__init__(self, *args, **kwargs)
def on_add(self, callback, remove=False):
self._register_callback(self._add_callbacks, callback, remove)
def on_del(self, callback, remove=False):
self._register_callback(self._del_callbacks, callback, remove)
def on_set(self, callback, remove=False):
self._register_callback(self._set_callbacks, callback, remove)
def _register_callback(self, callback_list, callback, remove=False):
if callable(callback):
if remove and callback in callback_list:
callback_list.remove(callback)
elif not remove and not callback in callback_list:
callback_list.append(callback)
else:
raise Exception('Callback must be callable.')
def _handle_add(self, key, value):
self._try_callbacks(self._add_callbacks, key, value)
def _handle_del(self, key):
self._try_callbacks(self._del_callbacks, key)
def _handle_set(self, key, value):
self._try_callbacks(self._set_callbacks, key, value)
def _try_callbacks(self, callback_list, *pargs, **kwargs):
for callback in callback_list:
callback(*pargs, **kwargs)
def __setitem__(self, key, value):
return_val = None
exists = False
if key in self:
exists = True
# If the user sets the property to a new dict, make the dict
# eventful and listen to the changes of it ONLY if it is not
# already eventful. Any modification to this new dict will
# fire a set event of the parent dict.
if isinstance(value, dict) and not isinstance(value, EventfulDict):
new_dict = EventfulDict(value)
def handle_change(*pargs, **kwargs):
self._try_callbacks(self._set_callbacks, key, dict.__getitem__(self, key))
new_dict.on_add(handle_change)
new_dict.on_del(handle_change)
new_dict.on_set(handle_change)
return_val = dict.__setitem__(self, key, new_dict)
else:
return_val = dict.__setitem__(self, key, value)
if exists:
self._handle_set(key, value)
else:
self._handle_add(key, value)
return return_val
def __delitem__(self, key):
return_val = dict.__delitem__(self, key)
self._handle_del(key)
return return_val
def pop(self, key):
return_val = dict.pop(self, key)
if key in self:
self._handle_del(key)
return return_val
def popitem(self):
popped = dict.popitem(self)
if popped is not None and popped[0] is not None:
self._handle_del(popped[0])
return popped
def update(self, other_dict):
for (key, value) in other_dict.items():
self[key] = value
def clear(self):
for key in list(self.keys()):
del self[key]
Override the NetworkX Graph object to make an eventful graph.
In [3]:
class EventfulGraph(nx.Graph):
def __init__(self, *pargs, **kwargs):
"""Initialize a graph with edges, name, graph attributes."""
super(EventfulGraph, self).__init__(*pargs, **kwargs)
self.graph = EventfulDict(self.graph)
self.node = EventfulDict(self.node)
self.adj = EventfulDict(self.adj)
To make sure that the eventful graph works, create a new graph and log the dictionary events raised.
In [4]:
def echo_dict_events(eventful_dict, prefix=''):
def key_add(key, value):
print(prefix + 'add (%s, %s)' % (key, str(value)))
def key_set(key, value):
print(prefix + 'set (%s, %s)' % (key, str(value)))
def key_del(key):
print(prefix + 'del %s' % key)
eventful_dict.on_add(key_add)
eventful_dict.on_set(key_set)
eventful_dict.on_del(key_del)
def echo_graph_events(eventful_graph):
for key in ['graph', 'node', 'adj']:
echo_dict_events(getattr(eventful_graph, key), prefix=key+' ')
In [5]:
G = EventfulGraph()
echo_graph_events(G)
G.add_node('hello')
G.add_node('goodbye', fill="red")
G.add_edges_from([(1,2),(1,3), (1,'goodbye')], stroke="lime")
In [6]:
G.adj
Out[6]:
In [7]:
G.node
Out[7]:
D3 Widget¶
The D3 widget will blindly port all of the dictionary events over custom widget messages.
In [8]:
from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
In [9]:
# Import the base Widget class and the traitlets Unicode class.
from IPython.html.widgets import Widget
from IPython.utils.traitlets import Unicode, Int
# Define our ForceDirectedGraphWidget and its target model and default view.
class ForceDirectedGraphWidget(Widget):
target_name = Unicode('ForceDirectedGraphModel')
default_view_name = Unicode('D3ForceDirectedGraphView')
_keys = ['width', 'height']
width = Int(400)
height = Int(300)
def __init__(self, eventful_graph, *pargs, **kwargs):
Widget.__init__(self, *pargs, **kwargs)
self._eventful_graph = eventful_graph
self._send_dict_changes(eventful_graph.graph, 'graph')
self._send_dict_changes(eventful_graph.node, 'node')
self._send_dict_changes(eventful_graph.adj, 'adj')
def _repr_widget_(self, *pargs, **kwargs):
# Show the widget, then send the current state
Widget._repr_widget_(self, *pargs, **kwargs)
for (key, value) in self._eventful_graph.graph.items():
self.send({'dict': 'graph', 'action': 'add', 'key': key, 'value': value})
for (key, value) in self._eventful_graph.node.items():
self.send({'dict': 'node', 'action': 'add', 'key': key, 'value': value})
for (key, value) in self._eventful_graph.adj.items():
self.send({'dict': 'adj', 'action': 'add', 'key': key, 'value': value})
def _send_dict_changes(self, eventful_dict, dict_name):
def key_add(key, value):
self.send({'dict': dict_name, 'action': 'add', 'key': key, 'value': value})
def key_set(key, value):
self.send({'dict': dict_name, 'action': 'set', 'key': key, 'value': value})
def key_del(key):
self.send({'dict': dict_name, 'action': 'del', 'key': key})
eventful_dict.on_add(key_add)
eventful_dict.on_set(key_set)
eventful_dict.on_del(key_del)
The front-end listens to the dictionary events and keeps the D3 control in sync with the dictionary in the back-end.
In [10]:
%%javascript
require(["http://d3js.org/d3.v3.min.js", "notebook/js/widget"], function(){
// Define the ForceDirectedGraphModel and register it with the widget manager.
var ForceDirectedGraphModel = IPython.WidgetModel.extend({});
IPython.widget_manager.register_widget_model('ForceDirectedGraphModel', ForceDirectedGraphModel);
// Define the D3ForceDirectedGraphView
var D3ForceDirectedGraphView = IPython.WidgetView.extend({
render: function(){
this.guid = 'd3force' + IPython.utils.uuid();
this.setElement($('<div />', {id: this.guid}));
this.model.on_msg($.proxy(this.handle_msg, this));
this.has_drawn = false;
},
try_add_node: function(id){
var index = this.find_node(id);
if (index == -1) {
var node = {id: id};
this.nodes.push(node);
return node;
} else {
return this.nodes[index];
}
},
update_node: function(node, attributes) {
if (node !== null) {
for (var key in attributes) {
node[key] = attributes[key];
}
this._update_node(d3.select('#' + this.guid + node.id));
}
},
remove_node: function(id){
this.remove_links_to(id);
var found_index = this.find_node(id);
if (found_index>=0) {
this.nodes.splice(found_index, 1);
}
},
find_node: function(id){
var found_index = -1;
for (var index in this.nodes) {
if (this.nodes[index].id == id) {
found_index = index;
break;
}
}
return found_index;
},
find_link: function(source_id, target_id){
for (var index in this.links) {
if (this.links[index].source.id == source_id && this.links[index].target.id == target_id) {
return index;
}
}
return -1;
},
try_add_link: function(source_id, target_id){
var index = this.find_link(source_id, target_id);
if (index == -1) {
var source_node = this.try_add_node(source_id);
var target_node = this.try_add_node(target_id);
var new_link = {source: source_node, target: target_node};
this.links.push(new_link);
return new_link;
} else {
return this.links[index]
}
},
update_link: function(link, attributes){
if (link != null) {
for (var key in attributes) {
link[key] = attributes[key];
}
this._update_edge(d3.select('#' + this.guid + link.source.id + "-" + link.target.id));
}
},
remove_links: function(source_id){
var found_indicies = [];
for (var index in this.links) {
if (this.links[index].source.id == source_id) {
found_indicies.push(index);
}
}
found_indicies.reverse();
for (var index in found_indicies) {
this.links.splice(index, 1);
};
},
remove_links_to: function(id){
var found_indicies = [];
for (var index in this.links) {
if (this.links[index].source.id == id || this.links[index].target.id == id) {
found_indicies.push(index);
}
}
found_indicies.reverse();
for (var index in found_indicies) {
this.links.splice(index, 1);
};
},
handle_msg: function(content){
var dict = content.dict;
var action = content.action;
var key = content.key;
if (dict=='node') {
if (action=='add' || action=='set') {
this.update_node(this.try_add_node(key), content.value)
} else if (action=='del') {
this.remove_node(key);
}
} else if (dict=='adj') {
if (action=='add' || action=='set') {
var links = content.value;
for (var target_id in links) {
this.update_link(this.try_add_link(key, target_id), links[target_id]);
}
} else if (action=='del') {
this.remove_links(key);
}
}
this.start();
},
start: function() {
var node = this.svg.selectAll(".node"),
link = this.svg.selectAll(".link");
var link = link.data(this.force.links(), function(d) { return d.source.id + "-" + d.target.id; });
this._update_edge(link.enter().insert("line", ".node"))
link.exit().remove();
var node = node.data(this.force.nodes(), function(d) { return d.id;});
var that = this;
this._update_node(node.enter().append("circle"));
node.exit().remove();
this.force.start();
},
_update_node: function(node) {
var that = this;
node
.attr("id", function(d) { return that.guid + d.id; })
.attr("class", function(d) { return "node " + d.id; })
.attr("r", function(d) {
if (d.r == undefined) {
return 8;
} else {
return d.r;
}
})
.style("fill", function(d) {
if (d.fill == undefined) {
return that.color(d.group);
} else {
return d.fill;
}
})
.style("stroke", function(d) {
if (d.stroke == undefined) {
return "#FFF";
} else {
return d.stroke;
}
})
.style("stroke-width", function(d) {
if (d.strokewidth == undefined) {
return "#FFF";
} else {
return d.strokewidth;
}
})
.call(this.force.drag);
},
_update_edge: function(edge) {
var that = this;
edge
.attr("id", function(d) { return that.guid + d.source.id + "-" + d.target.id; })
.attr("class", "link")
.style("stroke-width", function(d) {
if (d.strokewidth == undefined) {
return "1.5px";
} else {
return d.strokewidth;
}
})
.style('stroke', function(d) {
if (d.stroke == undefined) {
return "#999";
} else {
return d.stroke;
}
});
},
tick: function() {
var node = this.svg.selectAll(".node"),
link = this.svg.selectAll(".link");
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
},
update: function(){
if (!this.has_drawn) {
this.has_drawn = true;
var width = this.model.get('width'),
height = this.model.get('height');
this.color = d3.scale.category20();
this.nodes = [];
this.links = [];
this.force = d3.layout.force()
.nodes(this.nodes)
.links(this.links)
.charge(function (d) {
if (d.charge === undefined) {
return -120;
} else {
return d.charge;
}
})
.linkDistance(function (d) {
if (d.distance === undefined) {
return 40;
} else {
return d.distance;
}
})
.linkStrength(function (d) {
if (d.strength === undefined) {
return 1.0;
} else {
return d.strength;
}
})
.size([width, height])
.on("tick", $.proxy(this.tick, this));
this.svg = d3.select("#" + this.guid).append("svg")
.attr("width", width)
.attr("height", height);
var that = this;
setTimeout(function() {
that.start();
}, 0);
}
return IPython.WidgetView.prototype.update.call(this);
},
});
// Register the D3ForceDirectedGraphView with the widget manager.
IPython.widget_manager.register_widget_view('D3ForceDirectedGraphView', D3ForceDirectedGraphView);
});
Test¶
In [11]:
floating_container = widgets.ContainerWidget(default_view_name='ModalView')
floating_container.description = "Dynamic D3 rendering of a NetworkX graph"
floating_container.button_text = "Render Window"
floating_container.set_css({
'width': '420px',
'height': '350px'}, selector='modal')
G = EventfulGraph()
d3 = ForceDirectedGraphWidget(G, parent=floating_container)
display(floating_container)
The following code creates an animation of some of the plot's properties.
In [12]:
import time
G.add_node(1, fill="red", stroke="black")
time.sleep(1.0)
G.add_node(2, fill="gold", stroke="black")
time.sleep(1.0)
G.add_node(3, fill="green", stroke="black")
time.sleep(1.0)
G.add_edges_from([(1,2),(1,3), (2,3)], stroke="#aaa", strokewidth="1px", distance=200, strength=0.5)
time.sleep(1.0)
G.adj[1][2]['distance'] = 20
time.sleep(1.0)
G.adj[1][3]['distance'] = 20
time.sleep(1.0)
G.adj[2][3]['distance'] = 20
time.sleep(1.0)
G.node[1]['r'] = 16
time.sleep(0.3)
G.node[1]['r'] = 8
G.node[2]['r'] = 16
time.sleep(0.3)
G.node[2]['r'] = 8
G.node[3]['r'] = 16
time.sleep(0.3)
G.node[3]['r'] = 8
G.node[1]['fill'] = 'purple'
time.sleep(0.3)
G.node[1]['fill'] = 'red'
G.node[2]['fill'] = 'purple'
time.sleep(0.3)
G.node[2]['fill'] = 'gold'
G.node[3]['fill'] = 'purple'
time.sleep(0.3)
G.node[3]['fill'] = 'green'
time.sleep(1.0)
G.node.clear()
time.sleep(1.0)
floating_container.close()
Prime Factor Finder¶
Find the prime numbers inside a large integer
In [13]:
def is_int(number):
return int(number) == number
def factor_int(number):
return [i + 1 for i in range(number) if is_int(number / (float(i) + 1.0))]
In [14]:
import time
BACKGROUND = '#F7EBD5'
PARENT_COLOR = '#66635D'
FACTOR_COLOR = '#6CC5C1'
EDGE_COLOR = '#000000'
PRIME_COLOR = '#E54140'
existing_graphs = []
def add_unique_node(graph, value, **kwargs):
index = len(graph.node)
graph.add_node(index, charge=-50, strokewidth=0, value=value, **kwargs)
return index
def plot_primes(graph, number, parent, start_number, delay=0.0):
if delay > 0.0:
time.sleep(delay)
factors = factor_int(number)
if len(factors) > 2:
for factor in factors:
if factor != number:
factor_size = max(float(factor) / start_number * 30.0,3.0)
parent_factor_size = max(float(number) / start_number * 30.0,3.0)
index = add_unique_node(graph, number, fill=FACTOR_COLOR, r='%.2fpx' % factor_size)
graph.add_edge(index, parent, distance=parent_factor_size+factor_size, stroke=EDGE_COLOR)
plot_primes(graph, factor, parent=index, start_number=start_number, delay=delay)
else:
# Prime, set parent color to prime color.
graph.node[parent]['fill'] = PRIME_COLOR
def graph_primes(number, delay):
if len(existing_graphs) > 0:
for graph in existing_graphs:
graph.close()
del existing_graphs[:]
floating_container = widgets.ContainerWidget(default_view_name='ModalView')
floating_container.description = "Factors of %d" % number
floating_container.button_text = str(number)
floating_container.set_css({
'width': '620px',
'height': '450px'}, selector='modal')
graph = EventfulGraph()
d3 = ForceDirectedGraphWidget(graph, parent=floating_container)
floating_container.set_css('background', BACKGROUND)
d3.width = 600
d3.height = 400
display(floating_container)
existing_graphs.append(floating_container)
index = add_unique_node(graph, number, fill=PARENT_COLOR, r='30px')
plot_primes(graph, number=number, parent=index, start_number=number, delay=delay)
In [15]:
box = widgets.ContainerWidget()
box.vbox()
box.align_center()
box.pack_center()
header = widgets.StringWidget(parent=box, default_view_name="LabelView", value="<h1>Number Factorizer</h1><br>")
subbox = widgets.ContainerWidget(parent=box)
subbox.hbox()
subbox.align_center()
subbox.pack_center()
number = widgets.IntWidget(value=100, parent=subbox)
button = widgets.ButtonWidget(description="Calculate", parent=subbox)
speed = widgets.FloatRangeWidget(parent=box, min=0.0, max=0.5, value=0.4, step=0.01)
display(box)
box.add_class('well well-small')
def handle_caclulate():
graph_primes(number.value, 0.5-speed.value)
button.on_click(handle_caclulate)
Twitter Tweet Watcher¶
This example requires the Python "twitter" library to be installed (https://github.com/sixohsix/twitter). You can install Python twitter by running sudo pip install twitter or sudo easy_install twitter from the commandline.
In [16]:
from twitter import *
import time, datetime
import math
twitter_timestamp_format = "%a %b %d %X +0000 %Y"
In [17]:
# Sign on to twitter.
auth = OAuth(
consumer_key='iQvYfTfuD86fgVWGjPY0UA',
consumer_secret='C3jjP6vzYzTYoHV4s5NYPGuRkpT5SulKRKTkRmYg',
token='2218195843-cOPQa0D1Yk3JbvjvsCa0tIYzBOEWxINekmGcEql',
token_secret='3BFncT1zAvJRN6rj8haCxveZVLZWZ23QeulxzByXWlfoO'
)
twitter = Twitter(auth = auth)
twitter_stream = TwitterStream(auth = auth, block = False)
In [18]:
widget_container = widgets.ContainerWidget()
widget_container.hbox()
floating_container = widgets.ContainerWidget(parent=widget_container, default_view_name='ModalView')
floating_container.description = "Dynamic D3 rendering of a NetworkX graph"
floating_container.button_text = "Render Window"
floating_container.set_css({
'width': '620px',
'height': '450px'}, selector='modal')
graph = EventfulGraph()
d3 = ForceDirectedGraphWidget(graph, parent=floating_container)
d3.width = 600
d3.height = 400
stop_button = widgets.ButtonWidget(parent=widget_container, description="Stop")
stop_button.set_css('margin-left', '5px')
# Only listen to tweets while they are available and the user
# doesn't want to stop.
stop_listening = [False]
def handle_stop():
stop_listening[0] = True
print("Service stopped")
stop_button.on_click(handle_stop)
def watch_tweets(screen_name=None):
display(widget_container)
graph.node.clear()
graph.adj.clear()
start_timestamp = None
stop_button.add_class('btn-danger')
# Get Barack's tweets
tweets = twitter.statuses.user_timeline(screen_name=screen_name)
user_id = twitter.users.lookup(screen_name=screen_name)[0]['id']
# Determine the maximum number of retweets.
max_retweets = 0.0
for tweet in tweets:
max_retweets = float(max(tweet['retweet_count'], max_retweets))
def plot_tweet(tweet, parent=None, elapsed_seconds=1.0, color="gold"):
new_id = tweet['id']
graph.add_node(
new_id,
r=max(float(tweet['retweet_count']) / max_retweets * 30.0, 3.0),
charge=-60,
fill = color,
)
if parent is not None:
parent_radius = max(float(parent['retweet_count']) / max_retweets * 30.0, 3.0)
graph.node[parent['id']]['r'] = parent_radius
graph.add_edge(new_id, parent['id'], distance=math.log(elapsed_seconds) * 9.0 + parent_radius)
graph.node[new_id]['fill'] = 'red'
# Plot each tweet.
for tweet in tweets:
plot_tweet(tweet)
kernel=get_ipython().kernel
iterator = twitter_stream.statuses.filter(follow=user_id)
while not stop_listening[0]:
kernel.do_one_iteration()
for tweet in iterator:
kernel.do_one_iteration()
if stop_listening[0] or tweet is None:
break
else:
if 'retweeted_status' in tweet:
original_tweet = tweet['retweeted_status']
if original_tweet['id'] in graph.node:
tweet_timestamp = datetime.datetime.strptime(tweet['created_at'], twitter_timestamp_format)
if start_timestamp is None:
start_timestamp = tweet_timestamp
elapsed_seconds = max((tweet_timestamp - start_timestamp).total_seconds(),1.0)
plot_tweet(tweet, parent=original_tweet, elapsed_seconds=elapsed_seconds)
elif 'id' in tweet:
plot_tweet(tweet, color='lime')
In [19]:
watch_tweets(screen_name="justinbieber")