Skip to content

Instantly share code, notes, and snippets.

@plotly

plotly/Plotly and IPython - Multiple Axes, Subplots, and Insets

Created November 23, 2013 23:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save plotly/7621543 to your computer and use it in GitHub Desktop.
Save plotly/7621543 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Plotly and IPython - Multiple Axes, Subplots, and Insets
{
"metadata": {
"name": "Plotly and IPython - Multiple Axes, Subplots, and Insets"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": "Plotly and IPython: Multiple Axes, Subplots, and Insets\n===\n\nBackground\n---\nPlotly ([https://plot.ly](https://plot.ly)) is a collaborative data analysis and graphing platform. Plotly's IPython Graphing Library ([https://plot.ly/python](https://plot.ly)) interfaces Plotly's online graphing tools with your IPython notebook environment. Send data to your Plotly account, embed the graphs in your IPython notebook, and share them in your web browser. Style with code or with our online interface; share your work publicly with a url or privately among other Plotly members; access your graphs from anywhere.\nLearn More\n---\n- A talk and a demo: [Using Plotly and IPython for Scientific Computing](https://www.youtube.com/watch?v=zG8FYPFU9n4&feature=youtu.be&a)\n- Plotly Homepage: [https://plot.ly](https://plot.ly)\n- Plotly APIs for [Python](https://plot.ly/python), [Julia](https://plot.ly/julia), [MATLAB] (https://plot.ly/MATLAB), [R](https://plot.ly/R), [Arduino](https://plot.ly/arduino), [Perl](https://plot.ly/perl) and our [REST protocal](https://plot.ly/REST)\n- Let us know what you think: [chris[at]plot[dot]ly]([mailto:chris@plot.ly])"
},
{
"cell_type": "code",
"collapsed": false,
"input": "p = plotly.plotly('IPython.Demo', '1fw3zw2o13')",
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "code",
"collapsed": false,
"input": "p.verbose=False",
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "code",
"collapsed": false,
"input": "import numpy as np\nx0 = np.concatenate([np.random.randn(100), np.random.randn(100)+6])\ny0 = np.random.rayleigh(size=200)\ndata = [\n {\n \"x\": x0,\n \"y\": y0,\n \"type\": \"histogram2d\"\n },\n {\n \"y\": y0,\n \"type\": \"histogramy\",\n \"xaxis\": \"x2\",\n \"yaxis\": \"y\",\n \"bardir\": \"h\",\n \"marker\":{\"color\":\"rgb(31, 119, 180)\"}\n },\n {\n \"x\":x0,\n \"type\": \"histogramx\",\n \"xaxis\": \"x\",\n \"yaxis\": \"y3\",\n \"marker\":{\"color\":\"rgb(31, 119, 180)\"} \n }\n]\nlayout = {\n \"showlegend\":False,\n \"width\":900,\n \"height\": 700,\n \"xaxis\":{\n \"domain\":[0,0.8],\n \n \"showgrid\":False,\n \"showline\":False,\n \"zeroline\":False\n },\n \"yaxis\":{\n \"domain\":[0,0.8],\n \n \"showgrid\":False,\n \"showline\":False,\n \"zeroline\":False \n },\n \"xaxis2\":{\n \"domain\":[0.82,1.0],\n \n \"showgrid\":False,\n \"showline\":False,\n \"zeroline\":False \n },\n \"yaxis3\":{\n \"domain\":[0.82,1.0],\n \n \"showgrid\":False,\n \"showline\":False,\n \"zeroline\":False \n }\n}\np.iplot(data,layout=layout,width=950,height=750)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"800\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/96/950/750\" width=\"1000\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 114,
"text": "<IPython.core.display.HTML at 0x104cf4410>"
}
],
"prompt_number": 114
},
{
"cell_type": "raw",
"metadata": {},
"source": "(Plotly graphs are interactive: click-and-drag to zoom, shift-click-and-drag to pan, click-drag on number lines to pan axes, double-click to autozoom)"
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": "Double Y Axes"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[2,3,4],\n \"y\":[4,5,6],\n \"yaxis\":\"y2\", # this will reference the yaxis2 object in the layout object\n \"name\": \"yaxis2 data\"\n },\n {\n \"x\":[1,2,3],\n \"y\":[40,50,60],\n \"name\":\"yaxis data\"\n }\n];\nlayout = {\n \"yaxis\":{\n \"title\": \"yaxis title\", # optional\n },\n \"yaxis2\":{\n \"title\": \"yaxis2 title\", # optional\n \"titlefont\":{\n \"color\":\"rgb(148, 103, 189)\"\n },\n \"tickfont\":{\n \"color\":\"rgb(148, 103, 189)\"\n },\n \"overlaying\":\"y\",\n \"side\":\"right\",\n }, \n \"title\": \"Double Y Axis Example\",\n \"annotations\": [{\"text\":\"This plot is interactive!<br>Try panning one of the axes<br>(click-and-drag on the axes-borders)<br>or zooming (click-and-drag) in the plot\",\n \"align\":\"left\",\n \"showarrow\":False,\n \"x\":0.05, \"y\":0.93, \"xref\": \"page\", \"yref\": \"page\"}]\n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/5/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 10,
"text": "<IPython.core.display.HTML at 0x104112e90>"
}
],
"prompt_number": 10
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": "Multiple Y Axes"
},
{
"cell_type": "code",
"collapsed": false,
"input": "c = ['#1f77b4', # muted blue\n '#ff7f0e', # safety orange\n '#2ca02c', # cooked asparagus green\n '#d62728', # brick red\n '#9467bd', # muted purple\n '#8c564b', # chestnut brown\n '#e377c2', # raspberry yogurt pink\n '#7f7f7f', # middle gray\n '#bcbd22', # curry yellow-green\n '#17becf']; #blue-teal\n\ndata = [\n {\n \"x\":[1,2,3],\n \"y\":[4,5,6],\n \"name\":\"yaxis1 data\"\n },\n {\n \"x\":[2,3,4],\n \"y\":[40,50,60],\n \"name\":\"yaxis2 data\",\n \"yaxis\":\"y2\"\n },\n {\n \"x\":[3,4,5],\n \"y\":[400,500,600],\n \"name\":\"yaxis3 data\",\n \"yaxis\":\"y3\"\n },\n {\n \"x\":[4,5,6],\n \"y\":[40000,50000,60000],\n \"name\":\"yaxis4 data\",\n \"yaxis\":\"y4\" \n },\n {\n \"x\":[5,6,7],\n \"y\":[400000,500000,600000],\n \"name\":\"yaxis5 data\",\n \"yaxis\":\"y5\" \n },\n {\n \"x\":[6,7,8],\n \"y\":[4000000,5000000,6000000],\n \"name\":\"yaxis6 data\",\n \"yaxis\":\"y6\" \n },\n]\nlayout = {\n \"width\":800,\n \"xaxis\":{\n \"domain\":[0.3,0.7]\n },\n \"yaxis\":{\n \"title\": \"yaxis title\",\n \"titlefont\":{\n \"color\":c[0]\n },\n \"tickfont\":{\n \"color\":c[0]\n },\n },\n \"yaxis2\":{\n \"overlaying\":\"y\",\n \"side\":\"left\",\n \"anchor\":\"free\",\n \"position\":0.15,\n \n \"title\": \"yaxis2 title\",\n \"titlefont\":{\n \"color\":c[1]\n },\n \"tickfont\":{\n \"color\":c[1]\n },\n },\n \"yaxis3\":{\n \"overlaying\":\"y\",\n \"side\":\"left\",\n \"anchor\":\"free\",\n \"position\":0,\n \n \"title\": \"yaxis3 title\",\n \"titlefont\":{\n \"color\":c[2]\n },\n \"tickfont\":{\n \"color\":c[2]\n },\n },\n\n \"yaxis4\":{ \n \"overlaying\":\"y\",\n \"side\":\"right\",\n \"anchor\":\"x\",\n \n \"title\": \"yaxis4 title\",\n \"titlefont\":{\n \"color\":c[3]\n },\n \"tickfont\":{\n \"color\":c[3]\n }, \n },\n\n \"yaxis5\":{ \n \"overlaying\":\"y\",\n \"side\":\"right\",\n \"anchor\":\"free\",\n \"position\":0.85,\n\n \"title\": \"yaxis5 title\",\n \"titlefont\":{\n \"color\":c[4]\n },\n \"tickfont\":{\n \"color\":c[4]\n }, \n },\n\n \"yaxis6\":{ \n \"overlaying\":\"y\",\n \"side\":\"right\",\n \"anchor\":\"free\",\n \"position\":1.0,\n\n \"title\": \"yaxis6 title\",\n \"titlefont\":{\n \"color\":c[5]\n },\n \"tickfont\":{\n \"color\":c[5]\n }, \n } \n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/9/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 14,
"text": "<IPython.core.display.HTML at 0x104d16fd0>"
}
],
"prompt_number": 14
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": "Subplots"
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"source": "With independent axes"
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"source": "Equally Sized"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[1,2,3],\n \"y\":[4,5,6],\n },\n {\n \"x\":[20,30,40],\n \"y\":[50,60,70],\n \"xaxis\":\"x2\",\n \"yaxis\":\"y2\"\n }\n]\n\nlayout = {\n \"xaxis\":{\n \"domain\":[0,0.45] # i.e. let the first x-axis span the first 45% of the plot width\n },\n \"xaxis2\":{\n \"domain\":[0.55,1] # i.e. let the second x-axis span the latter 45% of the plot width\n },\n \"yaxis2\":{\n \"anchor\":\"x2\" # i.e. bind the second y-axis to the start of the second x-axis\n }\n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/13/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 18,
"text": "<IPython.core.display.HTML at 0x104cbbe90>"
}
],
"prompt_number": 18
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"source": "Or custom sized"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[1,2,3],\n \"y\":[4,5,6],\n },\n {\n \"x\":[20,30,40],\n \"y\":[50,60,70],\n \"xaxis\":\"x2\",\n \"yaxis\":\"y2\"\n }\n]\n\nlayout = {\n \"xaxis\":{\n \"domain\":[0,0.7] # i.e. let the first x-axis span the first 70% of the plot width\n },\n \"xaxis2\":{\n \"domain\":[0.8,1] # i.e. let the second x-axis span the latter 20% of the plot width\n },\n \"yaxis2\":{\n \"anchor\":\"x2\" # i.e. bind the second y-axis to the start of the second x-axis\n }\n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/15/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 20,
"text": "<IPython.core.display.HTML at 0x104d34e10>"
}
],
"prompt_number": 20
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"source": "Create any number of subplots in any size by moving around the axes"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[1,2,3],\n \"y\":[4,5,6],\n },\n {\n \"x\":[20,30,40],\n \"y\":[50,60,70],\n \"xaxis\":\"x2\",\n \"yaxis\":\"y2\"\n },\n {\n \"x\":[300,400,500],\n \"y\":[600,700,800],\n \"xaxis\":\"x3\",\n \"yaxis\":\"y3\"\n },\n {\n \"x\":[4000,5000,6000],\n \"y\":[7000,8000,9000],\n \"xaxis\":\"x4\",\n \"yaxis\":\"y4\"\n } \n]\n\nlayout = {\n \"xaxis\":{\n \"domain\":[0,0.45] # let the first x-axis span the first 45% of the plot width\n },\n \"yaxis\":{\n \"domain\":[0,0.45] # # and let the first y-axis span the first 45% of the plot height\n },\n \"xaxis2\":{\n \"domain\":[0.55,1] # and let the second x-axis span the latter 45% of the plot width\n },\n \"yaxis2\":{\n \"domain\":[0,0.45], # and let the second y-axis span the first 45% of the plot height\n \"anchor\":\"x2\" # bind the horizontal position of the second y-axis to the start of the second x-axis\n },\n \"xaxis3\":{\n \"domain\":[0,0.45],\n \"anchor\":\"y3\" # bind the vertical position of this axis to the start of yaxis3\n },\n \"yaxis3\":{\n \"domain\":[0.55,1],\n },\n \"xaxis4\":{\n \"domain\":[0.55,1],\n \"anchor\":\"y4\", # bind the vertical position of this axis to the start of yaxis4\n },\n \"yaxis4\":{\n \"domain\":[0.55,1],\n \"anchor\":\"x4\" # bind the horizontal position of this axis to the start of xaxis4\n } \n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/17/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 24,
"text": "<IPython.core.display.HTML at 0x104bdc590>"
}
],
"prompt_number": 24
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"source": "Let subplots share axes"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[1,2,3],\n \"y\":[2,3,4],\n },\n {\n \"x\":[20,30,40],\n \"y\":[5,5,5],\n \"xaxis\":\"x2\",\n \"yaxis\":\"y\"\n },\n {\n \"x\":[2,3,4],\n \"y\":[600,700,800],\n \"xaxis\":\"x\",\n \"yaxis\":\"y3\"\n },\n {\n \"x\":[4000,5000,6000],\n \"y\":[7000,8000,9000],\n \"xaxis\":\"x4\",\n \"yaxis\":\"y4\"\n } \n]\n\nlayout = {\n \"xaxis\":{\n \"domain\":[0,0.45] # let the first x-axis span the first 45% of the plot width\n },\n \"yaxis\":{\n \"domain\":[0,0.45] # # and let the first y-axis span the first 45% of the plot height\n },\n \"xaxis2\":{\n \"domain\":[0.55,1] # and let the second x-axis span the latter 45% of the plot width\n },\n \"yaxis3\":{\n \"domain\":[0.55,1],\n },\n \"xaxis4\":{\n \"domain\":[0.55,1],\n \"anchor\":\"y4\", # bind the vertical position of this axis to the start of yaxis4\n },\n \"yaxis4\":{\n \"domain\":[0.55,1],\n \"anchor\":\"x4\" # bind the horizontal position of this axis to the start of xaxis4\n } \n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/32/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 32,
"text": "<IPython.core.display.HTML at 0x104d33a10>"
}
],
"prompt_number": 32
},
{
"cell_type": "raw",
"metadata": {},
"source": "Woah, hold up. Check out what's going on here: the bottom two plots share the same y-axis, the two stacked plots on the left share the same x-axis and the plot in the top right has its own x and y axes. Try zooming (click-and-drag), panning (shift-click-drag), auto-scaling (double-click), or axis panning (click-and-drag on the axes number lines) around in the different plots and see how the axes respond!"
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": "Insets"
},
{
"cell_type": "code",
"collapsed": false,
"input": "data = [\n {\n \"x\":[1,2,3],\n \"y\":[4,3,2],\n },\n {\n \"x\":[20,30,40],\n \"y\":[30,40,50],\n \"xaxis\":\"x2\",\n \"yaxis\":\"y2\"\n }\n]\nlayout = {\n \"xaxis2\": {\n \"domain\": [0.6, 0.95],\n \"anchor\": \"y2\"\n },\n \"yaxis2\":{\n \"domain\": [0.6, 0.95],\n \"anchor\": \"x2\"\n }\n}\np.iplot(data, layout=layout)",
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": "\n\n"
},
{
"html": "<iframe height=\"650\" id=\"igraph\" scrolling=\"no\" seamless=\"seamless\" src=\"https://plot.ly/~IPython.Demo/36/600/600\" width=\"650\"></iframe>",
"metadata": {},
"output_type": "pyout",
"prompt_number": 38,
"text": "<IPython.core.display.HTML at 0x1041152d0>"
}
],
"prompt_number": 38
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment