Js heatmap webgl doc update

_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 %}