initial commit

mauriciopoppe · Mar 28, 2018 · 2a05a12 · 2a05a12
1 parent f3ff111
commit 2a05a12
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 102 deletions.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -0,0 +1,21 @@
+## Development
+
+**Requires Node 6!**
+
+After cloning the repo and running `npm install`
+
+```sh
+node site.js    // generate the examples shown on index.html
+npm start
+```
+
+Main page: `http://localhost:9966/site`, development page: `http://localhost:9966/site/playground.html`
+
+Deploy steps:
+
+- `npm run dist` (make sure to commit the dist files after this command)
+- `npm version major|minor|patch`
+- `git push origin master`
+- `npm run deploy`
+- `npm publish`
+
diff --git a/README.md b/README.md
@@ -17,21 +17,23 @@ is evaluated again with the new bounds, result: infinite graphs!
 
 **NOTE: function-plot requires d3 v3**
 
+[![Edit l6k20jrlm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l6k20jrlm)
+
 [**homepage**](http://mauriciopoppe.github.io/function-plot/)
 
 [**examples on observablehq.com**](https://beta.observablehq.com/@liuyao12/function-plot), thanks to [@liuyao12](https://github.com/liuyao12)
 
-## Install
+## Quickstart
 
 ```sh
-$ npm install --save function-plot
+npm install d3@3 function-plot
 ```
 
 ## Usage with browserify
 
 ```js
-var d3 = window.d3
-var functionPlot = require('function-plot');
+window.d3 = require('d3');
+const functionPlot = require('function-plot');
 functionPlot({
   // options below
 })
@@ -351,25 +353,6 @@ Selectors (sass)
 }
 ```
 
-## Development
-
-After cloning the repo and running `npm install`
-
-```sh
-node site.js    // generate the examples shown on index.html
-npm start
-```
-
-Main page: `http://localhost:9966/site`, development page: `http://localhost:9966/site/playground.html`
-
-Deploy steps:
-
-- `npm run dist` (make sure to commit the dist files after this command)
-- `npm version major|minor|patch`
-- `git push origin master`
-- `npm run deploy`
-- `npm publish`
-
 ## License
 
 2015 MIT © Mauricio Poppe

diff --git a/package.json b/package.json
@@ -2,18 +2,41 @@
   "name": "function-plot",
   "version": "1.18.1",
   "description": "A simple 2d function plotter powered by d3",
-  "bugs": "https://github.com/mauriciopoppe/function-plot/issues",
   "license": "MIT",
-  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mauriciopoppe/function-plot"
+  },
+  "bugs": "https://github.com/mauriciopoppe/function-plot/issues",
   "homepage": "http://mauriciopoppe.github.io/function-plot/",
   "author": "Mauricio Poppe <mauricio.poppe@gmail.com>",
+  "main": "lib/index.js",
+  "scripts": {
+    "browserify": "browserify index.js -o dist/function-plot.js --standalone functionPlot",
+    "build": "npm run browserify && npm run minify",
+    "deploy": "gh-pages-deploy",
+    "dist": "npm run lint && npm run build",
+    "dist:cp": "cp dist/function-plot.js site/js/function-plot.js",
+    "fetch": "curl -o site/partials/brcdn-module.html -L https://www.brcdn.org/?module=function-plot&version=latest",
+    "html": "node site.js",
+    "istanbul": "istanbul cover _mocha --report lcovonly 2> /dev/null -- -R spec test/",
+    "lint": "standard",
+    "minify": "cat dist/function-plot.js | uglifyjs -o dist/function-plot.js",
+    "pre_publish": "npm run lint",
+    "start": "budo index.js:site/js/function-plot.js -- --standalone functionPlot",
+    "test": "echo 'no tests!'",
+    "test:watch": "nodemon --watch lib --watch test --watch index.js --exec 'npm test'"
+  },
   "files": [
     "/*",
     "!/site/"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mauriciopoppe/function-plot"
+  "gh-pages-deploy": {
+    "prep": [
+      "dist:cp",
+      "html"
+    ],
+    "staticpath": "site"
   },
   "keywords": [
     "function-plot",
@@ -23,6 +46,13 @@
     "derivative",
     "2d"
   ],
+  "standard": {
+    "ignore": [
+      "sandbox/",
+      "site/",
+      "dist/"
+    ]
+  },
   "dependencies": {
     "built-in-math-eval": "^0.3.0",
     "clamp": "^1.0.1",
@@ -50,35 +80,5 @@
     "nodemon": "^1.3.7",
     "standard": "^4.5.4",
     "uglify-js": "~2.4.12"
-  },
-  "scripts": {
-    "istanbul": "istanbul cover _mocha --report lcovonly 2> /dev/null -- -R spec test/",
-    "lint": "standard",
-    "test": "echo 'no tests!'",
-    "test:watch": "nodemon --watch lib --watch test --watch index.js --exec 'npm test'",
-    "start": "budo index.js:site/js/function-plot.js -- --standalone functionPlot",
-    "fetch": "curl -o site/partials/brcdn-module.html -L https://www.brcdn.org/?module=function-plot&version=latest",
-    "html": "node site.js",
-    "pre_publish": "npm run lint",
-    "browserify": "browserify index.js -o dist/function-plot.js --standalone functionPlot",
-    "minify": "cat dist/function-plot.js | uglifyjs -o dist/function-plot.js",
-    "build": "npm run browserify && npm run minify",
-    "dist": "npm run lint && npm run build",
-    "dist:cp": "cp dist/function-plot.js site/js/function-plot.js",
-    "deploy": "gh-pages-deploy"
-  },
-  "gh-pages-deploy": {
-    "prep": [
-      "dist:cp",
-      "html"
-    ],
-    "staticpath": "site"
-  },
-  "standard": {
-    "ignore": [
-      "sandbox/",
-      "site/",
-      "dist/"
-    ]
   }
 }
diff --git a/site.js b/site.js
@@ -44,7 +44,3 @@ var parsed = comments.map(function (c) {
 var output = fs.createWriteStream('./site/partials/examples.html')
 output.write(jade.compileFile('./site/jade/examples.jade')({comments: parsed}))
 output.end()
-
-var wzrd = fs.createWriteStream('./site/partials/wzrd.html')
-wzrd.write(jade.compileFile('./site/jade/wzrd.jade')({version: version}))
-wzrd.end()
diff --git a/site/index.html b/site/index.html
@@ -40,7 +40,7 @@ <h1>
         <!--github-->
         <iframe src="https://ghbtns.com/github-btn.html?user=mauriciopoppe&repo=function-plot&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
         <!--twitter-->
-        <a href="https://twitter.com/share" class="twitter-share-button" data-via="iMauricio">Tweet</a>
+        <a href="https://twitter.com/share" class="twitter-share-button" data-via="mauricio_poppe">Tweet</a>
         <script>!function(d,s,id){var
         js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
       </div>
@@ -60,8 +60,8 @@ <h1>
     whenever the graph scale is modified the function is evaluated again with
     the new bounds, result: infinite graphs!
   </p>
-  <p class="center-block" style="width: 600px;">
-    <span id="description-sample"></span>
+  <p class="center-block">
+    <iframe src="https://codesandbox.io/embed/l6k20jrlm" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
   </p>
 
   <p>
@@ -94,21 +94,27 @@ <h1>
 </section>
 
   <div class="container">
-    <p>Bundled versions powered by <a href="https://wzrd.in">wzrd.in</a>
-    <!--<a href="https://www.brcdn.org/?module=function-plot&version=latest">Browserify CDN</a></p>-->
-    <!--<div id="brcdn"></div>-->
 
-    <div id="wzrd"></div>
+    <pre><code>
+      npm i d3@v3 function-plot
+    </code></pre>
+
+    <pre><code>
+      window.d3 = require('d3')
+      const functionPlot = require('function-plot')
+      functionPlot({
+        // ..options
+      })
+    </code></pre>
+
     <hr/>
-    <p>
-      with bower:
-    </p>
-    <pre><code>$ bower install function-plot</code></pre>
-    <p>
-      and include it in your webpage as
-    </p>
-    <pre><code>&lt;script src=&quot;bower_components/d3/d3.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;bower_components/function-plot/dist/function-plot.js&quot;&gt;&lt;/script&gt;</code></pre>
+
+    <p>The old way:</p>
+    <pre><code id="old-way">
+      &lt;script src=&quot;https://unpkg.com/d3@3/d3.min.js&quot;&gt;&lt;/script&gt;
+      &lt;script src=&quot;https://unpkg.com/function-plot@1/dist/function-plot.js&quot;&gt;&lt;/script&gt;
+    </code></pre>
+
   </div>
 
 <section><div class="container">Examples</div></section>
@@ -117,20 +123,11 @@ <h1>
     <div id="examples"></div>
   </div>
 
-<section>
-  <div class="container">Playground</div>
-</section>
-
-  <div class="container">
-    <a class="jsbin-embed" href="https://jsbin.com/heroqufiza/1/embed?js,output&height=500px">JS Bin on jsbin.com</a>
-    <script src="https://static.jsbin.com/js/embed.min.js?3.34.1"></script>
-  </div>
-
 <div class="text-center footer">
   <div class="container">
     <div class="about">
       <div>
-        Created by <a href="https://twitter.com/iMauricio">Mauricio Poppe</a> $\cdots$
+        Created by <a href="https://twitter.com/mauricio_poppe">Mauricio Poppe</a> $\cdots$
         Inspired by <a href="https://metricsgraphicsjs.org/">MetricGraphics</a>
       </div>
     </div>

diff --git a/site/jade/wzrd.jade b/site/jade/wzrd.jade
diff --git a/site/partials/wzrd.html b/site/partials/wzrd.html