Merge pull request plotly#1302 from plotly/isosurface-docs

Isosurface docs

_posts/plotly_js/3d/3d-isosurface/2019-04-16-basic-isosurface.html

@@ -0,0 +1,37 @@
+---
+name: Basic Isosurface Plot
+plot_url: https://codepen.io/plotly/embed/JVMMMq/?height=542&theme-id=15263&default-tab=result
+language: plotly_js
+suite: isosurface
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+    {
+        type: "isosurface",
+        x: [0,0,0,0,1,1,1,1],
+        y: [0,1,0,1,0,1,0,1],
+        z: [1,1,0,0,1,1,0,0],
+        value: [1,2,3,4,5,6,7,8],
+        isomin: 2,
+        isomax: 6,
+        colorscale: "Reds"
+    }
+];
+
+var layout = {
+    margin: {t:0, l:0, b:0},
+    scene: {
+        camera: {
+            eye: {
+                x: 1.88,
+                y: -2.12,
+                z: 0.96
+            }
+        }
+    }
+};
+
+Plotly.newPlot(graphDiv, data, layout, {showSendToCloud: true});

_posts/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-plotly_js_index.html

@@ -0,0 +1,14 @@
+---
+title: Javascript Graphing Library 3D Isosurface Plots | Examples | Plotly
+name: 3D Isosurface Plots
+permalink: javascript/3d-isosurface-plots/
+description: How to make 3D isosurface plots in javascript.
+layout: user-guide
+thumbnail: thumbnail/isosurface.jpg
+language: plotly_js
+has_thumbnail: true
+display_as: 3d_charts
+order: 15.5
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","isosurface" | sort: "order" %}
+{% include auto_examples.html examples=examples %}

_posts/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-slices.html

@@ -0,0 +1,51 @@
+---
+name: Isosurface with Additional Slices
+plot_url: https://codepen.io/plotly/embed/yrpppj/?height=542&theme-id=15263&default-tab=result
+language: plotly_js
+suite: isosurface
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
+  function unpack(rows, key) {
+  return rows.map(function(row) {return parseFloat(row[key]); });
+}
+
+var data = [
+    {
+        type: "isosurface",
+        x: unpack(rows, 'x'),
+        y: unpack(rows, 'y'),
+        z: unpack(rows, 'z'),
+        value: unpack(rows, 'value'),
+        isomin: -100,
+        isomax: 100,
+        surface: {show: true, count: 1, fill: 0.8},
+        slices: {z: {
+          show: true, locations: [-0.3, 0.5]
+        }},
+        caps: {
+            x: {show: false},
+            y: {show: false},
+            z: {show: false}
+        },
+    }
+];
+
+var layout = {
+    margin: {t:0, l:0, b:0},
+    scene: {
+        camera: {
+            eye: {
+                x: 1.86,
+                y: 0.61,
+                z: 0.98
+            }
+        }
+    }
+};
+
+Plotly.newPlot(graphDiv, data, layout, {showSendToCloud: true});
+});

_posts/plotly_js/3d/3d-isosurface/2019-04-16-multiple-isosurfaces-caps.html

@@ -0,0 +1,49 @@
+---
+name: Multiple Isosurfaces with Caps
+plot_url: https://codepen.io/plotly/embed/ZZvvPV/?height=542&theme-id=15263&default-tab=result
+language: plotly_js
+suite: isosurface
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
+  function unpack(rows, key) {
+  return rows.map(function(row) {return parseFloat(row[key]); });
+}
+
+var data = [
+    {
+        type: "isosurface",
+        x: unpack(rows, 'x'),
+        y: unpack(rows, 'y'),
+        z: unpack(rows, 'z'),
+        value: unpack(rows, 'value'),
+        isomin: -10,
+        isomax: 10,
+        surface: {show: true, count: 4, fill: 1, pattern: 'odd'},
+        caps: {
+            x: {show: true},
+            y: {show: true},
+            z: {show: true}
+        },
+    }
+];
+
+var layout = {
+    margin: {t:0, l:0, b:0},
+    scene: {
+        camera: {
+            eye: {
+                x: 1.86,
+                y: 0.61,
+                z: 0.98
+            }
+        }
+    }
+};
+
+Plotly.newPlot(graphDiv, data, layout, {showSendToCloud: true});
+});
+