js example using surface contours attribute

michaelbabyn · michaelbabyn · commit 806bc0ff2a49 · 2018-10-09T16:44:47.000-04:00
diff --git a/_posts/plotly_js/3d/3d-surface/2018-10-09-surface-contours.html b/_posts/plotly_js/3d/3d-surface/2018-10-09-surface-contours.html
@@ -0,0 +1,52 @@
+---
+name: Surface Plot With Contours
+plot_url: https://codepen.io/plotly/embed/dgvpjE/?height=601&theme-id=15263&default-tab=result
+language: plotly_js
+suite: 3d-surface
+order: 0.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  Display and customize contour data for each axis using the `contours` attribute ([reference](plot.ly/javascript/reference/#surface-contours)).
+
+---
+
+Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
+function unpack(rows, key) {
+  return rows.map(function(row) { return row[key]; });
+}
+var z_data=[ ]
+for(i=0;i<24;i++)
+{
+  z_data.push(unpack(rows,i));
+}
+
+var data = [{
+  z: z_data,
+  type: 'surface',
+  contours: {
+    z: {
+      show:true,
+      usecolormap: true,
+      highlightcolor:"#42f462",
+      project:{z: true}
+    }
+  }
+}];
+
+var layout = {
+  title: 'Mt Bruno Elevation With Projected Contours',
+  scene: {camera: {eye: {x: 1.87, y: 0.88, z: -0.64}}},
+  autosize: false,
+  width: 500,
+  height: 500,
+  margin: {
+    l: 65,
+    r: 50,
+    b: 65,
+    t: 90,
+  }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
