{"_id":"g-axis","_rev":"2-61add3de5f67004dc02a3ad1f3481f15","name":"g-axis","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"g-axis","author":{"name":"Bob Haslett"},"version":"1.0.0","description":"Module for rendering axes FT-style","keywords":["FT","g-chartframe","d3","d3-module"],"license":"BSD-3-Clause","main":"build/g-axis.js","jsnext:main":"index","homepage":"https://github.com/ft-interactive/g-axis","repository":{"type":"git","url":"git+https://github.com/ft-interactive/g-axis.git"},"scripts":{"build":"rm -rf build && mkdir build && rollup --globals d3:d3 -f umd -n gAxis -o build/g-axis.js -- index.js","test":"jest","test:update":"jest --updateSnapshot","report-coverage":"codecov","prepare":"npm run build && uglifyjs build/g-axis.js -c -m -o build/g-axis.min.js","lint":"eslint {index.js,src/**/*.js,test/**/*.js}","lint:fix":"eslint --fix {index.js,src/**/*.js,test/**/*.js}"},"dependencies":{"d3":"^4.9.1"},"devDependencies":{"@babel/core":"^7.0.0-beta.31","@babel/preset-env":"^7.0.0-beta.31","@babel/register":"^7.0.0-beta.31","babel-core":"^7.0.0-bridge.0","babel-jest":"^22.4.3","codecov":"^3.0.2","eslint":"^3.19.0","eslint-config-airbnb-base":"^11.2.0","eslint-plugin-import":"^2.6.1","jest":"^22.4.3","jest-image-snapshot":"^2.4.0","micro":"^9.1.4","nyc":"^11.0.3","puppeteer":"^1.2.0","rollup":"^0.57.1","tap-spec":"^4.1.1","test-listen":"^1.1.0","uglify-es":"^3.0.23"},"jest":{"testEnvironment":"./test/__env__/puppeteer_environment.js"},"gitHead":"3e8712da99fbf3ac88689b708deb6572849a8ced","bugs":{"url":"https://github.com/ft-interactive/g-axis/issues"},"_id":"g-axis@1.0.0","_npmVersion":"6.0.1","_nodeVersion":"9.11.1","_npmUser":{"name":"aendrew","email":"aendrew@aendrew.com"},"dist":{"integrity":"sha512-B/gp4z1/BmwZR33oubwW9Xpzlu1NXjZ2iXlpcfV6oR8HC0viznUFZTf1FWguqfIwU54ZQgF8KbT9aPGjq/YACg==","shasum":"95592eb4ca9651e3bf75bdc348aea02999e9705e","tarball":"https://registry.npmjs.org/g-axis/-/g-axis-1.0.0.tgz","fileCount":76,"unpackedSize":1845323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBuMzCRA9TVsSAnZWagAAoskQAIsttuND6Qidql9rwysG\nTzfO30cUUGAVPCluRGFvkq4TucS5RnyoZNGN1JQjmxkHsXb2G4aGBg2OtyVw\n1S4364b+ZQ8yUXAbLsFcGYtO+K7VMuNrOiMBEqYfb2XX28UuVmaP5HVM+JBi\nTmekXLf1acHUDKVX+OQtbwCoUiyeTZWT8w6uyQeXjuRwkr1LIViG+S5wdp/O\nhFaxdRirqFgt7cd2cRxhC/5yD8Ed99fFi2gT6bsbIT7HWQbkmoB+Kf7BSN5+\nicaDlH4vgIOSC0cahyg0r/89QN3sHREfwo5D07FpFuOoOeFbxfWniEjS8Qu7\nOfgNS3uW6eocR3VkQGuW0QcsHdIPMYFIedYYElNscDSu6j6LJl9p85K7ASQf\nm76YIa00R7DzMG7WiJKVUe0Ej0qAE2nL5hIBejm3GEb8Tp2u6Udd9uRVkt/c\nLadb3dIzSqIwoovdl83iuCitGKz1C7eig1T9vgCvJSjPAH9P4Al0hamHH9s9\nTIdpIUhoJgYI59R/y8vAr1Kaecd2X7yZhj1gtOwjHVr0m5GUlU+xLOZo535q\n4cfwpA0A3AtURejkZllbxmN7MGtXGJewwMV/syctwEK3UvX/NcOPX0xcbwQb\nQ512wuPlaHhtVnA6+ZUkaMV86avbrm+ID16LEKXp/Xug4RInpWrOcmaonXrr\nzHri\r\n=7PYr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJhauQ9pzXSc2YdQ58EnrchPTvYAz/Zw/xaY1lcn3wWAIhAIfn2g5/yUDQEccxYiuTJFnvdvTKhde1s1hoBt37Y1Js"}]},"maintainers":[{"name":"aendrew","email":"aendrew@aendrew.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-axis_1.0.0_1527178032856_0.2659899582872407"},"_hasShrinkwrap":false},"1.0.1":{"name":"g-axis","author":{"name":"Bob Haslett"},"version":"1.0.1","description":"Module for rendering axes FT-style","keywords":["FT","g-chartframe","d3","d3-module"],"license":"BSD-3-Clause","main":"build/g-axis.js","jsnext:main":"index","homepage":"https://github.com/ft-interactive/g-axis","repository":{"type":"git","url":"git+https://github.com/ft-interactive/g-axis.git"},"scripts":{"build":"rm -rf build && mkdir build && rollup --globals d3:d3 -f umd -n gAxis -o build/g-axis.js -- index.js","test":"jest","test:update":"jest --updateSnapshot","report-coverage":"codecov","prepare":"npm run test && npm run build && uglifyjs build/g-axis.js -c -m -o build/g-axis.min.js","lint":"eslint {index.js,src/*.js,test/*.js}","lint:fix":"eslint --fix {index.js,src/*.js,test/*.js}"},"dependencies":{"d3":"^4.9.1"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","codecov":"^3.0.2","eslint":"^3.19.0","eslint-config-airbnb-base":"^11.2.0","eslint-plugin-import":"^2.14.0","g-chartframe":"^5.2.2","jest":"^23.6.0","micro":"^9.1.4","npm-prepublish":"^1.2.3","prettier-eslint":"^8.8.2","pretty":"^2.0.0","puppeteer":"^1.11.0","rollup":"^0.57.1","test-listen":"^1.1.0","uglify-es":"^3.0.23"},"jest":{"testEnvironment":"./test/__env__/puppeteer_environment.js"},"gitHead":"4a1517ee290a2165534cf7988e12754f7d58b69c","bugs":{"url":"https://github.com/ft-interactive/g-axis/issues"},"_id":"g-axis@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.15.0","_npmUser":{"name":"aendrew","email":"aendrew@aendrew.com"},"dist":{"integrity":"sha512-pKPKMFh9xmUrTZps347F+PYEhJC9yWYT/puTnm4qq16dbwLGRNp1d8Vr4D7BC/2C1ucVpAKhpgXwr1KM0vxO+w==","shasum":"063f4e5eadc19c07dc3a6ccabfe69f45a982be73","tarball":"https://registry.npmjs.org/g-axis/-/g-axis-1.0.1.tgz","fileCount":67,"unpackedSize":1500395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMycxCRA9TVsSAnZWagAACPsP/ixmA4qXgVFYSPOGlDJk\nWec163PSdl45d/1XsSKPSITEkyjDDGVRPFwAlvqlDJLwNBDEYwZPWSNmo8nj\nWvAZzG98BNo5Y4CDqTsOivyS75R33J777ak1Jar37vBR3c+0IqHf3cofxICH\nkVlWWrLRfjsmcBqjzF57BOu6XCzbhqNmraUP520+z0if+ul+x9OTuTHSSQ6K\neln4eHMh9azdHSIy7yjdYBuqPmoLAmVbrvL0gx6KPrR9b08CYVkCmN5fc7zb\nouTRNhzZiBG2NukPAvS14QiV6JAobxaho2Q9DkUswwH4GVIPe9SgjOxnX2J/\n9KuRnl46411VMR+0oDEu8DhQxhZBOC1CIDAGCC3RN0hrmaJmvBdcsMo24w/p\nEBXly3fHGpk6VkJa/v4zoFXnynk1pW8qSxrAL0syaG9e1EvYNQRc0xlD5V5v\nq5UDcEVjhZH51HAperXaeBOZrT3IeiBfRvfD0+XBlH0CMPLv2owklKN0Gbv+\nBhTg31GF5Qihp3QGjJjdLR1GlSINvqItTpf4ZPotcEdRlDLKNQreWw/RzGgl\ne/5IoYRwMKJTOECvtyNAvTamdfhpBsovXxd3cw+sjrg6o5lBJmHp8OIaT5X6\nmIt2s53YnP/EH9eFrnjjKTZYI7g6UtgcO/xQ/v2cbOkiygBw/Jpo0mH2ylDN\nwZ+X\r\n=nYPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0qVZe2zlOLdZzGLhkgaNB/ofve9iirzRsp6nIfiGOwAiB2f5gsz6xulNkFP6FdP3FNi5SiwAeBNn2KF19sSn0miA=="}]},"maintainers":[{"name":"aendrew","email":"aendrew@aendrew.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-axis_1.0.1_1546856240511_0.5055949251106475"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-24T16:07:12.855Z","1.0.0":"2018-05-24T16:07:13.087Z","modified":"2022-05-03T02:27:41.974Z","1.0.1":"2019-01-07T10:17:20.702Z"},"maintainers":[{"name":"aendrew","email":"aendrew@aendrew.com"}],"description":"Module for rendering axes FT-style","homepage":"https://github.com/ft-interactive/g-axis","keywords":["FT","g-chartframe","d3","d3-module"],"repository":{"type":"git","url":"git+https://github.com/ft-interactive/g-axis.git"},"author":{"name":"Bob Haslett"},"bugs":{"url":"https://github.com/ft-interactive/g-axis/issues"},"license":"BSD-3-Clause","readme":"# gAxis [](https://codecov.io/gh/ft-interactive/g-axis)\n\nPre 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.\n\nThis is a guide aimed mostly a users building chart templates or interactive graphics and not a user guide for the Visual Vocabulary.\n\nThe axis module also appends the correct script tags for use with the FT Pre-Flight script in Adobe Illustrator.\n\nShould work with other builds where the axis is called into a pre drfined g or svg elements.\n\n### Prerequisites\nThe FT axis styles---add the folowwing link in your index file header\n\n``` html\n\n```\nThe [d3 library](https://d3js.org/) is already installed in the build\n\n### Manual installation\n\nIf you are working within the g-chartfram architecture add the following code to the top of your index.js\n\n\n```\nimport * as gAxis from 'g-axis\n```\n\n### NPM install\nNot yet deployed\n\n## Important information\n\nAll examples shown are from the web frame style.\n\nNote: Always create and call your y-axis before executing any code to draw your chart. Pass the axis to the chart code, not the other way round. This means that any inbuilt functionality generated by the axis such as .invert() or .logScale() will be passed automatically to the chart and avoid you having to create extra code.\n\nCreate 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.\n\nyOrdinal axis where the width of 'Switzerland' is returned in .labelWidth()\n\nThe tick 'Dem Republic of Congo' is much longer so will leave less space for the x axis .range()\n\n\nFor more detail on .labelWidth() and its use in positioning see:\n\n* [yLinear Postioning](#ylinpos)\n\nThe following axis types are currently defined in this repo (click to jump to section)\n\n* [yLinear](#ylinear)\n* [yOrdinal](#yordinal)\n* [xDate](#xdate)\n* xLinear()\n* xOrdinal()\n\n# yLinear\n\nNote All examples shown are from the web frame style.\nyLinear() creates a d3 linear axis with a couple of additional feature to help manage styling and day-to-day production of charts that use a linear y-axis.\n\nCreate and call a y-axis first, as it returms .labelWidth() that 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 crteating the x-axis. For more information see [yLinear Postioning](#ylinpos)\n\n* [Getting started](#ylinstarted)\n* [yLinear Postioning](#ylinpos)\n* [Full yLinear API reference](#ylinearapi)\n* See [.tickSize()](#ylineartickSize) for positioning axis with short or long ticks\n\n\n## Getting started\nAdd the following code to your index.js to append a default y-axis to the current frame object (grey here but not normally visible)\n\nNote yLinear default alignment is right.\n\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n\nUse the current frame dimensions to define your .range() and the .ticksize() and a .domian(). This will give you a basic working axis correctly positioned\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width)\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nIt 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.\n```\nconst currentFrame = frame[frameName];\nconst yAxis = yLinear();\nconst tickSize = currentFrame.dimension().width;\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\n\nyAxis\n\t.plotDim(plotDim)\n\t.tickSize(tickSize)\n\t.align(yAxisAlign)\n\t.domain([Math.min(yMin, valueExtent[0]), Math.max(yMax, valueExtent[1])])\n\t.range([currentFrame.dimension().height, 0])\n\t.frameName(frameName)\n\t.invert(yScaleInvert)\n\t.logScale(yLogScale)\n\t.divisor(divisor);\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n## yLinear positioning\nBefore 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).\n\nyLinear 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).\n\n\nLeft alignment are be drawn from the origin to the left, because of this the labels do not need to be translated.\n\n\nLeft hand axis will need to be translated to be positioned correctly. See below.\n\n\nThe 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'\n\n\n.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).\n\n```\n// return the value in the variable newMargin and move axis if needed\nif (yAxisAlign === 'right') {\n\tconst newMargin = yAxis.labelWidth() + currentFrame.margin().right;\n\t// Use newMargin redefine the new margin and range of yAxis\n\tcurrentFrame.margin({ right: newMargin });\n}\nif (yAxisAlign === 'left') {\n\tconst newMargin = yAxis.labelWidth() + currentFrame.margin().left;\n\t// Use newMargin redefine the new margin and range of yAxis\n \t.margin({ left: newMargin });\n\tyAxis.yLabel().attr('transform', `translate(${(yAxis.tickSize() - yAxis.labelWidth())},0)`);\n}\nd3.select(currentFrame.plot().node().parentNode)\n\t.call(currentFrame);\n```\n\n\nThe currentFrame can then be used to correctly define the .range() values of an x-axis.\n\nImportant note .labelWidth() is also used to resize the .tickSize() when the tickSize() is greater than the width of the longest label, reducing the size of the tick by the .labelWidth(). This is so that the axis sits in the chartFrame correctly when the frame is re-sized for more information see [tickSize()](#ylineartickSize).\n\n## yLinear API reference\n\n* [.align([String])](#ylinearalign)\n* [.banding([Boolean])](#ylinearbanding)\n* [.divisor([Number])](#ylineardivisor)\n* [.domain([Array])](#ylineardomain)\n* [.frameName([String])](#ylinearframeName)\n* [.invert([Array])](#ylinearinvert)\n* [.label([Object])](#ylinearlabel)\n* [.labelWidth([Number])](#ylinearlabelWidth)\n* [.logScale([Boolean])](#ylinearnLog)\n* [.numTicks([Number])](#ylinearnumTicks)\n* [.rem([Number])](#ylinearyRem)\n* [.tickFormat([count[, specifier]]](#ylinearFormat)\n* [.tickSize([Number]](#ylineartickSize)\n* [.yAxishighlight([Array])](#ylinearyAxishighlight)\n\n### myAxis.align([String]\n \"right\" or \"left\". Determines the alignment of the tick text set as \"right\" by default.\n```\nyAxis\n\t.align('left');\n```\n\n```\nyAxis\n\t.align('right');\n```\n\n\n\n### myAxis.banding([Boolean]\nToggles the axis banding on or off. Adds shaded bands between alternative major axis ticks, so increasing the number of ticks will increase the number of bands.\n\nNote This function will not work correctly unless both .plotDim() and .rem() have also been passed to the axis.\n```\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\n\nyAxis\n\t.plotDim(plotDim)\n\t.rem(currentFrame.rem())\n\t.banding(true)\n```\n\n```\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\n\nyAxis\n\t.plotDim(plotDim)\n\t.rem(currentFrame.rem())\n\t.banding(true)\n\t.numTicks(10)\n```\n\n\n### myAxis.divisor([Number]\nUsed to help format ticks values whane the data range contains large number e.g. GDP where the figures could be measured in millions or billions. The tick label figure is divided by the number passed to the divisor, by default this is set to 1 so appears to make no difference. On an axis where the figures are measured in millions 0 - 2,000,000 setting the divisor to 1,000,000 would cause the axis labels to appear as 0 - 2.0.\n\nNote 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'\n\nWithout using a divisor the chart would be labelled like this:\n\n\nAfter:\n\n```\nyAxis\n\t.divisor(1000000)\n```\n\n\n\n### myAxis.domain([Array])\nDefines the axis domain in the same way as you would when creating a normal d3.scaleLinear() scale. If no .domain() is defined the default is [0,10000].\n\n### myAxis.frameName([String])\nUsed to pass the id of the current plot object and add unique ids to the tick label for use with the illustrator Pre Flight script. frameName is passed into the object keys loop and is intergral.\n```\nyAxis\n\t.frameName(frameName)\n```\n\n### myAxis.invert([Boolean])\nInverts the scale so that the lowest figures are nearer the top and the highest figures are nearer the bottom. By creating the axis first and then passing it to the code drawing the chart will ensure that this function is passed to the chart.\n```\nyAxis\n\t.invert(true)\n```\n\n\n### myAxis.label([Object])\nNote .label() requires that the axis has been passed both .rem() and .plotDim() to work correctly\n\nAdds and positions an axis label. Labels can be positioned in nine locations by specifying the horizontal and vertical alignment, and rotated through 360 degrees. Text anchoir points can also be specified. For more information and examples on positioning see [Postioning yLinear labels](#ylinearlabelPos)\n\nAdding the following code will set a default label\n```\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\nconst label = {\n\ttag: 'default axis label'\n}\nyAxis\n\t.rem(currentFrame.rem())\n\t.plotDim(plotdim)\n\t.label(true)\n```\n\n\n### Postioning yLinear labels)\n\n\nPositioning a label top left on a right hand axis.\n\nNote that rotate is set to 360 degrees and not zero. This is because passing zero is read as false by javascript. Labels on a y-axis are set to 90 degrees by sefault, but passing zero to an axis will cause it to fail. The way round this is to rotate the text through a full 360 degrees. \n```\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\nconst label = {\n tag: 'Top left and rotated 360 degrees, anchor ‘end’',\n vert: 'top',\n hori:'right',\n anchor: 'end',\n rotate 360,\n}\nyAxis\n .rem(currentFrame.rem())\n .plotDim(plotdim)\n .label(true)\n```\n\nMost commonly used right hand axis. Note if note specified, the vertical position and text anchor revert to their default setting.\n```\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\nconst label = {\n tag: 'Middle right, right hand axis',\n hori:'right',\n}\nyAxis\n .rem(currentFrame.rem())\n .plotDim(plotdim)\n .label(true)\n```\n\n\n### myAxis.labelWidth([Number])\nUsed to return the width of the text on the axis tick. Will vary depending on tick e.g. a label of '1,000,000' will be wider than a label of '10' and will return a higher value. See [yLinear Postioning](#ylinpos) and [important information](#important)\n\n### myAxis.logScale([Boolean])\nLogscales 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.\n\n\nUsing a log scale disperses some of the clustering and makes the data easier to read, but still shows the outlaying point 11.\n\nNote That log scales cannot start from zero so the yMin value of your chart will probably have to be changed (set to 10 below). Its also worth checking for errors when you have extreeme values in your dataset.\n```\nyAxis\n .logscale(true)\n```\n\n\n\n### myAxis.numTicks([Number])\nAs they name suggest defines how many ticks are on the axis. 0 to 200 with 3 tick would give a zero line, a 100 and 200 line.If not enough ticks have been specifiesd d3 will automatically increase the number.\n```\nyAxis\n .numTicks(3)\n```\n\n```\nyAxis\n .numTicks(5)\n```\n\n\n### myAxis.range([Array])\nDefines the axis range in the same way as you would when creating a normal d3.scaleLinear(). If no .range() is defined the default is [120,0])\n\n### myAxis.rem([Number])\nUsed to calculate the ticksize for short ticks and positioning labels. Should usually be the currentFrame.rem() which is the height of the text in the subtitle. This keeps things tick sizes and dot radii proportional to the frame.\n\n### myAxis.tickFormat([count[, specifier]])\nOverrides the in-built axis formatting to allow you to format labels in the way you would on any d3 linear axis e.g. two decimal places.\n```\nyAxis\n.tickFormat(d3.format(\".2f\"))\n```\n\n\n### myAxis.tickSize([Number])\nNote The default is 300px. Unless the value specified for the .tickSize() is less than the width of the longest label, the size of the tick drawn on the chart will be the the value passed to tickSize() minus the width of the widest label on the axis. For more information see [yLinear Postioning](#ylinpos). This is so that ticks can be positioned in the chartFrame correctly e.g.\n\n```\nconst currentFrame = frame[frameName];\nconst yAxis = yLinear();// sets up yAxis\nconst tickSize = currentFrame.dimension().width;// Used when drawing the yAxis ticks\n\nyAxis\n .tickSize(tickSize)\n\n// Draw the yAxis first, this will position the yAxis correctly and measure the width of the label text\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nSizeing of ticks on a chart can be broken down into three categories.\n\n* [Short ticks - any tick where the size is shorter than the frame width](#ylinearyshortTicks)\n* [Standard ticks - ticks that are the same size a the current frame](#ylinearystandardTicks)\n* [Long ticks - tick wider than the current frame](#ylinearyLongTicks)\n\n#### Short ticks\nWhere the specified .tickSize() is shorter than the width of the currentFrame. Most commonly used on dual axis charts. When creating a right aligned axis you will need to translate it, this is the opposite of [Standard ticks](#ylinearystandardTicks) and [Long ticks](#ylinearyLongTicks) where the left align axis needs to be moved to position it correctly not the right. The following examples use .rem() to define the size of the ticks as this makes them proportional to each frame style.\n\nRight aligned axis\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\nconst tickSize = currentFrame.rem() *.75\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width)\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nAdd 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).\n```\nconst newMargin = yAxis.labelWidth() + currentFrame.margin().right + tickSize;\n// Use newMargin redefine the new margin and range of xAxis\ncurrentFrame.margin({ right: newMargin });\nyAxis.yLabel().attr('transform', `translate(${currentFrame.dimension().width},0)`);\n\nd3.select(currentFrame.plot().node().parentNode)\n\t.call(currentFrame);\n```\n \n\n\n#### Standard ticks\nWhere the specified .tickSize() is the same as width of the currentFrame. It is the most commonly used tick size on the yLinear axis.\nFor a left hand axis, you will need to translate the axis:\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width)\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nYou 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).\n```\nconst newMargin = yAxis.labelWidth() + currentFrame.margin().right;\n// Use newMargin redefine the new margin and range of xAxis\ncurrentFrame.margin({ right: newMargin });\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nFor a left hand axis:\n\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width)\n .align('left')\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nThis 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).\n\n```\nconst newMargin = yAxis.labelWidth() + currentFrame.margin().left;\n//Use newMargin redefine the new margin and range of xAxis\ncurrentFrame.margin({ left: newMargin });\nyAxis.yLabel().attr('transform', `translate(${(yAxis.tickSize() - yAxis.labelWidth())},0)`);\n\nd3.select(currentFrame.plot().node().parentNode)\n .call(currentFrame);;\n```\n\n\n#### Long ticks\nWhere the tick is longer than the currentFrame width. Mostly used on long vertical charts. Defining how far out from the currentFram.plot() the tick should protrude is completely arbitrary. It can be a constant number or a vary between frames. To do the latter its convenient to use .rem() which I shall for this example. For a right hand axis that will not need a translate transformation:\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width + (currentFrame.rem() *.75))\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\nYou 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).\n```\nconst newMargin = yAxis.labelWidth() + currentFrame.margin().right;\n// Use newMargin redefine the new margin and range of xAxis\ncurrentFrame.margin({ right: newMargin });\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nFor the left hand axis:\n```\nconst yAxis = gAxis.yLinear()\nconst currentFrame = frame[frameName];\n\n yAxis\n .domain([0,200])\n .range([currentFrame.dimension().height,0])\n .tickSize(currentFrame.dimension().width + (currentFrame.rem() *.75))\n .align('left')\n\ncurrentFrame.plot()\n .call(yAxis);\n```\n\n\nThis 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).\n\n```\nconst newMargin = yAxis.labelWidth() + currentFrame.margin().left;\n\n//Use newMargin redefine the new margin and range of xAxis\ncurrentFrame.margin({ left: newMargin });\nyAxis.yLabel().attr('transform', `translate(${(yAxis.tickSize() - yAxis.labelWidth() - (currentFrame.rem() *.75))},0)`);\n\nd3.select(currentFrame.plot().node().parentNode)\n.call(currentFrame);\n```\n\n\n### myAxis.yAxishighlight([Number])\nChanges the style of the tick specified from the normal thin 'axis' style to the thicker 'baseline'. Mostly used on index charts where the 100 line should be highlighted or when the minimum tick value goes below zero.\n```\nyAxis\n .yAxishighlight(100)\n```\n\n```\nyAxis\n .yAxishighlight(-100)\n```\n\n\n# yOrdinal\nNote All examples shown are from the web frame style.\nyOrdinal() creates a d3 linear axis with a couple of additional feature to help manage styling and day-to-day production of charts that use an ordinal y-axis.\n\nCreate and call a y-axis first, as it returms .labelWidth() that 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 creating the x-axis. For more information see [yOrdinal Postioning](#yordpos)\n\n* [Getting started](#yordstarted)\n* [yOrdinal postioning](#yordpos)\n\n## Getting started\nAdd the following code to your index.js to append a default y-axis to the current frame object (grey here but not normally visible)\n\nNote yOrdinal default alignment is left.\n\n```\nconst yAxis = yOrdinal();// sets up yAxis\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n\nUse 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\n\n```\nconst yAxis = yOrdinal();// sets up yAxis\n\nyAxis\n\t.rangeRound([0,currentFrame.dimension().height]);\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n\nIt 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)\n```\nconst currentFrame = frame[frameName];\nconst yAxis = yOrdinal();\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\n\nyAxis\n\t.plotDim(plotDim)\n\t.align(yAxisAlign)\n\t.domain([Math.min(yMin, valueExtent[0]), Math.max(yMax, valueExtent[1])])\n\t.range([currentFrame.dimension().height, 0])\n\t.frameName(frameName)\n\t.invert(yScaleInvert)\n\t.logScale(yLogScale)\n\t.divisor(divisor);\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n## yOrdinal positioning\nBefore 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).\n\nThe 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).\n\n\nOn right aligned axis the labels are translated right. The whole axis will also need to bee moved\n\n\nyOrdinal 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.\n\n\nOnly 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.\n\n```\nconst currentFrame = frame[frameName];\nconst yAxis = yOrdinal();\nconst plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];\n\nyAxis\n\t.plotDim(plotDim)\n\t.tickSize(300)\n\t.align(yAxisAlign)\n\t.domain([Math.min(yMin, valueExtent[0]), Math.max(yMax, valueExtent[1])])\n\t.range([currentFrame.dimension().height, 0])\n\t.frameName(frameName)\n\t.invert(yScaleInvert)\n\t.logScale(yLogScale)\n\t.divisor(divisor);\n\ncurrentFrame.plot()\n\t.call(yAxis);\n```\n\n\n\n\n\n\n# xDate\n\nNote Your y-axis of choice should be created and appended to the current frame before attaching an x-axis as the size of the y-axis tick text should be used to determine the .domain() of the new x-axis\n\nAdd the following code to your index.js to append a default xDate() axis to the current frame (grey here but is not normally visible). Note that .tickSize() is included although not vital to create the axis. No positioning has been applied. The minor axis is visible as the default setting for .minorAxis() is true.\n\n```\nconst xAxis = gAxis.xDate();\nconst currentFrame = frame[frameName];\n\nxAxis\n\t.tickSize(currentFrame.rem()*.75)\n\t.minorTickSize(currentFrame.rem()*.3)\n\ncurrentFrame.plot()\n\t.call(xAxis);\n```\n\n\n### Postioning\n\nTo position the axis in the frame add the following code after the axis has been called. This will place the axis correctly at eithr the top or bottom depending on the .align() setter, bottom by default. If full height ticks length are defined then this code will need to be re-calculated, see examples\n\n```\nif (align == 'bottom' ){\n myXAxis.xLabel().attr('transform', `translate(0,${currentFrame.dimension().height})`);\n if(minorAxis) {\n myXAxis.xLabelMinor().attr('transform', `translate(0,${currentFrame.dimension().height})`);\n }\n}\nif (align == 'top' ){\n myXAxis.xLabel().attr('transform', `translate(0,${myXAxis.tickSize()})`);\n}\n```\n\nYou can now use the .align() to position the axis at the top or the bottom of the fram, see API reference\n\n### xDate API reference\n\n#xAxis.domain([Array]) defines the axis domain in the same way as you would when creating a normal d3.scaleTime(). If no .domain() is defined the default is [Jan 01 1970,Jun 01 2017]\n\n#xAxis.range([Array]) defines the axis range in the same way as you would when creating a normal d3.scaleLinear(). If no .range() is defined the default is [0,220])\n\n#xAxis.fullYear([boolean]) used on charts where interval('year')is used and forces the notation into a full year i.e 1977 instead of 77\n\n#xAxis.interval([String]) Defines the tick interval on the axis (see examples). By default this is set to \"lustrum\" meaning every five years. It can be set to:\n * \"century\" -- every one hundred years\n * \"jubilee\" -- every fifty years\n * \"decade\" -- every ten years\n * \"lustrum\" -- every five years\n * \"years\" -- every year\n * \"quarters\" -- every 3 months (Q1, Q2, Q3 etc, although the data still nees to be a valid date)\n * \"months\" -- every month\n * \"weeks\" -- every week\n * \"days\" -- every day\n\nThe interval of the ticks will also effect the tick formatting, which will default to the following:\n\n\n#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\n\n#xAxis.minorTickSize([String]) Defines the size of the minor ticks. Usually set to .rem()*.3. When full height ticks are required some adjustment will be needed to the positioning of the axis\nNote When the height of the current frame is equal to the .minorTickSize() then the minor tick will change 'axis' and not 'baseline' resulting in the dotted tick lines\n\n#xAxis.minorTickSize([Boolean]) Set to true by default this determines if the minor axis is displayed or not\n\n#xAxis.xlabel() Returns an accessor to allow the axis ticks to have changes made to their style\n\n#xAxis.xabel() Returns an accessor to allow the axis ticks to have changes made to their style\n\n## xDate Examples\n### Yearly\n\nFrom Jan 1 2005 to June 1 2017, with each year labeled and no minor axis. Full years are turned off by default\n```\nconst xAxis = xaxisDate();//sets up yAxis\nconst currentFrame = frame[frameName];\n\nlet mindate = new Date(2005,1,1);\nlet maxdate = new Date(2017,6,1);\n\nmyXAxis\n\t.domain([mindate,maxdate])\n\t.range([0,currentFrame.dimension().width])\n\t.interval(\"years\")\n\t.minorAxis(false)\n\ncurrentFrame.plot()\n .call(myXAxis);\n```\n\n\n### Every ten years\n\nFrom Jan 1 1940 to June 1 2017, with every ten years labeled and a minor axis\n```\nconst xAxis = xaxisDate();//sets up yAxis\nconst currentFrame = frame[frameName];\n\nlet mindate = new Date(1940,1,1);\nlet maxdate = new Date(2017,6,1);\n\nmyXAxis\n\t.domain([mindate,maxdate])\n\t.range([0,currentFrame.dimension().width])\n\t.interval(\"decade\")\n\t.minorAxis(true)\n\t.tickSize(currentFrame.rem()*.75)\n\t.minorTickSize(currentFrame.rem()*.3)\n```\n\n\n### Every five years\n\nFrom Jan 1 1986 to June 1 2017, with every five years labeled and a minor axis\n```\nconst xAxis = xaxisDate();//sets up yAxis\nconst currentFrame = frame[frameName];\n\nlet mindate = new Date(1986,1,1);\nlet maxdate = new Date(2017,6,1);\n\nmyXAxis\n\t.domain([mindate,maxdate])\n\t.range([0,currentFrame.dimension().width])\n\t.interval(\"lustrun\")\n\t.minorAxis(true)\n\t.tickSize(currentFrame.rem()*.75)\n\t.minorTickSize(currentFrame.rem()*.3)\n```\n\n\n### Every month\nFrom Jun 1 1991 to Feb 1 2000, with month years labeled and no minor axis\n```\nconst xAxis = xaxisDate();//sets up yAxis\nconst currentFrame = frame[frameName];\n\nlet mindate = new Date(1999,6,1);\nlet maxdate = new Date(2000,2,1);\n\nmyXAxis\n\t.domain([mindate,maxdate])\n\t.range([0,currentFrame.dimension().width])\n\t.interval(\"months\")\n\t.minorAxis(false)\n\t.tickSize(currentFrame.rem()*.75)\n\t.minorTickSize(currentFrame.rem()*.3)\n```\n\n\n## yLinear\n\n## xOrdinal\n\n## yLinear\n\n## yOrdinal\n\n\n","readmeFilename":"README.md"}