add python documentation for 3D hover options

Sabrina1027 · Oct 11, 2018 · 3db97e5 · 3db97e5
1 parent 23f4371
commit 3db97e5
Show file tree

Hide file tree

Showing 2 changed files with 490 additions and 0 deletions.
diff --git a/_posts/python/layout/3d-hover/2015-06-30-3d-hover-options.html b/_posts/python/layout/3d-hover/2015-06-30-3d-hover-options.html
@@ -0,0 +1,215 @@
+---
+permalink: python/3d-hover/
+description: How to customize 3d hover options in python with Plotly.
+name: Python 3D Hover Options | Plotly
+has_thumbnail: true
+thumbnail: thumbnail/3d-hover-options.jpg
+layout: user-guide
+name: 3D Hover Options
+language: python
+title: Python 3D Hover Options | Plotly
+display_as: layout_opt
+has_thumbnail: false
+page_type: example_index
+order: 19
+ipynb: ~notebook_demo/257
+---
+{% raw %}
+<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
+</div>
+<div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h4 id="New-to-Plotly?">New to Plotly?<a class="anchor-link" href="#New-to-Plotly?">&#182;</a></h4><p>Plotly's Python library is free and open source! <a href="https://plot.ly/python/getting-started/">Get started</a> by downloading the client and <a href="https://plot.ly/python/getting-started/">reading the primer</a>.
+<br>You can set up Plotly to work in <a href="https://plot.ly/python/getting-started/#initialization-for-online-plotting">online</a> or <a href="https://plot.ly/python/getting-started/#initialization-for-offline-plotting">offline</a> mode, or in <a href="https://plot.ly/python/getting-started/#start-plotting-online">jupyter notebooks</a>.
+<br>We also have a quick-reference <a href="https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf">cheatsheet</a> (new!) to help you get started!</p>
+
+</div>
+</div>
+</div>
+<div class="cell border-box-sizing code_cell rendered">
+<div class="input">
+<div class="prompt input_prompt">In&nbsp;[1]:</div>
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>
+<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>
+
+<span class="kn">import</span> <span class="nn">pandas</span> <span class="kn">as</span> <span class="nn">pd</span>
+</pre></div>
+
+</div>
+</div>
+</div>
+
+</div>
+<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
+</div>
+<div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h4 id="Customize-Hover-for-Spikelines">Customize Hover for Spikelines<a class="anchor-link" href="#Customize-Hover-for-Spikelines">&#182;</a></h4><p>By default, Plotly's 3D plots display lines called "spikelines" while hovering over a point.
+These lines project from the hover point to each of the three axes' normal planes and
+then extend from those projection data points to the planes' wall boundaries.</p>
+
+</div>
+</div>
+</div>
+<div class="cell border-box-sizing code_cell rendered">
+<div class="input">
+<div class="prompt input_prompt">In&nbsp;[2]:</div>
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>
+<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>
+
+<span class="kn">import</span> <span class="nn">numpy</span> <span class="kn">as</span> <span class="nn">np</span>
+
+<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">go</span><span class="o">.</span><span class="n">Scatter3d</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>
+    <span class="n">z</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>
+<span class="p">)]</span>
+
+<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>
+    <span class="n">scene</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">Scene</span><span class="p">(</span>
+        <span class="n">xaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span>
+            <span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>
+            <span class="n">spikesides</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span>
+            <span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>
+        <span class="p">),</span>
+        <span class="n">yaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span>
+            <span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>
+            <span class="n">spikesides</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span>
+            <span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>
+        <span class="p">),</span>
+        <span class="n">zaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">ZAxis</span><span class="p">(</span>
+            <span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>
+            <span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>
+        <span class="p">),</span>
+    <span class="p">)</span>
+<span class="p">)</span>
+
+<span class="n">fig</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>
+<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s1">&#39;hover-spikelines&#39;</span><span class="p">)</span>
+</pre></div>
+
+</div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+<div class="prompt output_prompt">Out[2]:</div>
+
+
+
+<div class="output_html rendered_html output_subarea output_execute_result">
+<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2829.embed" height="525px" width="100%"></iframe>
+</div>
+
+</div>
+
+</div>
+</div>
+
+</div>
+<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
+</div>
+<div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h4 id="Customize-Hover-for-Surface-Contours">Customize Hover for Surface Contours<a class="anchor-link" href="#Customize-Hover-for-Surface-Contours">&#182;</a></h4><p>In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default.
+These are customized by styling the <a href="https://plot.ly/python/reference/#surface-contours"><code>contours</code></a>
+attribute in the surface trace.</p>
+
+</div>
+</div>
+</div>
+<div class="cell border-box-sizing code_cell rendered">
+<div class="input">
+<div class="prompt input_prompt">In&nbsp;[3]:</div>
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>
+<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>
+
+<span class="n">x</span> <span class="o">=</span> <span class="p">[</span><span class="mi">10</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">30</span><span class="p">,</span><span class="mi">40</span><span class="p">]</span>
+<span class="n">y</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]</span>
+<span class="n">z</span> <span class="o">=</span> <span class="p">[[</span><span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">],</span>
+     <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">],</span>
+     <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">],</span>
+     <span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">]]</span>
+
+<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">go</span><span class="o">.</span><span class="n">Surface</span><span class="p">(</span>
+    <span class="n">opacity</span><span class="o">=</span><span class="mf">0.9</span><span class="p">,</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">,</span>
+    <span class="n">z</span><span class="o">=</span><span class="n">z</span><span class="p">,</span>
+    <span class="n">contours</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">Contours</span><span class="p">(</span>
+        <span class="n">x</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">X</span><span class="p">(</span>
+            <span class="n">highlight</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span>
+            <span class="n">highlightcolor</span><span class="o">=</span><span class="s2">&quot;#41a7b3&quot;</span><span class="p">,</span>
+        <span class="p">),</span>
+        <span class="n">y</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">Y</span><span class="p">(</span><span class="n">highlight</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
+        <span class="n">z</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">Z</span><span class="p">(</span><span class="n">highlight</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
+    <span class="p">)</span>
+<span class="p">)]</span>
+
+<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>
+    <span class="n">scene</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">Scene</span><span class="p">(</span>
+        <span class="n">xaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
+        <span class="n">yaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
+        <span class="n">zaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">ZAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
+    <span class="p">)</span>
+<span class="p">)</span>
+
+<span class="n">fig</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>
+<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s1">&#39;hover-surface-contours&#39;</span><span class="p">)</span>
+</pre></div>
+
+</div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+<div class="prompt output_prompt">Out[3]:</div>
+
+
+
+<div class="output_html rendered_html output_subarea output_execute_result">
+<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2831.embed" height="525px" width="100%"></iframe>
+</div>
+
+</div>
+
+</div>
+</div>
+
+</div>
+<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
+</div>
+<div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h4 id="Reference">Reference<a class="anchor-link" href="#Reference">&#182;</a></h4>
+</div>
+</div>
+</div>
+<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
+</div>
+<div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>See <a href="https://plot.ly/python/reference/#layout-scene">https://plot.ly/python/reference/#layout-scene</a> and <a href="https://plot.ly/python/reference/#surface-contours">https://plot.ly/python/reference/#surface-contours</a> for more information and options!</p>
+
+</div>
+</div>
+</div>
+
+
+{% endraw %}