add javascript documentation for 3D hover options

michaelbabyn · michaelbabyn · commit 052c96e7e920 · 2018-10-11T13:12:41.000-04:00
diff --git a/_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_spike_settings.html b/_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_spike_settings.html
@@ -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);
+  
diff --git a/_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_surface_contour.html b/_posts/plotly_js/layout/3d-hover-options/2015-08-12-3d_hover_surface_contour.html
@@ -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);
+  
diff --git a/_posts/plotly_js/layout/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html b/_posts/plotly_js/layout/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html
@@ -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 %}
