Initial TODO List #2

- update Readme

README.md

@@ -1,92 +1,67 @@
 # vue-vega
 
-> Vega Visualization Gramma extention for Vue
+Visualization Grammar for Vue.js 
 
-Vega Lite Gramma extension
+## Features & characteristics:
 
-Original Vega gramma file
+* Vega-lite support from 2.0.0
+* Dependencies on vega and vega-lite
+* Vue components as vega specs
+* `vl-spec` component to use in template
+* +99% test coverage
 
-```
-{
-  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
-  "description": "A simple bar chart with embedded data.",
-  "data": {
-    "values": [
-      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
-      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
-      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
-    ]
-  },
-  "mark": "bar",
-  "encoding": {
-    "x": {"field": "a", "type": "ordinal"},
-    "y": {"field": "b", "type": "quantitative"}
-  }
-}
-```
-
-We can define in Vue component style 
+## Install & basic usage
 
+```bash
+  npm install vue-vega
 ```
-<template lang="vgm-lite">
-  <vg-spec :description="description">
-    <vg-bar v-encode="value in values" :x="v.a" :y="v.b"/>
-  </vg-spec>
+
+```vue
+<template>
+  <vl-spec
+    :data="values"
+    :mark="bar"
+    :encoding="{
+        x: {field: 'a', type: 'ordinal'},
+        y: {field: 'b', type: 'quantitative'}
+    }"
+  />
 </template>
 
 <script>
-export default { 
-  props: {
-    descritption: {
-      type: String,
-      default: "A simple bar chart with embedded data."
-    }
-  }
-  data () {
-    return {
-      values: [
-        {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
-        {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
-        {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
-      ]
-  }
+  export default{
+    data () {
+      return {
+        values: [
+          {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
+          {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
+          {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
+        ]
+      }
     }
   }
-}
 </script>
 
-<style lang="vgs-lite" scoped>
-  vg-bar {
-    filled: true,
-    color: #4682b4,
-    stroke: #f3404 
-  }
-</style>
-
-
 ```
+## JSFiddle
 
+Example JSFiddle
 
-## Build Setup
 
-``` bash
-# install dependencies
-npm install
+## Contributing
 
+```bash
 # serve with hot reload at localhost:8080
 npm run dev
 
-# build for production with minification
-npm run build
+# distribution build with minification
+npm run build:bundle
 
-# build for production and view the bundle analyzer report
-npm run build --report
+# build the _docs into docs
+npm run build:docs
 
 # run unit tests
-npm run unit
-
-# run all tests
-npm test
+npm run test
 ```
 
 For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).