Merge pull request #994 from plotly/js-heatmap-webgl-doc-update

Js heatmap webgl doc update

Author: priyatharsan

_posts/plotly_js/scientific/heatmap-webgl/2018-08-02-heatmap-webgl_example.html

@@ -0,0 +1,60 @@
+---
+name: WebGL Heatmaps
+plot_url: https://codepen.io/plotly/embed/rrvdXv/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: heatmap-webgl
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+function HeatmapGLfromImage() {
+    var img = new Image();
+    img.setAttribute(
+        "src",
+        processdata(
+            "https://images.plot.ly/plotly-documentation/images/heatmap-galaxy.jpg")
+    );
+}
+function processdata(url) {
+    var canvas = document.getElementById("canvas");
+    var img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = url;
+    var context = canvas.getContext("2d");
+    context.drawImage(img, 0, 0);
+    var w = img.width; var h = img.height;
+    var l = w * h;
+    var arr = context.getImageData(0, 0, w, h).data;
+
+    var zdata = [];
+    for (var i = 0; i < l; i++) {
+        // get color of pixel
+        var r = arr[i * 4]; // Red
+        var g = arr[i * 4 + 1]; // Green
+        var b = arr[i * 4 + 2]; // Blue
+        var a = arr[i * 4 + 3]; // Alpha
+        zdata.push(r + g + b + a);
+    }
+    var createGroupedArray = function(arr, chunkSize) {
+        var groups = [],
+            i;
+        for (i = 0; i < arr.length; i += chunkSize) {
+            groups.push(arr.slice(i, i + chunkSize));
+        }
+        return groups;
+    };
+    // Grouping zdata into 500x500
+    var zdata = createGroupedArray(zdata, 500);
+
+    var data = [
+        {
+            z: zdata,
+            type: "heatmapgl",
+            colorscale: "Picnic"
+        }
+    ];
+
+    Plotly.plot("myDiv", data);
+}
+
+HeatmapGLfromImage();

_posts/plotly_js/scientific/heatmap-webgl/2018-08-02-heatmap-webgl_plotlyjs_index.html

@@ -0,0 +1,16 @@
+---
+title: Javascript Heatmaps WebGL | Plotly
+name: WebGL Heatmaps
+permalink: javascript/heatmap-webgl/
+description: How to make webGL based heatmaps in Javascript with Plotly.
+layout: user-guide
+has_thumbnail: true
+thumbnail: thumbnail/heatmap-webgl.jpg
+language: plotly_js
+page_type: example_index
+display_as: scientific
+order: 3
+redirect_from: javascript-graphing-library/heatmap-webgl/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","heatmap-webgl" | sort: "order" %}
+{% include auto_examples.html examples=examples %}