📗 The lecture is in person, but you can join Zoom: 8:50-9:40 or 11:00-11:50. Zoom recordings can be viewed on Canvas -> Zoom -> Cloud Recordings. They will be moved to Kaltura over the weekends.
📗 The in-class (participation) quizzes should be submitted on TopHat (Code:741565), but you can submit your answers through Form at the end of the lectures too.
📗 The Python notebooks used during the lectures can also be found on: GitHub. They will be updated weekly.
📗 Graphs
➭ A graph can be represented by node-link lists or adjacency matrices.
➭ To find patterns (for example clusters) in a graph, the positions of the nodes in node-link diagrams or ordering of nodes in adjacency matrices may need to be changed.
TopHat Exercise
📗 Graph Layouts
➭ Circular layout and arc (chord) layout are simple for the computer, but difficult for humans to understand the shape of the graph: Link, Link.
➭ Other layouts might be useful to for avoiding edge crossing and showing structures. There could be other considerations such as having short edges, equal-length edges, or symmetry.
➭ Force-Directed Placement (FDP) treats nodes as points and edges as springs and tries to minimize energy. It is also called spring model layout: Link.
📗 Tree Diagrams
➭ Trees are special graphs for which each node has one parent, and there are more ways to visualize a tree: Link.
➭ Many of these visualizations are not available in standard Python plotting packages, but the nodes and edges can plotted "manually" using matplotlib.
Graph Drawing Examples
➭ Code to make the graph: Notebook.
📗 Plotting Primitives
➭ matplotlib.patches contain primitive geometries such as Circle, Ellipse, Polygon, Rectangle, RegularPolygon and ConnectionPatch, PathPatch, FancyArrowPatch: Doc.
➭ matplotlib.text can be used to draw text; it can render math equations using TeX too: Link.
📗 Plotting Graphs
➭ A node (indexed i) at \(\left(x, y\right)\) can be represented by a closed shape such as a circle with radius r, for example, matplotlib.patches.Circle((x, y), r), and matplotlib.text(x, y, "i").
➭ An edge from a node at \(\left(x_{1}, y_{1}\right)\) to a node at \(\left(x_{2}, y_{2}\right)\) can be represented by a path (line or curve, with or without arrow), for example, matplotlib.patches.FancyArrowPatch((x1, y1), (x2, y2)), or if the nodes are on different subplots with axes ax[0], ax[1], matplotlib.patches.ConnectionPath((x1, y1), (x2, y2), "data", axesA = ax[0], axesB = ax[1])
➭ To specify the layout of a graph, a list of positions of the nodes are required (sometimes parameters for the curve of the edges need to be specified too).
📗 Ways to Specify Curves
➭ A curve (with arrow) from \(\left(x_{1}, y_{1}\right)\) to \(\left(x_{2}, y_{2}\right)\) can be specified by the (1) out-angle and in-angle, (2) curvature of the curve, (3) Bezier control points: Doc
➭ FancyArrowPatch((x1, y1), (x2, y2), connectionstyle=ConnectionStyle.Angle3(angleA = a, angleB = b) plots a quadratic Bezier curve starting from \(\left(x_{1}, y_{1}\right)\) going out at an angle a and going in at an angle b to \(\left(x_{2}, y_{2}\right)\).
➭ FancyArrowPatch((x1, y1), (x2, y2), connectionstyle=ConnectionStyle.Arc3(rad = r) plots a quadratic Bezier curve from \(\left(x_{1}, y_{1}\right)\) to \(\left(x_{2}, y_{2}\right)\) that arcs towards a point at distance r times the length of the line from the line connecting \(\left(x_{1}, y_{1}\right)\) and \(\left(x_{2}, y_{2}\right)\).
📗 Bezier Curves
➭ Beizer curves are smooth curves specified by control points that may or may not be on the curves themselves.
➭ The curve connects the first control point and the last control point.
➭ The vectors from the first control point to the second control point, and from the last control point to the second-to-last control point, are tangent vectors to the curve.
➭ The curves can be constructed by recursively interpolating the line segments between the control points: Link.
➭ PathPatch(Path([(x1, y1), (x2, y2), (x3, y3)], [Path.MOVETO, Path.CURVE3, Path.CURVE3])) draws a Bezier curve from \(\left(x_{1}, y_{1}\right)\) to \(\left(x_{3}, y_{3}\right)\) with a control point \(\left(x_{2}, y_{2}\right)\).
➭ PathPatch(Path([(x1, y1), (x2, y2), (x3, y3), (x4, y4)], [Path.MOVETO, Path.CURVE4, Path.CURVE4, Path.CURVE4])) draws a Bezier curve from \(\left(x_{1}, y_{1}\right)\) to \(\left(x_{4}, y_{4}\right)\) with two control points \(\left(x_{2}, y_{2}\right)\) and \(\left(x_{3}, y_{3}\right)\).
Curve Example
➭ Code to plot the faces from the last lecture: Notebook.
📗 Coordinate Systems
➭ There are four main coordinate systems: data, axes, figure, and display: Link.
➭ The primitive geometries can be specified using any of them by specifying the transform argument, for example for a figure fig and axis ax, Circle((x, y), r, transform = ax.transData), Circle((x, y), r, transform = ax.transAxes), Circle((x, y), r, transform = fig.transFigure), or Circle((x, y), r, transform = fig.dpi_scale_trans).
Coordinate System
Bottom left
Top right
Transform
Data
based on data
based on data
ax.transData (default)
Axes
\(\left(0, 0\right)\)
\(\left(1, 1\right)\)
ax.transAxes
Figure
\(\left(0, 0\right)\)
\(\left(1, 1\right)\)
fig.transFigure
Display
\(\left(0, 0\right)\)
\(\left(w, h\right)\) in inches
fig.dpi_scale_trans
Graph Drawing Examples Again
➭ Code to make the graph: Notebook.
Note on Transform
➭ In a recent update of matplotlib, the function transform (for example, ax.transData.transform((1, 1))) no longer does the transformation correctly to the display or figure coordinate system, so it should not be used (they were used in examples and exams in the past few semesters). See "Warning" under "Data Coordinate System" here: Link.
Additional Examples
➭ How to draw a quadratic Bezier curve with control points (0, 0), (1, 0), (1, 1)?
➭ This curve has the same shape as the curve drawn in the "Curve Example": in particular, the start angle is 0 degrees (measured from the positive x-axis direction) and the end angle is 270 degrees or -90 degrees, and the distance of the line segment connecting the midpoint between (0, 0) and (1, 1) (which is (1/2, 1/2)) and the middle control point (which is (1, 0)) is half of the length of the line segment connecting (0, 0) and (1, 1), or \(\sqrt{\left(1 - \dfrac{1}{2}\right)^{2} + \left(0 - \dfrac{1}{2}\right)^{2}} = \dfrac{1}{2} \sqrt{\left(1 - 0\right)^{2} + \left(1 - 0\right)^{2}}\).
➭ Therefore, use any path patch with connectionstyle ConnectionStyle.Angle3(0, -90) or ConnectionStyle.Arc3(1/2) to plot the curve.
➭ Comparison of circles with the same radius in transFigrue, transAxes, transData coordinate systems:
➭ Code to make the circles: Notebook.
test1,2q
➭ Given the following list of edges, draw the graph in a way you think looks the best: \(1-4, 1-7, 2-5, 2-8, 3-6, 3-9, 4-7, 4-9, 5-7, 5-8, 6-8, 6-9\).
1
➭ Draw the mouth of a happy and an unhappy face using a Bezier curve.
Start point: (, )
End point: (, )
Control point: (, )
Control point: (, )
Start angle:
End angle:
Arc: 1
📗 Notes and code adapted from the course taught by Yiyin Shen Link and Tyler Caraza-Harter Link