ft-interactive/g-xaxisLinear

Name: g-xaxisLinear

Owner: FT Interactive News

Description: null

Created: 2017-06-12 11:50:54.0

Updated: 2017-06-14 11:54:55.0

Pushed: 2017-06-15 15:35:12.0

Homepage: null

Size: 74

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

xaxisLinear

Pre styled and positioned linear x-axis for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. As the name suggests it creates a linear x-axis that can be appended to the .plot obejct in the g-chartframe hopefully eliminating the need to code another standard x-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

Before starting

Note The .range() of the x-axis should be determind in part by the .labelWidth() of the y-axis, so it is advisable to ad your y-axis first. See the secton on positioning at yaxisLinear.

Installing

Manually install

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

ipt src="To come"> </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 x-axis to the .plot object (grey here but is not normally visible)

myXAxis = gAxis.xaxisLinear;
entFrame.plot()
.call(myXAxis);

Set the .range() and the .ticksize() to the dimensions of the current frame so that the axis fits correctly

myXAxis = gAxis.xaxisLinear;

xis
.range([0,currentFrame.dimension().width])
.tickSize(currentFrame.dimension().height);

entFrame.plot()
.call(myXAxis);

API reference

myAxis.domain([Array]) defines the axis domain in the same way as you would when creating a normal d3.scaleLinear(). If no .domain() is defined the default is [0,100]

myAxis.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]). This is usually set to the width of the current frame and donme after the y-axis has been called. See the secton on positioning at yaxisLinear.

myAxis.offset([Number]) Defines the distance the x-axis is positioned from the top of its container but is nearly always set to zero on a linear type axis as the .tickSize() is used to determine the correct positioning of the axis within the current. It is used when short ticks are required

myAxis.numTicks([Number]) Dtermines how many ticks and therefore the label interval of the axis

Examples

Number of ticks

.range() of zero to 100 with 10 ticks specified. This demonstrates that d3 can and does overwrite this value. Thre are 11 ticks on this axis including the zero value and the d3has worked out the correct interval spacing.

myXAxis = gAxis.xaxisLinear;

xis
.range([0,currentFrame.dimension().width])
.tickSize(currentFrame.dimension().height)
.numTicks(10);

entFrame.plot()
.call(myXAxis);

Short ticks

Note When an offset greater that zero is specified the style of the ticks is changed from the standard tick style to the baseline style. In the case of the wed frame this changes the line from a dotted to a solid line

myXAxis = gAxis.xaxisLinear;

xis
.range([0,currentFrame.dimension().width])
.tickSize(currentFrame.rem())
.offset(currentFrame.dimension().height)


entFrame.plot()
.call(myXAxis);

Script tags

Explanation on script tags to come