updating documentation

Gruntfile.js

@@ -8,7 +8,7 @@ grunt.initConfig({
   browserify: {
     dist: {
       files: {
-        'docs/d3-legend.js': ['src/web.js'],
+        'd3-legend.js': ['src/web.js'],
       },
       options: {
         browserifyOptions: { debug: true },
@@ -29,23 +29,16 @@ grunt.initConfig({
     }
   },
 
-  watch: {
-    // scripts: {
-      files: 'src/*.js',
-      tasks: [ 'browserify' ]
-    // }
-  },
-
   // Uglify js for build
   uglify: {
-    // build: {
-    //   files: {
-    //     'd3-legend.min.js': 'd3-legend.js'
-    //   }
-    // },
+    build: {
+      files: {
+        'd3-legend.min.js': 'd3-legend.js'
+      }
+    },
     docs: {
       files: {
-        'docs/d3-legend.js': 'd3-legend.js'
+        'docs/d3-legend.min.js': 'd3-legend.js'
       }
     },
     docsjs: {
@@ -60,10 +53,8 @@ grunt.initConfig({
   // Loading tasks
   grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-watch');
 
   // Registering tasks
-  grunt.registerTask('default', ['browserify']);
-  grunt.registerTask('watch', ['watch']);
+  grunt.registerTask('default', ['browserify', 'uglify']);
 
 };

docs/color.md

@@ -1,4 +1,4 @@
-d3.legend.**color()**
+d3.**legendColor()**
 
 Constructs a new color legend. The legend component expects a d3 scale as the basic input, but also has a number of optional parameters for changing the default display such as vertical or horizontal orientation, shape of the symbol next to the label, symbol sizing, and label formatting.
 

docs/index.html

@@ -121,7 +121,7 @@
   <header>
     <div class="container">
       <div class="txt-center">
-        <h1 class="column12">d3 SVG Legend</h1>
+        <h1 class="column12">d3 SVG Legend (v4)</h1>
         <div class="column6 prefix3">
           <p>Tired of making legends for your data visualizations? Me too, enjoy.</p>
           <p>A library to make legends in svg-land easy as pie.</p>
@@ -149,16 +149,29 @@ <h2>Usage</h2>
 
         <h3>Client-side</h3>
 
+        <h4>Version</h4>
+        <p>This is the version compatible with <b>d3v4</b>, <a href="">please go here for the version compatible with d3v3</a></p>
+
+        <p>Changes when moving to d3v4 of this component</p>
+        <ul>
+          <li>Flattened naming for accessing functions</li>
+          <ul>
+            <li>d3.legend.color => d3.legendColor</li>
+            <li>d3.legend.size => d3.legendSize</li>
+            <li>d3.legend.symbol => d3.legendSymbol</li>
+          </ul>
+          <li>NPM package no longer binds to global d3, is now just an object with the three legend functions</li>
+        </ul>
+
         <h4>CDN</h4>
         <p>You can add latest version of d3-legend hosted on cdnjs.<p>
         <a href="https://cdnjs.com/libraries/d3-legend">https://cdnjs.com/libraries/d3-legend</a>
 
         <h4>Include the file directly</h4>
         <p>You must include the <a href="http://d3js.org/">d3 library</a> before including the legend file. Then you can simply add the compiled js file to your website:</p>
         <ul>
-          <li><a href="https://raw.githubusercontent.com/susielu/d3-legend/master/d3-legend.min.js">All legends</a></li>
-          <li><a href="https://github.com/susielu/d3-legend/blob/master/d3-legend.js">All legends - human readable</a></li>
-
+          <li><a href="https://raw.githubusercontent.com/susielu/d3-legend/master/d3-legend.min.js">All legends (d3v4)</a></li>
+          <li><a href="https://github.com/susielu/d3-legend/blob/master/d3-legend.js">All legends - human readable (d3v4)</a></li>
         </ul>
 
         <h3>npm</h3>
@@ -628,8 +641,8 @@ <h2>Summary of Functions</h2>
 <script src="prism.js"></script>
 
 <script src="https://d3js.org/d3.v4.js"></script>
-<script src="d3-legend.js"></script>
+<script src="d3-legend.min.js"></script>
 
-<script src="docs.js"></script>
+<script src="docs.min.js"></script>
 <script src="ga.js"></script>
 </body>

docs/size.md

@@ -1,4 +1,4 @@
-d3.legend.**size()**
+d3.**legendSize()**
 
 Constructs a new size legend. The legend component expects a d3 scale as the basic input, but also has a number of optional parameters for changing the default display such as vertical or horizontal orientation, shape of the symbol next to the label, symbol sizing, and label formatting.
 

docs/symbol.md

@@ -1,4 +1,4 @@
-d3.legend.**symbol()**
+d3.**legendSymbol()**
 
 Constructs a new symbol legend. The legend component expects a d3 scale as the basic input, but also has a number of optional parameters for changing the default display such as vertical or horizontal orientation, shape of the symbol next to the label, symbol sizing, and label formatting.
 

package.json

@@ -6,8 +6,7 @@
   "files": [
     "src",
     "index.js",
-    "d3-legend.*",
-    "no-extend.js"
+    "d3-legend.*"
   ],
   "keywords": [
     "d3",
@@ -24,7 +23,6 @@
     "grunt": "0.4.5",
     "grunt-browserify": "3.8.0",
     "grunt-contrib-uglify": "0.9.1",
-    "grunt-contrib-watch": "^1.0.0",
     "marked": "0.3.5",
     "mocha": "2.2.5",
     "stringify": "3.1.0"
@@ -47,7 +45,6 @@
   },
   "homepage": "http://d3-legend.susielu.com",
   "dependencies": {
-    "d3": "4.2.1",
     "d3-array": "1.0.1",
     "d3-dispatch": "1.0.1",
     "d3-format": "1.0.2",