3D sample

Reza Karimi · Reza Karimi · commit dfa34bae0d8a · 2020-05-29T18:06:16.000+02:00
diff --git a/custom-plotly.js b/custom-plotly.js
@@ -0,0 +1,5 @@
+var Plotly = require('plotly.js/lib/core.js');
+Plotly.register([
+    require('plotly.js/lib/surface'),
+]);
+module.exports = Plotly;
diff --git a/index.html b/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang="en">
   <head>
-    <meta charset=utf-8>
+    <meta charset="utf-8" />
     <title>plotly-webpack</title>
   </head>
   <body>
-    <div id="gd"></div>
+    <div id="myDiv"></div>
     <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,3 +1,31 @@
-var Plotly = require('plotly.js');
+var Plotly = require('./custom-plotly');
 
-Plotly.plot("gd", [{ x: [0, 1], y: [0, 1] }]);
+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'
+    }];
+
+    var layout = {
+        title: 'Mt Bruno Elevation',
+        autosize: false,
+        width: 500,
+        height: 500,
+        margin: {
+            l: 65,
+            r: 50,
+            b: 65,
+            t: 90,
+        }
+    };
+    Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/package.json b/package.json
@@ -5,18 +5,22 @@
   "main": "index.js",
   "scripts": {
     "webpack-dev": "webpack --mode=development --devtool false",
-    "webpack-prod": "webpack --mode=production"
+    "webpack-prod": "webpack --mode=production",
+    "browserify-prod": "browserify index.js -p [minifyify --no-map] > bundle.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "compression-webpack-plugin": "^4.0.0",
     "ify-loader": "^1.1.0",
     "transform-loader": "^0.2.4",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10"
   },
   "dependencies": {
+    "browserify": "^16.5.1",
+    "minifyify": "^7.3.5",
     "plotly.js": "^1.52.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,5 @@
 var webpack = require('webpack');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
   entry: "./index.js",
@@ -16,5 +17,6 @@ module.exports = {
           ]
       },
     ]
-  }
+  },
+  plugins: [new CompressionPlugin()]
 };

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`var webpack = require('webpack');`
	`2`	`+const CompressionPlugin = require('compression-webpack-plugin');`
`2`	`3`
`3`	`4`	`module.exports = {`
`4`	`5`	`entry: "./index.js",`
`@@ -16,5 +17,6 @@ module.exports = {`
`16`	`17`	`]`
`17`	`18`	`},`
`18`	`19`	`]`
`19`		`- }`
	`20`	`+ },`
	`21`	`+ plugins: [new CompressionPlugin()]`
`20`	`22`	`};`