Refactor gallery (#4422)

* Add external directory * Move Javascript and JIT * Remove application section * Consolidate and move pygraphviz examples * Clean up imports * Reorder * Fix subclass examples
author: Jarrod Millman <jarrod.millman@gmail.com> 2020-12-06 00:57:17 -0800
committer: GitHub <noreply@github.com> 2020-12-06 00:57:17 -0800
commit: a678c7ad3a3d35a68e7612fceba86b23a880353e (patch)
tree: 4eb24921b14cfdeef3b4a14f3fe7756f864b89ae /examples/external
parent: 24476c8697d3f3ba877d2f99952e7d2b1786bfab (diff)
download: networkx-a678c7ad3a3d35a68e7612fceba86b23a880353e.tar.gz
8 files changed, 288 insertions, 0 deletions
diff --git a/examples/external/README.txt b/examples/external/README.txt
new file mode 100644
index 00000000..ad8da424
--- /dev/null
+++ b/examples/external/README.txt
@@ -0,0 +1,4 @@
+External libraries
+------------------
+
+Examples of using NetworkX with external libraries.
diff --git a/examples/external/force/README.txt b/examples/external/force/README.txt
new file mode 100644
index 00000000..8de9a02a
--- /dev/null
+++ b/examples/external/force/README.txt
@@ -0,0 +1,7 @@
+Modified from the example at of D3
+http://mbostock.github.com/d3/ex/force.html
+
+Run the file force.py to generate the force.json data file needed for this to work.
+
+Then copy all of the files in this directory to a webserver and load force.html.
+
diff --git a/examples/external/force/force.css b/examples/external/force/force.css
new file mode 100644
index 00000000..fee3f313
--- /dev/null
+++ b/examples/external/force/force.css
@@ -0,0 +1,12 @@
+.nodes circle {
+    cursor: pointer;
+    fill: #ff3399;
+    stroke: #000;
+    stroke-width: .5px;
+}
+
+.links line {
+    fill: none;
+    stroke: #9ecae1;
+    stroke-width: .5px;
+}
+\ No newline at end of file
diff --git a/examples/external/force/force.html b/examples/external/force/force.html
new file mode 100644
index 00000000..21cc7e33
--- /dev/null
+++ b/examples/external/force/force.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Force-Directed Layout</title>
+    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="force/force.css"/>
+  </head>
+  <body>
+    <svg width="960" height="600"></svg>
+    <script type="text/javascript" src="force/force.js"></script>
+  </body>
+</html>
diff --git a/examples/external/force/force.js b/examples/external/force/force.js
new file mode 100644
index 00000000..5aba4fc7
--- /dev/null
+++ b/examples/external/force/force.js
@@ -0,0 +1,86 @@
+// This is adapted from https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7
+
+var svg = d3.select("svg"),
+    width = +svg.attr("width"),
+    height = +svg.attr("height");
+
+var simulation = d3.forceSimulation()
+    .force("link", d3.forceLink().id(function (d) {
+        return d.id;
+    }))
+    .force("charge", d3.forceManyBody())
+    .force("center", d3.forceCenter(width / 2, height / 2));
+
+d3.json("force/force.json", function (error, graph) {
+    if (error) throw error;
+
+    var link = svg.append("g")
+        .attr("class", "links")
+        .selectAll("line")
+        .data(graph.links)
+        .enter().append("line");
+
+    var node = svg.append("g")
+        .attr("class", "nodes")
+        .selectAll("circle")
+        .data(graph.nodes)
+        .enter().append("circle")
+        .attr("r", 5)
+        .call(d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended));
+
+    node.append("title")
+        .text(function (d) {
+            return d.id;
+        });
+
+    simulation
+        .nodes(graph.nodes)
+        .on("tick", ticked);
+
+    simulation.force("link")
+        .links(graph.links);
+
+    function ticked() {
+        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;
+            });
+    }
+});
+
+function dragstarted(d) {
+    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+}
+
+function dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+}
+
+function dragended(d) {
+    if (!d3.event.active) simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+}
+\ No newline at end of file
diff --git a/examples/external/javascript_force.py b/examples/external/javascript_force.py
new file mode 100644
index 00000000..1c531135
--- /dev/null
+++ b/examples/external/javascript_force.py
@@ -0,0 +1,39 @@
+"""
+==========
+Javascript
+==========
+
+Example of writing JSON format graph data and using the D3 Javascript library
+to produce an HTML/Javascript drawing.
+
+You will need to download the following directory:
+
+- https://github.com/networkx/networkx/tree/master/examples/javascript/force
+"""
+import json
+
+import flask
+import networkx as nx
+
+G = nx.barbell_graph(6, 3)
+# this d3 example uses the name attribute for the mouse-hover value,
+# so add a name to each node
+for n in G:
+    G.nodes[n]["name"] = n
+# write json formatted data
+d = nx.json_graph.node_link_data(G)  # node-link format to serialize
+# write json
+json.dump(d, open("force/force.json", "w"))
+print("Wrote node-link JSON data to force/force.json")
+
+# Serve the file over http to allow for cross origin requests
+app = flask.Flask(__name__, static_folder="force")
+
+
+@app.route("/")
+def static_proxy():
+    return app.send_static_file("force.html")
+
+
+print("\nGo to http://localhost:8000 to see the example\n")
+app.run(port=8000)
diff --git a/examples/external/plot_jit.py b/examples/external/plot_jit.py
new file mode 100644
index 00000000..e78c46dd
--- /dev/null
+++ b/examples/external/plot_jit.py
@@ -0,0 +1,37 @@
+"""
+================================
+JavaScript InfoVis Toolkit (JIT)
+================================
+
+An example showing how to use the JavaScript InfoVis Toolkit (JIT)
+JSON export
+
+See the JIT documentation and examples at https://philogb.github.io/jit/
+"""
+
+import json
+
+import matplotlib.pyplot as plt
+import networkx as nx
+
+# add some nodes to a graph
+G = nx.Graph()
+
+G.add_node("one", type="normal")
+G.add_node("two", type="special")
+G.add_node("solo")
+
+# add edges
+G.add_edge("one", "two")
+G.add_edge("two", 3, type="extra special")
+
+# convert to JIT JSON
+jit_json = nx.jit_data(G, indent=4)
+print(jit_json)
+
+X = nx.jit_graph(json.loads(jit_json))
+print(f"Nodes: {list(X.nodes(data=True))}")
+print(f"Edges: {list(X.edges(data=True))}")
+
+nx.draw(G, pos=nx.planar_layout(G), with_labels=True)
+plt.show()
diff --git a/examples/external/plot_pygraphviz.py b/examples/external/plot_pygraphviz.py
new file mode 100644
index 00000000..69a2b02d
--- /dev/null
+++ b/examples/external/plot_pygraphviz.py
@@ -0,0 +1,91 @@
+"""
+===================
+Pygraphviz Examples
+===================
+
+See the pygraphviz documentation and examples at
+http://pygraphviz.github.io/
+"""
+
+import matplotlib.pyplot as plt
+import networkx as nx
+
+# %%
+# An example showing how to use the interface to the pygraphviz
+# AGraph class to convert to and from graphviz.
+
+
+G = nx.complete_graph(5)
+A = nx.nx_agraph.to_agraph(G)  # convert to a graphviz graph
+X1 = nx.nx_agraph.from_agraph(A)  # convert back to networkx (but as Graph)
+X2 = nx.Graph(A)  # fancy way to do conversion
+G1 = nx.Graph(X1)  # now make it a Graph
+
+A.write("k5.dot")  # write to dot file
+X3 = nx.nx_agraph.read_dot("k5.dot")  # read from dotfile
+
+# %%
+# Write a dot file from a networkx graph for further processing with graphviz.
+
+G = nx.grid_2d_graph(5, 5)  # 5x5 grid
+# This example needs Graphviz and PyGraphviz
+nx.nx_agraph.write_dot(G, "grid.dot")
+print("Now run: neato -Tps grid.dot >grid.ps")
+
+# %%G
+# An example showing how to use the interface to the pygraphviz
+# AGraph class to convert to and from graphviz.
+
+G = nx.Graph()
+G.add_edge(1, 2, color="red")
+G.add_edge(2, 3, color="red")
+G.add_node(3)
+G.add_node(4)
+
+A = nx.nx_agraph.to_agraph(G)  # convert to a graphviz graph
+A.write("k5_attributes.dot")  # write to dot file
+
+# convert back to networkx Graph with attributes on edges and
+# default attributes as dictionary data
+X = nx.nx_agraph.from_agraph(A)
+print("edges")
+print(list(X.edges(data=True)))
+print("default graph attributes")
+print(X.graph)
+print("node node attributes")
+print(X.nodes.data(True))
+
+# %%
+# An example showing how to write first 20 graphs from the graph atlas as
+# graphviz dot files Gn.dot where n=0,19.
+
+atlas = nx.graph_atlas_g()[0:20]
+
+for G in atlas:
+    print(G)
+    A = nx.nx_agraph.to_agraph(G)
+    A.graph_attr["label"] = G.name
+    # set default node attributes
+    A.node_attr["color"] = "red"
+    A.node_attr["style"] = "filled"
+    A.node_attr["shape"] = "circle"
+    A.write(G.name + ".dot")
+
+
+# %%
+# An example showing how to use the interface to the pygraphviz
+# AGraph class to draw a graph.
+
+G = nx.complete_graph(5)
+A = nx.nx_agraph.to_agraph(G)  # convert to a graphviz graph
+A.layout()  # neato layout
+A.draw("k5.ps")  # write postscript in k5.ps with neato layout
+
+
+# %%
+# An example showing how to use matplotlib to draw the graph
+# with a graphviz layout
+
+pos = nx.nx_agraph.graphviz_layout(G)
+nx.draw(G, pos=pos)
+plt.show()
author	Jarrod Millman <jarrod.millman@gmail.com>	2020-12-06 00:57:17 -0800
committer	GitHub <noreply@github.com>	2020-12-06 00:57:17 -0800
commit	a678c7ad3a3d35a68e7612fceba86b23a880353e (patch)
tree	4eb24921b14cfdeef3b4a14f3fe7756f864b89ae /examples/external
parent	24476c8697d3f3ba877d2f99952e7d2b1786bfab (diff)
download	networkx-a678c7ad3a3d35a68e7612fceba86b23a880353e.tar.gz