ft-interactive/g-yaxisOrdinal

Name: g-yaxisOrdinal

Owner: FT Interactive News

Description: null

Created: 2017-06-07 15:01:51.0

Updated: 2017-06-07 15:15:10.0

Pushed: 2017-06-22 15:45:25.0

Homepage: null

Size: 110

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

yaxisOrdinal

Pre styled ordinal y-axis for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. As the name suggests it creates an ordinal y-axis that can be appended to the .plot obejct in the g-chartframe hopefully eliminating the need to code another standard y-axis.

A centralised axis component for easy maintenance of styles accross the full Visual Vocabulary. The axis component also appends the correct script tags for use with the FT Pre-Flight script in Adobe Illustrator.

Will also work with other builds where the axis is called into an svg.

Prerequisites

The FT axis styles—add the folowwing link in your index file header

The d3 library is already installed in the build

Installing

Manually install

Add the following line to the header of you index.html file.

ipt src="https://rawgit.com/ft-interactive/g-yaxisOrdinal/master/build/g-yaxisOrdinal.js"> </script>

NPM install

Not yet deployed

Getting started

Note All examples shown are from the web frame style

Add the following code to your index.js to append a default y-axis to the .plot object (grey here but is not normally visible). Bye default there are no tick on an ordinal y-axis, these are set to zero

t myYAxis = gAxis.yaxisOrdinal()
entFrame.plot()
.call(myYAxis);

Set the .rangeRound() to the current frams height to make the axis correctly fit in the .plot object.

t myYAxis = gAxis.yaxisOrdinal()
.rangeRound([0, currentFrame.dimension().height]);

entFrame.plot()
.call(myYAxis)

Specify your the .domain in the same way that would in any other d3 axis

t myYAxis = gAxis.yaxisOrdinal()
.rangeRound([0, currentFrame.dimension().height])
.domain(myCatagories);

entFrame.plot()
.call(myYAxis)

Positioning

The rendered axis returns the width of the ticks text via .labelWidth().

.labelWidth() is used to amend the margin of the current frame element so that tick text is positioned outside the .plot() area.

newMargin = myYAxis.labelWidth()+currentFrame.margin().left;
entFrame.margin({left:newMargin});
elect(currentFrame.plot().node().parentNode)
.call(currentFrame);

The current frame can then still be used to correctly define the .range() values of an x-axis. If ticks are aligned to the right then the right hand margin should be ammended instaed of the left

API reference

myAxis.align([String]) “right” or “left”. Determines the alignment of the tick text set as “right” by default

myAxis.domain([Array]) defines the axis domain in the same way as you would when creating a normal d3.scaleOrdinal(). If no .domain() is defined the default is [“Oranges”, “Lemons”, “Apples”, “Pears”]

myAxis.rangeRound([Array]) defines the axis bands in the same way as you would when creating a normal d3.scaleOrdinal(), would usually be set to the height of the .plot() object. If no .range() is defined the default is [0, 220].

myAxis.labelWidth([Number]) used 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.

myAxis.tickSize([Number]) Hardly ever used on an ordinal scale as usually no tck are required so set by default to zero.

myAxis.offset([Number]) The distance from the axis is positioned from the left size of the /plot() container. As most ordinal scales are aligned to the left this is set to zero by default, but should be set to the width of the .plot() object if the tick labels are to align right (see examples).

Examples

Right hand axis

Axis
.rangeRound([0, currentFrame.dimension().height])
.domain(myCatagories)
.tickAlign("right")
.offset(currentFrame.dimension().width);

entFrame.plot()
.call(myYAxis);

newMargin = myYAxis.labelWidth()+currentFrame.margin().left;
entFrame.margin({left:newMargin});
elect(currentFrame.plot().node().parentNode)
l(currentFrame);