Axis options

docs/.vuepress/components/Cartesian.vue

@@ -0,0 +1,145 @@
+<template>
+  <vgg-graphic
+    :width="600"
+    :height="300"
+    :data="data">
+
+    <vgg-section
+      v-if="showX"
+      :x1="50"
+      :x2="550"
+      :y1="25"
+      :y2="275"
+      :scale-x="'xValues'"
+      :scale-y="'yValues'"
+    >
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :tickExtra="false"
+        :x1="50"
+        :x2="550"
+        :vjust="0.2"
+      />
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :tickExtra="false"
+        :x1="50"
+        :x2="450"
+        :vjust="0.5"
+      />
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :tickExtra="false"
+        :x1="50"
+        :x2="250"
+        :vjust="0.8"
+        :tickCount="5"
+      />
+
+    </vgg-section>
+
+    <vgg-section
+      v-if="showY"
+      :x1="50"
+      :x2="550"
+      :y1="25"
+      :y2="275"
+      :scale-x="'xValues'"
+      :scale-y="'yValues'"
+    >
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :y1="25"
+        :y2="250"
+        :hjust="0.2"
+        :tickCount="5"
+      />
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :y1="50"
+        :y2="225"
+        :hjust="0.5"
+        :tickCount="5"
+      />
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :y1="100"
+        :y2="175"
+        :hjust="0.8"
+        :tickCount="5"
+      />
+
+    </vgg-section>
+
+    <vgg-section
+      v-if="showAll"
+      :x1="50"
+      :x2="550"
+      :y1="25"
+      :y2="250"
+      :scale-x="'xValues'"
+      :scale-y="'yValues'"
+    >
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        title="x axis"
+        :tickExtra="false"
+        :titleHjust="1.05"
+      />
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :tickCount="5"
+        title="y axis"
+      />
+
+    </vgg-section>
+
+  </vgg-graphic>
+</template>
+
+<script>
+export default {
+  props: {
+    showX : {
+      default: false
+    },
+
+    showY : {
+      default: false
+    },
+
+    showAll : {
+      default: false
+    }
+  },
+
+  computed: {
+    data () {
+      let colors = ['red', 'blue', 'green']
+      let data = { colors: [], xValues: [], yValues: [] }
+      for (let i = 0; i < 30; i++) {
+        let colorIndex = Math.floor(Math.random() * 3)
+        let color = colors[colorIndex]
+
+        data.colors.push(color)
+        data.xValues.push(Math.random() * 10)
+        data.yValues.push(Math.random() * 100)
+      }
+
+      return data
+    }
+  }
+}
+</script>

docs/.vuepress/components/SymbolMarkDemo.vue

@@ -24,8 +24,20 @@
             :fill="fill"
             :stroke-width="1"
           />
+
         </vgg-map>
 
+        <vgg-x-axis
+          :scale="[0, 150]"
+          :vjust="-.05"
+        />
+
+        <vgg-y-axis
+          :scale="'dependent'"
+          :hjust="-.05"
+          flip
+        />
+
       </vgg-section>
 
       <vgg-x-grid
@@ -44,22 +56,6 @@
         :scale="'dependent'"
       />
 
-      <vgg-x-axis
-        :x1="100"
-        :x2="500"
-        :y1="0"
-        :y2="50"
-        :scale="'explanatory'"
-      />
-
-      <vgg-y-axis
-        :x1="500"
-        :x2="550"
-        :y1="50"
-        :y2="450"
-        :scale="'dependent'"
-      />
-
     </vgg-graphic>
 
     <br />
@@ -102,7 +98,7 @@ export default {
   computed : {
     fill () {
       if (this.color === 'both' || this.color === 'fill') {
-        return { scale: { scale: 'viridis', variable: 'explanatory' } }
+        return { get: 'explanatory', scale: { type: 'viridis', domain: 'explanatory' } }
       } else {
         return 'none'
       }

docs/axes/cartesian.md

@@ -2,27 +2,114 @@
 title: Cartesian Axes
 ---
 
-# Cartesian Axes
+# Component tag
 
-<div>
-	<cartesianaxes></cartesianaxes>
-</div>
+`<vgg-x-axis>`
 
-The standard axis takes the following props:
+`<vgg-y-axis>`
 
-Prop      | Required | Default   |  Description 
-----------|----------|-----------|----------------------------
-          |          |           | 
-
+# Description
 
-<br />
+Axes are used as reference scales for values in the graph. Each axis is typically mapped to a single dimension or variable.
 
-### Axis Domain
+# Props
 
-### Multi-axis
+| Prop   | Required | Regular types           | Default   | Description                                               |
+| ------ | -------- | ----------------------- | --------- | --------------------------------------------------------- |
+| scale  | true     | [Array, String, Object] | undefined | range of values covered by the axis, can be variable name |
+| flip   | false    | [Boolean]               | false     | direction of tick and axis labels                         |
 
-### Gridlines
+### X Axis Positioning
 
-### Format Tick Values
+There are three options for positioning the x axis on the graph. The `y` prop takes precedence, followed by `y1` and `y2`, lastly `vjust` encodes default behavior.
 
-### Custom Ticks
+When using `y` or `vjust`, the x axis defaults to a height of 100px.
+
+| Prop | Required | Regular types    | Default   | Description                             | Unit(s)                |
+| ---- | -------- | ---------------- | --------- | --------------------------------------- | ---------------------- |
+| vjust| false    | [Number, String] | 'b'       | position of x axis                      | Number between 0 and 1 |
+| y    | false    | [Number]         | undefined | position of x axis                      | Screen pixels          |
+| y1   | false    | [Number]         | undefined | starting y coordinate of x axis         | Screen pixels          |
+| y2   | false    | [Number]         | undefined | ending y coordinate of x axis           | Screen pixels          |
+
+By default the x axis spans the entire width of the section. To customize the width of the x axis, it is possible to provide `x1` and `x2` as start and end coordinates.
+
+| Prop | Required | Regular types    | Default   | Description                             | Unit(s)               |
+| ---- | -------- | ---------------- | --------- | --------------------------------------- | --------------------- |
+| x1   | false    | [Number]         | undefined | starting x coordinate of x axis         | Screen pixels         |
+| x2   | false    | [Number]         | undefined | ending x coordinate of x axis           | Screen pixels         |
+
+<cartesian :showX="true" />
+
+### Y Axis Positioning
+
+Similar to the x axis, there are three options for positioning the y axis on the graph. The `x` prop takes precedence, followed by `x1` and `x2`, lastly `hjust` encodes default behavior.
+
+When using `x` or `hjust`, the y axis defaults to a width of 100px.
+
+| Prop | Required | Regular types    | Default   | Description                             | Unit(s)                |
+| ---- | -------- | ---------------- | --------- | --------------------------------------- | ---------------------- |
+| hjust| false    | [Number, String] | 'l'       | position of y axis                      | Number between 0 and 1 |
+| x    | false    | [Number]         | undefined | position of y axis                      | Screen pixels          |
+| x1   | false    | [Number]         | undefined | starting x coordinate of y axis         | Screen pixels          |
+| x2   | false    | [Number]         | undefined | ending x coordinate of y axis           | Screen pixels          |
+
+By default the y axis spans the entire height of the section. To customize the height of the y axis, it is possible to provide `y1` and `y2` as start and end coordinates.
+
+| Prop | Required | Regular types    | Default   | Description                             | Unit(s)               |
+| ---- | -------- | ---------------- | --------- | --------------------------------------- | --------------------- |
+| y1   | false    | [Number]         | undefined | starting y coordinate of y axis         | Screen pixels         |
+| y2   | false    | [Number]         | undefined | ending y coordinate of y axis           | Screen pixels         |
+
+<cartesian :showY="true" />
+
+### Main Line
+
+| Prop           | Required | Regular types    | Default   | Description                             | Unit(s)                    |
+| -------------- | -------- | ---------------- | --------- | --------------------------------------- | -------------------------- |
+| domain         | false    | [Boolean]        | true      | if true render axis main line           |                            |
+| domainColor    | false    | [String]         | 'black'   | color of main line                      | Named color, hex, rgb, hsl |
+| domainOpacity  | false    | [Number]         | 1         | opacity of main line                    | Number between 0 and 1     |
+| domainWidth    | false    | [Number]         | 1         | stroke width of main line               | Screen pixels              |
+
+### Labels
+
+| Prop           | Required | Regular types      | Default     | Description                             | Unit(s)                    |
+| -------------- | -------- | ------------------ | ----------- | --------------------------------------- | -------------------------- |
+| labels         | false    | [Boolean]          | true        | if true render labels                   |                            |
+| format         | false    | [String, Function] | undefined   | formatting of axis labels               |                            |
+| labelColor     | false    | [String]           | 'black'     | color of labels                         | Named color, hex, rgb, hsl |
+| labelFont      | false    | [String]           | 'Helvetica' | font used for axis labels               | Named font                 |
+| labelFontSize  | false    | [Number]           | 10          | size of font used for axis labels       | Screen pixels              |
+| labelFontWeight| false    | [String, Number]   | 'normal'    | weight of font used for axis labels     | Any valid css font weight  |
+| labelOpacity   | false    | [Number]           | 1           | opacity of labels                       | Number between 0 and 1     |
+| labelRotate    | false    | [Boolean]          | false       | if true rotate labels                   | Degrees                    |
+
+### Ticks
+
+| Prop           | Required | Regular types    | Default     | Description                                    | Unit(s)                    |
+| -------------- | -------- | ---------------- | ----------- | ---------------------------------------------- | -------------------------- |
+| ticks          | false    | [Boolean]        | true        | if true render ticks                           |                            |
+| tickColor      | false    | [String]         | 'black'     | color of ticks                                 | Named color, hex, rgb, hsl |
+| tickValues     | false    | [Array]          | undefined   | custom tick positions                          |                            |
+| tickCount      | false    | [Number]         | 10          | number of ticks on the axis, equal intervals   |                            |
+| tickExtra      | false    | [Boolean]        | true        | if true, render extra tick at axis origin      |                            |
+| tickOpacity    | false    | [Number]         | 1           | opacity of ticks                               | Number between 0 and 1     |
+| tickSize       | false    | [Number]         | 7           | length of ticks                                | Screen pixels              |
+| tickWidth      | false    | [Number]         | 0.5         | stroke width of ticks                          | Screen pixels              |
+
+### Title
+
+| Prop            | Required | Regular types    | Default     | Description                             | Unit(s)                    |
+| --------------- | -------- | ---------------- | ----------- | --------------------------------------- | -------------------------- |
+| titleHjust      | false    | [String, Number] | depends     | position of axis title relative to axis; default -0.08 for x-axis; default 'center' for y-axis | Number between 0 and 1     |
+| titleVjust      | false    | [String, Number] | depends     | position of axis title relative to axis; default 'center' for x-axis; default 1.05 for y-axis  | Number between 0 and 1     |
+| title           | false    | [String]         | ''          | text to render as axis title            |                            |
+| titleAnchorPoint| false    | [String]         | 'center'    | baseline and alignment of title text    |                            |
+| titleColor      | false    | [String]         | 'black'     | color of title                          | Named color, hex, rgb, hsl |
+| titleFont       | false    | [String]         | 'Helvetica' | font used for axis title                | Named font                 |
+| titleFontSize   | false    | [Number]         | 12          | size of font used for axis title        | Screen pixels              |
+| titleFontWeight | false    | [String, Number] | 'normal'    | weight of font used for axis title      | Any valid css font weight  |
+| titleOpacity    | false    | [Number]         | 1           | opacity of title                        | Number between 0 and 1     |
+
+<cartesian :showAll="true" />

docs/marks/symbol.md

@@ -4,6 +4,8 @@ title: Symbol Mark
 
 # Component tag
 
+`<vgg-symbol>`
+
 `<vgg-point>`
 
 # Description