-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquickstart.html
146 lines (134 loc) · 11.2 KB
/
quickstart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en" data-content_root="./">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quick Start Guide — Bringing Matplotlib to the Browser</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css?v=fa44fd50" />
<link rel="stylesheet" type="text/css" href="_static/mpld3.css?v=f78f1748" />
<link rel="stylesheet" href="_static/print.css" type="text/css" />
<script src="_static/documentation_options.js?v=f1e22e58"></script>
<script src="_static/doctools.js?v=888ff710"></script>
<script src="_static/sphinx_highlight.js?v=dc90522c"></script>
<script src="_static/theme_extras.js"></script>
<link rel="icon" href="_static/favicon.png"/>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Installing mpld3" href="install.html" />
<link rel="prev" title="mpld3" href="index.html" />
</head><body>
<div class="header"><h1 class="heading"><a href="index.html">
<span>Bringing Matplotlib to the Browser</span></a></h1>
<h2 class="heading"><span>Quick Start Guide</span></h2>
</div>
<div class="topnav">
<p>
«  <a href="index.html">mpld3</a>
  ::  
<a class="uplink" href="index.html">Contents</a>
  ::  
<a href="install.html">Installing mpld3</a>  »
</p>
</div>
<div class="content">
<section id="quick-start-guide">
<span id="quickstart-guide"></span><h1>Quick Start Guide<a class="headerlink" href="#quick-start-guide" title="Link to this heading">¶</a></h1>
<p>The mpld3 package is extremely easy to use: you can simply take any script
generating a matplotlib plot, run it through one of mpld3’s convenience
routines, and embed the result in a web page.</p>
<p>The current release of mpld3 can be installed with pip:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">pip</span> <span class="n">install</span> <span class="n">mpld3</span>
</pre></div>
</div>
<p>Then you can make an interactive plot like so:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span><span class="o">,</span> <span class="nn">mpld3</span>
<span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">([</span><span class="mi">3</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">5</span><span class="p">],</span> <span class="s1">'ks-'</span><span class="p">,</span> <span class="n">mec</span><span class="o">=</span><span class="s1">'w'</span><span class="p">,</span> <span class="n">mew</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span> <span class="n">ms</span><span class="o">=</span><span class="mi">20</span><span class="p">)</span>
<span class="n">mpld3</span><span class="o">.</span><span class="n">show</span><span class="p">()</span>
</pre></div>
</div>
<p>For more information on installation, see <a class="reference internal" href="install.html#installing-mpld3"><span class="std std-ref">Installing mpld3</span></a>.
For more examples of mpld3 in action, see the <a class="reference internal" href="examples/index.html#example-gallery"><span class="std std-ref">Example Gallery</span></a>.</p>
<p>Next, we’ll give a quick overview of the basic mpld3 functions you
should know about.</p>
<section id="general-functions">
<h2>General Functions<a class="headerlink" href="#general-functions" title="Link to this heading">¶</a></h2>
<p>These are the general functions used to convert matplotlib graphics into HTML
and D3js. See some examples of these being used in the <a class="reference internal" href="examples/index.html#example-gallery"><span class="std std-ref">Example Gallery</span></a>.</p>
<dl class="simple">
<dt><a class="reference internal" href="modules/API.html#mpld3.fig_to_html" title="mpld3.fig_to_html"><code class="xref py py-func docutils literal notranslate"><span class="pre">fig_to_html()</span></code></a></dt><dd><p>This is the core routine which takes a figure and constructs a string of
HTML and JavaScript which can be embedded in any webpage.</p>
</dd>
<dt><a class="reference internal" href="modules/API.html#mpld3.fig_to_dict" title="mpld3.fig_to_dict"><code class="xref py py-func docutils literal notranslate"><span class="pre">fig_to_dict()</span></code></a></dt><dd><p>This routine converts a matplotlib image to a JSON-serializable dictionary,
which can be loaded into an appropriate HTML page and rendered via the
mpld3 JavaScript library. Note that custom plugins which are not built
into mpld3 will not be part of the JSON serialization.</p>
</dd>
<dt><a class="reference internal" href="modules/API.html#mpld3.show" title="mpld3.show"><code class="xref py py-func docutils literal notranslate"><span class="pre">show()</span></code></a></dt><dd><p>This function is mpld3’s equivalent of matplotlib’s <code class="docutils literal notranslate"><span class="pre">plt.show</span></code> function.
It will convert the current figure to HTML using <a class="reference internal" href="modules/API.html#mpld3.fig_to_d3" title="mpld3.fig_to_d3"><code class="xref py py-func docutils literal notranslate"><span class="pre">fig_to_d3()</span></code></a>, start
a local webserver which serves this HTML, and (if the operating system
allows it) automatically open this page in the web browser.</p>
</dd>
</dl>
</section>
<section id="ipython-notebook-functions">
<h2>IPython Notebook Functions<a class="headerlink" href="#ipython-notebook-functions" title="Link to this heading">¶</a></h2>
<p>These are functions which enable the use of mpld3 within the IPython notebook.
See some examples of these being used in the <a class="reference internal" href="notebooks/index.html#notebook-examples"><span class="std std-ref">Notebook Examples</span></a>.</p>
<dl class="simple">
<dt><a class="reference internal" href="modules/API.html#mpld3.display" title="mpld3.display"><code class="xref py py-func docutils literal notranslate"><span class="pre">display()</span></code></a></dt><dd><p>This function displays a single mpld3 figure inline within the IPython
notebook. It is useful if you want to use the standard static figure
display hook through the notebook, but override it in a few cases.
If you want every matplotlib figure to be displayed via mpld3, use
the <a class="reference internal" href="modules/API.html#mpld3.enable_notebook" title="mpld3.enable_notebook"><code class="xref py py-func docutils literal notranslate"><span class="pre">enable_notebook()</span></code></a> function, described below.</p>
</dd>
<dt><a class="reference internal" href="modules/API.html#mpld3.enable_notebook" title="mpld3.enable_notebook"><code class="xref py py-func docutils literal notranslate"><span class="pre">enable_notebook()</span></code></a></dt><dd><p>This function will adjust the IPython notebook display properties so that
mpld3 will be used to display every figure, without having to call
<a class="reference internal" href="modules/API.html#mpld3.display" title="mpld3.display"><code class="xref py py-func docutils literal notranslate"><span class="pre">display()</span></code></a> each time. This is useful if you want every figure to be
automatically embedded in the notebook as an interactive JavaScript figure.
This function should be called <em>after</em> setting <code class="docutils literal notranslate"><span class="pre">%matplotlib</span> <span class="pre">inline</span></code>
mode within the notebook: see the <a class="reference external" href="http://ipython.org/ipython-doc/dev/interactive/notebook.html#plotting">IPython documentation</a>
for details.</p>
</dd>
<dt><a class="reference internal" href="modules/API.html#mpld3.disable_notebook" title="mpld3.disable_notebook"><code class="xref py py-func docutils literal notranslate"><span class="pre">disable_notebook()</span></code></a></dt><dd><p>This function undoes the changes made by <a class="reference internal" href="modules/API.html#mpld3.enable_notebook" title="mpld3.enable_notebook"><code class="xref py py-func docutils literal notranslate"><span class="pre">enable_notebook()</span></code></a>, so that
the normal matplotlib backend is used instead.</p>
</dd>
</dl>
</section>
<section id="saving-figures-to-file">
<h2>Saving Figures to File<a class="headerlink" href="#saving-figures-to-file" title="Link to this heading">¶</a></h2>
<p>Figures can be saved to file either in a stand-alone HTML format, or in a JSON
format. mpld3 supplies the following convenience routines for this purpose:</p>
<dl class="simple">
<dt><a class="reference internal" href="modules/API.html#mpld3.save_html" title="mpld3.save_html"><code class="xref py py-func docutils literal notranslate"><span class="pre">save_html()</span></code></a></dt><dd><p>Save a figure to a stand-alone HTML file.</p>
</dd>
<dt><a class="reference internal" href="modules/API.html#mpld3.save_json" title="mpld3.save_json"><code class="xref py py-func docutils literal notranslate"><span class="pre">save_json()</span></code></a></dt><dd><p>Save the JSON representation of the figure to a file.
Note that custom plugins which are not built
into mpld3 will not be part of the JSON serialization.</p>
</dd>
</dl>
</section>
<section id="plugins">
<h2>Plugins<a class="headerlink" href="#plugins" title="Link to this heading">¶</a></h2>
<p>The mpld3 plugin framework allows nearly endless possibilities for adding interactive behavior to matplotlib plots rendered in d3.
The package includes several built-in plugins, which add zooming, panning, and other interactive behaviors to plots.
Several examples of these plugins can be seen in the <a class="reference internal" href="examples/index.html#example-gallery"><span class="std std-ref">Example Gallery</span></a>.
For some examples of built-in plugins, see <span class="xref std std-ref">linked_brush</span>, <span class="xref std std-ref">scatter_tooltip</span> and <span class="xref std std-ref">html_tooltips</span>. For some examples of defining custom plugin behavior, see <span class="xref std std-ref">random_walk</span> and <span class="xref std std-ref">custom_plugin</span>.
More information on using and creating plugins can be found in the <a class="reference internal" href="plugins.html#mpld3-plugins"><span class="std std-ref">Plugins</span></a> documentation.</p>
</section>
</section>
</div>
<div class="bottomnav">
<p>
«  <a href="index.html">mpld3</a>
  ::  
<a class="uplink" href="index.html">Contents</a>
  ::  
<a href="install.html">Installing mpld3</a>  »
</p>
</div>
<div class="footer" role="contentinfo">
© Copyright 2014, mpld3 developers.
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 7.2.6.
</div>
</body>
</html>