Axis options

docs/.vuepress/components/Cartesian.vue

@@ -0,0 +1,145 @@
+<template>
+  <vgg-graphic
+    :width="600"
+    :height="300"
+    :data="data">
+
+    <vgg-plot-title v-if="showX" text="x axis positioning" />
+
+    <vgg-plot-title v-if="showY" text="y axis positioning" />
+
+    <vgg-section
+      v-if="showX"
+      :x1="100"
+      :x2="550"
+      :y1="25"
+      :y2="200"
+      :scale-x="'xValues'"
+      :scale-y="'yValues'"
+    >
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :vjust="0"
+        :tickCount="5"
+        :tickExtra="false"
+        title="vjust = 0"
+      />
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :vjust="0.5"
+        :tickCount="5"
+        :tickExtra="false"
+        title="vjust = 0.5"
+      />
+
+      <vgg-x-axis
+        :scale="'xValues'"
+        :vjust="1"
+        :tickCount="5"
+        :tickExtra="false"
+        title="vjust = 1"
+      />
+
+    </vgg-section>
+
+    <vgg-section
+      v-if="showY"
+      :x1="50"
+      :x2="550"
+      :y1="25"
+      :y2="200"
+      :scale-x="'xValues'"
+      :scale-y="'yValues'"
+    >
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :hjust="0"
+        :tickCount="5"
+        title="hjust = 0"
+      />
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :hjust="0.5"
+        :tickCount="5"
+        title="hjust = 0.5"
+      />
+
+      <vgg-y-axis
+        :scale="'yValues'"
+        :tickExtra="false"
+        :hjust="1"
+        :tickCount="5"
+        title="hjust = 1"
+      />
+
+    </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

@@ -21,11 +21,23 @@
             :size="16"
             :shape="shape"
             :stroke="stroke"
-            :fill="fill"
+            :fill="fill(row.explanatory)"
             :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 />
@@ -100,14 +96,6 @@ export default {
   },
 
   computed : {
-    fill () {
-      if (this.color === 'both' || this.color === 'fill') {
-        return { scale: { scale: 'viridis', variable: 'explanatory' } }
-      } else {
-        return 'none'
-      }
-    },
-
     stroke () {
       if (this.color === 'both' || this.color === 'stroke') {
         return 'black'
@@ -133,7 +121,15 @@ export default {
 
       return newData
 
-    }
+    },
+
+    fill (value) {
+      if (this.color === 'both' || this.color === 'fill') {
+        return { val: value, scale: { type: 'viridis', domain: 'explanatory' } }
+      } else {
+        return 'none'
+      }
+    },
   }
 }
 </script>

docs/axes/cartesian.md

@@ -2,27 +2,116 @@
 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 default position of the x-axis is at `vjust = 'b'` (bottom of parent section).
 
-### Custom Ticks
+When using `vjust`, the x axis defaults to a height of 100px in screen coordinates.
+
+| 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                      | Local Coordinates      |
+| h    | false    | [Number]         | undefined | height of x axis                        | Local Coordinates      |
+| y1   | false    | [Number]         | undefined | starting y coordinate of x axis         | Local Coordinates      |
+| y2   | false    | [Number]         | undefined | ending y coordinate of x axis           | Local Coordinates      |
+
+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         | Local Coordinates     |
+| x2   | false    | [Number]         | undefined | ending x coordinate of x axis           | Local Coordinates     |
+
+<cartesian :showX="true" />
+
+### Y Axis Positioning
+
+Similar to the x axis, there are three options for positioning the y axis on the graph. The default position of the y-axis is at `hjust = 'l'` (left of parent section).
+
+When using `hjust`, the y axis defaults to a width of 100px in screen coordinates.
+
+| 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                      | Local Coordinates      |
+| w    | false    | [Number]         | undefined | width of y axis                         | Local Coordinates      |
+| x1   | false    | [Number]         | undefined | starting x coordinate of y axis         | Local Coordinates      |
+| x2   | false    | [Number]         | undefined | ending x coordinate of y axis           | Local Coordinates      |
+
+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         | Local Coordinates     |
+| y2   | false    | [Number]         | undefined | ending y coordinate of y axis           | Local Coordinates     |
+
+<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
+
+Note that if a `Function` is passed to the `format` prop to format labels before rendering, the function output must be of type `String`
+
+| 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     |

docs/marks/symbol.md

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

src/classes/CoordinateTree/CoordinateTransformation.js

@@ -72,13 +72,17 @@ export default class CoordinateTransformation {
     // before we actually use $$transform. This is necessary in a few cases.
     if (['categorical', 'temporal'].includes(this.domainTypes.x)) {
       this.getX = x => x.constructor === Number ? x : this.scaleX(x)
+      this.invertX = x => x.constructor === Number ? x : this.scaleX.invert(x)
     } else {
       this.getX = this.scaleX
+      this.invertX = this.scaleX.invert
     }
     if (['categorical', 'temporal'].includes(this.domainTypes.y)) {
       this.getY = y => y.constructor === Number ? y : this.scaleY(y)
+      this.invertY = y => y.constructor === Number ? y : this.scaleY.invert(y)
     } else {
       this.getY = this.scaleY
+      this.invertY = this.scaleY.invert
     }
 
     if (options.type === 'scale') {
@@ -128,6 +132,9 @@ export default class CoordinateTransformation {
     this.getX = this.scaleX
     this.getY = this.scaleY
 
+    this.invertX = this.scaleX.invert
+    this.invertY = this.scaleY.invert
+
     this.transform = ([x, y]) => {
       return [this.getX(x), this.getY(y)]
     }