Using Matplotlib to create adjacent graphs

Question

How can I make the first image look like the second using matplotlib?

Each "column" from the blue graph represents something like the inverse of corresponding green graph "column". I think this format is informative.

EDIT: This code should give you an idea of what I'm doing.

import tkinter as tk
import numpy as np

from matplotlib.figure import Figure
from matplotlib.font_manager import FontProperties
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

infoFrame = tk.Frame(tk.Tk(), width=1200, height=750, padx=5, pady=5)
infoFrame.grid()

graphCanvas = tk.Canvas(infoFrame)
graphCanvas.grid(columnspan=5, rowspan=2, row=1)

infoGraph = Figure(figsize=(7, 6), dpi=100)  
firstGraph = infoGraph.add_subplot(2, 1, 2, axisbg="#9DDEFF")
secondGraph = infoGraph.add_subplot(2, 1, 1, axisbg="#B2F0B2")

entries = ["one", "two"]
types = ["x", "y"]
_tkColors = ["black", "yellow", "magenta", "cyan", "red", "green", "blue"]
index = np.arange(len(types))
width = 0.3
firstLabelData = []
secondLabelData = []
iterator = 0
barData = {'interval': 1, 'data': 
            {'one': {'std': [0.0, 0.0], 'sum': [5, 4], 'mean': [5.0, 4.0]}, 
            'two': {'std': [0.0, 0.0], 'sum': [14, 2], 'mean': [14.0, 2.0]}}}

for entry in entries:
    firstPlot = firstGraph.bar(index+(width*iterator), barData["data"][entry]["sum"], width,
                         color=_tkColors[iterator % len(_tkColors)], yerr=barData["data"][entry]["std"])
    secondPlot = secondGraph.bar(index+(width*iterator), barData["data"][entry]["sum"], width,
                         color=_tkColors[iterator % len(_tkColors)], yerr=barData["data"][entry]["std"])

    firstLabelData.append(firstPlot[0])
    secondLabelData.append(secondPlot[0])

    iterator += 1


firstGraph.text(3.6, 18, "Inverse Graph 1", weight="bold")
firstGraph.set_xlabel("Over " + str(30) + " Iterations")
firstGraph.invert_yaxis()
secondGraph.text(3.5, 18, "Graph 1", weight="bold")

fontP = FontProperties()
fontP.set_size("small")

secondGraph.legend(tuple(firstLabelData), tuple(entries), prop=fontP, loc=2)

graph = FigureCanvasTkAgg(infoGraph, master=graphCanvas)
graph.show()
graph._tkcanvas.pack(side=tk.TOP, expand=1)

infoFrame.mainloop()

Answer 1

Something like:

fig, ax = plt.subplots()


ax.set_ylim([-5, 5])
ax.axhspan(0, 5, color='b', alpha=.5, zorder=-5)
ax.axhspan(-5, 0, color='r', alpha=.5, zorder=-5)
for j, c in enumerate(['k', 'y', 'm']):
    t = np.random.rand(10)
    b = -np.random.rand(10)
    h = -b + t
    ax.bar(.3*j + np.arange(10), h, bottom=b,  color=c, width=.3)

This is a little brittle in that the colored backgrounds are finite in the vertical direction. I suspect there is a better way to do half-infinite patches, but I can't think of it off the top of my head.

---

If you really want to do this with two idependent axes, something like this would probably work:

fig = plt.figure()
top_axes = fig.add_axes([.1, .5, .8, .4], axisbg="#9DDEFF")
bottom_axes = fig.add_axes([.1, .1, .8, .4], sharex=top_axes, axisbg="#B2F0B2")
bottom_axes.invert_yaxis()
top_axes.xaxis.set_visible(False)

for j, c in enumerate(['k', 'y', 'm']):
    b = np.random.rand(10)
    t = np.random.rand(10)
    top_axes.bar(.3*j + np.arange(10), t,  color=c, width=.3)
    bottom_axes.bar(.3*j + np.arange(10), b,  color=c, width=.3)

There is some sillyness going on with the 0 label on the yaxis (because it is being double drawn), but that should not be too hard to fix (might need a fancy formatter).