diff --git a/README.md b/README.md
index 05a2614..e5d615f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# gAxis [](https://codecov.io/gh/ft-interactive/g-axis)
+# gAxis [](https://codecov.io/gh/ft-interactive/g-axis)
Pre styled centralised repository of axis for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. Creates ordinal, linear or date axis that can be appended to the .plot obejct in the g-chartframe hopefully eliminating the need to code another standard axis or set up the tick format for a date sequence.
@@ -15,7 +15,7 @@ The FT axis styles---add the folowwing link in your index file header
```html
```
@@ -42,9 +42,9 @@ All examples shown are from the web frame style.
Create and call a y-axis first, as it returms .labelWidth(), which holds a value equal to the width of the widest tick label on the y-axis. This value is used to re-define the left or right margin of the chartFrame before defining the .range() of the x axis e.g.
yOrdinal axis where the width of 'Switzerland' is returned in .labelWidth()
-
+
The tick 'Dem Republic of Congo' is much longer so will leave less space for the x axis .range()
-
+
For more detail on .labelWidth() and its use in positioning see:
@@ -84,7 +84,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
Use the current frame dimensions to define your .range() and the .ticksize() and a .domian(). This will give you a basic working axis correctly positioned
@@ -101,7 +101,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
It is good practice to pass .plotDim(), .rem() .divisor() and .frameName to the axis when you first set it up as they are used in some of the in-built functionality, such as .banding() and .label() and attaching id tags used by the Pre-flight illustrator script. It would also be a good idea to pass .invert() and .logScale() at this point also.
@@ -131,16 +131,16 @@ currentFrame.plot()
Before you can position an axis you need to know the steps the g-axis component goes through to render left and right aligned axis when it is called. yLinear axis nearly always have a take into account a .tickSize(). To see what happen when you render a y-axis without a .tickSize() see the similar [yOrdinal postioning](#yordpos).
yLinear axis always take the left hand side of the currentFrame.plot() as their origin. Unless specified the default alignment for ylinear is right. The following example assumes a standard (width of currentFrame) tickSize(). For more information on positioning axis with short and long ticks see [tickSize()](#ylineartickSize).
-
+
Left alignment are be drawn from the origin to the left, because of this the labels do not need to be translated.
-
+
Left hand axis will need to be translated to be positioned correctly. See below.
-
+
The rendered axis return the width of the widest text label via .labelWidth(). this will vary depending on the text e.g. the label '100,000' will return a larger value than '10'
-
+
.labelWidth() is used to amend the appropriate margin of the currentFrame so that text is positioned outside the plot object. The following code when added to you index.js file after the y-axis has been called will resize the margin depending on the .align() for axis with ticks of a standard size. For positioning axis where the ticks are longer or shorter then the width of the chartFrame see [tickSize()](#ylineartickSize).
@@ -161,7 +161,7 @@ d3.select(currentFrame.plot().node().parentNode)
.call(currentFrame);
```
-
+
The currentFrame can then be used to correctly define the .range() values of an x-axis.
@@ -193,14 +193,14 @@ yAxis
.align('left');
```
-
+
```
yAxis
.align('right');
```
-
+
### myAxis.banding([Boolean]
@@ -217,7 +217,7 @@ yAxis
.banding(true)
```
-
+
```
const plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];
@@ -229,7 +229,7 @@ yAxis
.numTicks(10)
```
-
+
### myAxis.divisor([Number]
@@ -238,7 +238,7 @@ Used to help format ticks values whane the data range contains large number e.g.
Note It is very important to make he appropriate addition to the subtitle of the chart when the divisor has a value other that 1 e.g. adding the text 'million'
Without using a divisor the chart would be labelled like this:
-
+
After:
@@ -247,7 +247,7 @@ yAxis
.divisor(1000000)
```
-
+
### myAxis.domain([Array])
@@ -271,7 +271,7 @@ yAxis
.invert(true)
```
-
+
### myAxis.label([Object])
@@ -292,11 +292,11 @@ yAxis
.label(true)
```
-
+
### Postioning yLinear labels)
-
+
Positioning a label top left on a right hand axis.
@@ -317,7 +317,7 @@ yAxis
.label(true)
```
-
+
Most commonly used right hand axis. Note if note specified, the vertical position and text anchor revert to their default setting.
```
@@ -332,7 +332,7 @@ yAxis
.label(true)
```
-
+
### myAxis.labelWidth([Number])
@@ -341,7 +341,7 @@ Used to return the width of the text on the axis tick. Will vary depending on ti
### myAxis.logScale([Boolean])
Logscales are a nonlinear scale used when there is a large range in the dataset, commonly used to project earthquake data or to minimise clustering when the data contains statistical outlayers e.g. Point 11 on the chart below. All the other data on the chart is grouped between 0 and 100, so when it is projected using a standard linear scale, it is difficult to disyinguish.
-
+
Using a log scale disperses some of the clustering and makes the data easier to read, but still shows the outlaying point 11.
@@ -352,7 +352,7 @@ yAxis
.logscale(true)
```
-
+
### myAxis.numTicks([Number])
@@ -363,14 +363,14 @@ yAxis
.numTicks(3)
```
-
+
```
yAxis
.numTicks(5)
```
-
+
### myAxis.range([Array])
@@ -389,7 +389,7 @@ yAxis
.tickFormat(d3.format(".2f"))
```
-
+
### myAxis.tickSize([Number])
@@ -408,7 +408,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
Sizeing of ticks on a chart can be broken down into three categories.
@@ -436,7 +436,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
Add the following code to translate the axis into the correct position and adjust the right margin of the currentFrame so that the labels and the ticks are on the outside of the frame. For information on this see [yLinear Postioning](#ylinpos) and [important information](#important).
@@ -450,7 +450,7 @@ d3.select(currentFrame.plot().node().parentNode)
.call(currentFrame);
```
-
+
#### Standard ticks
@@ -470,7 +470,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
You will need to adjust the currentFrame right hand margin to include the width of the tick lables so that the labels are on the outside of the currentFrame. For information on this see [yLinear Postioning](#ylinpos) and [important information](#important).
@@ -483,7 +483,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
For a left hand axis:
@@ -501,7 +501,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
This will then need to be tranlated the width of the currentFrame to position it correctly and you will need to adjust the currentFrame left hand margin to include the width of the tick lables so that the labels are on the outside of the currentFrame. For information on this see [yLinear Postioning](#ylinpos) and [important information](#important).
@@ -515,7 +515,7 @@ d3.select(currentFrame.plot().node().parentNode)
.call(currentFrame);;
```
-
+
#### Long ticks
@@ -534,7 +534,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
You will need to adjust the currentFrame right hand margin to include the width of the tick lables so that the labels and an amount of the ticks equal to the .rem() \* .75 is prodruding from the currentFrame.plot()are on the outside of the currentFrame. For information on this see [yLinear Postioning](#ylinpos) and [important information](#important).
```
@@ -546,7 +546,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
For the left hand axis:
@@ -564,7 +564,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
This will then need to be tranlated the width of the currentFrame to position it correctly and you will need to adjust the currentFrame left hand margin to include the width of the tick lables so that the labels are on the outside of the currentFrame. For information on this see [yLinear Postioning](#ylinpos) and [important information](#important).
@@ -579,7 +579,7 @@ d3.select(currentFrame.plot().node().parentNode)
.call(currentFrame);
```
-
+
### myAxis.yAxisHighlight([Number])
@@ -590,14 +590,14 @@ yAxis
.yAxisHighlight(100)
```
-
+
```
yAxis
.yAxisHighlight(-100)
```
-
+
# yOrdinal
@@ -622,7 +622,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
Use the current frame dimensions to define your .range(). The default .tickSize() on the yOrdinal axis is 0. Also shown here with the default .domain() For more infor mation on changing this and positioning yOrdinal axis with tick see ticksize tc
@@ -636,7 +636,7 @@ currentFrame.plot()
.call(yAxis);
```
-
+
It is good practice to pass .plotDim(), .rem(), .divisor() and .frameName() to the axis when you first set it up as they are used in some of the in-built functionality, such as .banding() and .label() and attaching id tags used by the Pre-flight illustrator script. It would also be a good idea to pass .invert() and .logScale() at this point also. This will then need to be correctly positioned, see [yOrdinal postioning](#yordpos)
@@ -664,16 +664,16 @@ currentFrame.plot()
Before you can position an axis you need to know the steps the g-axis component goes through to render left and right aligned axis when it is called. yOrdinal axis nearly never have a .tickSize(). For information about rendering a y-axis with a .tickSize() see the similar [yLinear Postioning](#ylinpos).
The following example assumes their will only be labels and that the alignment is left (default). For more information on positioning yOrdinal with ticks see [tickSize()](#ylineartickSize).
-
+
On right aligned axis the labels are translated right. The whole axis will also need to bee moved
-
+
yOrdinal axis always take the left hand side of the currentFrame.plot() as their origin. Unless a tickSize() is specified both the left and right aligned axis are drawn to the left of the origin e.g.
-
+
Only if a tickSize() is specified on a right align axis (can't think when this would be) does the axis get push to the right e.g.
-
+
```
const currentFrame = frame[frameName];
@@ -713,7 +713,7 @@ currentFrame.plot()
.call(xAxis);
```
-
+
### Postioning
@@ -731,7 +731,7 @@ if (align == 'top' ){
}
```
-
+
You can now use the .align() to position the axis at the top or the bottom of the fram, see API reference
### xDate API reference
@@ -755,7 +755,7 @@ You can now use the .align() to position the axis at the top or the botto
- "days" -- every day
The interval of the ticks will also effect the tick formatting, which will default to the following:
-
+
#xAxis.tickSize([Number]) Defines the size of the ticks. Usually set to .rem() \*.75 for the major ticks. When full height ticks are required some adjustment will be needed to the positioning of the axis, see examples
@@ -791,7 +791,7 @@ currentFrame.plot()
.call(myXAxis);
```
-
+
### Every ten years
@@ -813,7 +813,7 @@ myXAxis
.minorTickSize(currentFrame.rem()*.3)
```
-
+
### Every five years
@@ -835,7 +835,7 @@ myXAxis
.minorTickSize(currentFrame.rem()*.3)
```
-
+
### Every month
@@ -857,7 +857,7 @@ myXAxis
.minorTickSize(currentFrame.rem()*.3)
```
-
+
## yLinear