Skip to content

Commit

Permalink
Axis options (#53)
Browse files Browse the repository at this point in the history 
* feat: more classification methods

* docs: binning docs

* chore: push yarn.lock and package.json

* fix: linter

* docs: adding missing plottitle docs

* Update docs/transform/binning.md

Co-Authored-By: GraceGSy <[email protected]>

* docs: fic documentation error for manual binning

* fix: remove uniqueValues binning method

* feat: Symbol Mark, see sandbox TestSymbol graph

* docs: symbol mark demo component added to docs

* docs: filling in explanatory write-up for symbol mark

* docs: minor change in example symbol graph

* feat: tooltip + links for symbol marks

* refactor: scaled symbol size, deprecate vgg-point

* refactor: remove tooltip and html linking from symbol

* feat: additional axis style options

* feat: axis titles with styling options and hjust + vjust

* refactor: titleHjust, titleVjust, add tickSize prop

* feat: preliminary work on auto positioning for axes

* fix: hardcode positioning for when axes are on top/right

* feat: automatic positioning of axes in nested sections

* feat: option to add extra tick at start of axes

* docs: axis docs

* refactor: extraTick logic added to tickData()

* fix: nested axes now accurately sized and positioned

* feat: additional axis positioning options using x, y, x1, x2, y1, y2

* docs: update axis docs, add examples

* fix: convert vgg-symbol to vgg-point

* feat: rendering of label for extraTick can now be toggled

* fix: coordinate tree updates now only apply to branch and its children

* chore: minor changes to default behavior in axes and scales

* fix: more robust logic for positioning and sizing axes using screen coordinates

* docs: updated axis docs, minor changes to axis code

* test: change axes to intersect at center as per original

* fix: broken SymbolMarkDemo

* fix: change != to !==

* fix: axes x/x1/x2/w and y/y1/y2/h are now defined in local coordinates
  • Loading branch information
@GraceGSy @luucvanderzee
GraceGSy authored and luucvanderzee committed Feb 26, 2019
1 parent 6b647e9 commit d54380f
Show file tree
Hide file tree
Showing 25 changed files with 998 additions and 201 deletions.
145 changes: 145 additions & 0 deletions docs/.vuepress/components/Cartesian.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
48 changes: 22 additions & 26 deletions docs/.vuepress/components/SymbolMarkDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 />
Expand Down Expand Up @@ -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'
Expand All @@ -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>
119 changes: 104 additions & 15 deletions docs/axes/cartesian.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
2 changes: 2 additions & 0 deletions docs/marks/symbol.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Symbol Mark

# Component tag

`<vgg-symbol>`

`<vgg-point>`

# Description
Expand Down
7 changes: 7 additions & 0 deletions src/classes/CoordinateTree/CoordinateTransformation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down Expand Up @@ -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)]
}
Expand Down
Loading

0 comments on commit d54380f

Please sign in to comment.