forked from plotly/documentation
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request plotly#1128 from plotly/3d-hover-options
3d hover options
- Loading branch information
Showing
7 changed files
with
850 additions
and
0 deletions.
There are no files selected for viewing
55 changes: 55 additions & 0 deletions
55
_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_spike_settings.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| name: Customize Hover for Spikelines | ||
| plot_url: https://codepen.io/plotly/embed/NOgjrR/?height=500&theme-id=15263&default-tab=result | ||
| language: plotly_js | ||
| suite: 3d-hover | ||
| order: 1 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| 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. | ||
| --- | ||
|
|
||
| function getrandom(num , mul) | ||
| { | ||
| var value = [ ]; | ||
| for(i=0;i<=num;i++) | ||
| { | ||
| var rand = Math.random() * mul; | ||
| value.push(rand); | ||
| } | ||
| return value; | ||
| } | ||
|
|
||
|
|
||
| var data=[ | ||
| { | ||
| opacity:0.4, | ||
| type: 'scatter3d', | ||
| x: getrandom(50 , -75), | ||
| y: getrandom(50 , -75), | ||
| z: getrandom(50 , -75), | ||
| }, | ||
| ]; | ||
| var layout = { | ||
| scene:{ | ||
| xaxis: { | ||
| spikecolor: '#1fe5bd', | ||
| spikesides: false, | ||
| spikethickness: 6 | ||
| }, | ||
| yaxis: { | ||
| spikecolor: '#1fe5bd', | ||
| spikesides: false, | ||
| spikethickness: 6 | ||
| }, | ||
| zaxis: { | ||
| spikecolor: '#1fe5bd', | ||
| spikethickness: 6 | ||
| } | ||
| }, | ||
| }; | ||
| Plotly.newPlot('myDiv', data, layout); | ||
|
|
47 changes: 47 additions & 0 deletions
47
_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_surface_contour.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| name: Customize Hover for Surface Contours | ||
| plot_url: https://codepen.io/plotly/embed/qJjmbQ/?height=500&theme-id=15263&default-tab=result | ||
| language: plotly_js | ||
| suite: 3d-hover | ||
| order: 2 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default. | ||
| These are customized by styling the [`contours`](https://plot.ly/javascript/reference/#surface-contours) | ||
| attribute in the surface trace. | ||
| --- | ||
|
|
||
| x = [10,20,30,40] | ||
| y = [0,1,2,3] | ||
| z = [ | ||
| [2,2,2,3], | ||
| [1,1,1,1], | ||
| [1,1,0,0], | ||
| [0,0,0,0] | ||
| ]; | ||
|
|
||
| var data=[ | ||
| { | ||
| opacity:0.9, | ||
| type: 'surface', | ||
| x:x, y:y, z:z, | ||
| contours: { | ||
| x: { | ||
| highlight: true, | ||
| highlightcolor: "#41a7b3" | ||
| }, | ||
| y: { highlight: false }, | ||
| z: { highlight: false} | ||
| } | ||
| }, | ||
| ]; | ||
| var layout = { | ||
| scene:{ | ||
| xaxis: { showspikes: false }, | ||
| yaxis: { showspikes: false }, | ||
| zaxis: { showspikes: false } | ||
| }, | ||
| }; | ||
| Plotly.newPlot('myDiv', data, layout); | ||
|
|
13 changes: 13 additions & 0 deletions
13
_posts/plotly_js/layout/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| title: Javascript Graphing Library D3.js-based Charts with 3d Hover Options | Examples | Plotly | ||
| name: 3D Hover Options | ||
| permalink: javascript/3d-hover/ | ||
| description: How to customize hover options for 3d charts. | ||
| layout: base | ||
| language: plotly_js | ||
| page_type: example_index | ||
| has_thumbnail: false | ||
| display_as: layout_opt | ||
| --- | ||
| {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-hover" | sort: "order" %} | ||
| {% include auto_examples.html examples=examples %} |
215 changes: 215 additions & 0 deletions
215
_posts/python/layout/3d-hover/2015-06-30-3d-hover-options.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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?">¶</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 [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">¶</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 [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">'#1fe5bd'</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">'#1fe5bd'</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">'#1fe5bd'</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">'hover-spikelines'</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">¶</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 [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">"#41a7b3"</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">'hover-surface-contours'</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">¶</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 %} |
Oops, something went wrong.