ft-interactive/g-xaxisdate

Name: g-xaxisdate

Owner: FT Interactive News

Description: modular date x axis for use with the FT g-chartframe architecture

Created: 2017-05-31 15:13:14.0

Updated: 2017-05-31 15:13:33.0

Pushed: 2017-06-16 14:29:14.0

Homepage: null

Size: 327

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

xaxisDate

Pre styled and positioned date x-axis for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. As the name suggests it creates a date 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 module for easy maintenance of styles and date formatting accross the full Visual Vocabulary. The axis module 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.

Intraday charts that cross the date threshold will display 'dead-time', please use the intraday-axis and see reference (to come)

Installing
Manually install

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

ipt src="https://rawgit.com/ft-interactive/g-xaxisdate/master/build/g-xaxisdate.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 x-axis to the .plot object (grey here but is not normally visible). Note that .tickSize() is included and although not vital to create the axis it is important for the size of the tick (see nots in API)

myAxis = gAxis.yaxisLinear;

xis
.tickSize(currentFrame.rem())

entFrame.plot()
.call(myYAxis);

alt tag

Set the .range() and the .offsett() to the dimensions of the .plot() object to correctly position the axis

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

currentFrame.plot()
    .call(myXAxis);

alt tag

API reference

myAxis.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]

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])

myAxis.offset([Number]) Defines the distance the x-axis is positioned from the top of its container and also determines what style is applied to the lines. If a.offset() is set at zero then it is assumed that the long tick styling is required, see examples

myAxis.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:

myAxis.fullYear([Boolean]) Works in conjuction with .interval() when it is set to “years” to force ticks labels to a full year format ( 1995, 1996, 1997 etc) when there is room on wider charts.

myAxis.tickSize([Number]) By default this is set to 10 but generally should be set as:

kSize(currentFrame.rem())

.rem() returns the height of the text in the suntitle in the current frame. Using this to set the .ticksize() keeps them proportional to the current frame stopping ticks being too long on print charts and too short on video. Priestly timelines and some circle timelines use long ticks (see example). Note that the style on long ticks changes automatically when the .offset() is set to zero.

Examples
Yearly

From Jan 1 2005 to June 1 2017, with each year labeled and no minor axis

t myXAxis = xaxisDate();//sets up yAxis
t currentFrame = frame[frameName];

mindate = new Date(2005,1,1);
maxdate = new Date(2017,6,1);

xis
.height(currentFrame.dimension().height)
.domain([mindate,maxdate])
.range([0,currentFrame.dimension().width])
.interval("years")
.minorAxis(false)

entFrame.plot()
.call(myXAxis);

alt tag

Every five years

From Jan 1 2005 to June 1 2017, with every five years labeled and a minor axis

t myXAxis = xaxisDate();//sets up yAxis
t currentFrame = frame[frameName];

mindate = new Date(2005,1,1);
maxdate = new Date(2017,6,1);

xis
.height(currentFrame.dimension().height)
.domain([mindate,maxdate])
.range([0,currentFrame.dimension().width])
.interval("lustrum")
.minorAxis(true)
.rem(currentFrame.rem())

entFrame.plot()
.call(myXAxis);

alt tag

Monthly

From Jan 1 2017 to June 16 2017, with every month labeled and a minor axis

t myXAxis = xaxisDate();//sets up yAxis
t currentFrame = frame[frameName];

mindate = new Date(2017,1,1);
maxdate = new Date(2017,6,16);

xis
.height(currentFrame.dimension().height)
.domain([mindate,maxdate])
.range([0,currentFrame.dimension().width])
.interval("months")
.minorAxis(true)
.rem(currentFrame.rem())

entFrame.plot()
.call(myXAxis);

alt tag

Daily

From Jun 1 2017 to June 6 2017, with no minor axis

Note This axis is only suitable for single daily values and not hourly values such as a share price. This will result is 'dead-time'. Use to come

t myXAxis = xaxisDate();//sets up yAxis
t currentFrame = frame[frameName];

mindate = new Date(2017,6,1);
maxdate = new Date(2017,6,15);

xis
.height(currentFrame.dimension().height)
.domain([mindate,maxdate])
.range([0,currentFrame.dimension().width])
.interval("days")
.minorAxis(false)
.rem(currentFrame.rem())

entFrame.plot()
.call(myXAxis);

alt tag

Houry-intraday

From Jun 1 2017 to June 6 2017, with no minor axis

Note For use with hourly values such as a share price but not suitable when crossing the date line to another day. This wil result in 'dead-time'. Use to come

t myXAxis = xaxisDate();//sets up yAxis
const currentFrame = frame[frameName];

let mindate = new Date(2017,6,1,8,30);
let maxdate = new Date(2017,6,1,15,00);

myXAxis
  .height(currentFrame.dimension().height)
  .domain([mindate,maxdate])
  .range([0,currentFrame.dimension().width])
  .interval("hours")
  .minorAxis(false)
  .rem(currentFrame.rem())

currentFrame.plot()
    .call(myXAxis);

alt tag

Long ticks (used on Priestly timelines and circle timelines)

From Jun 1 1730 to Jun 1 2017 with a minor axos. In this case the .offset() is set to zero. The .tickSize() is set to the frame height which is what pushes the labels into the correct position at the bottom of the frame. Note when .offset() is set to zero the minor axis change their style to the default axis style of a dotted line and not the solid 'baseline' style. The 'baseline' style remains on the major ticks.

t myXAxis = xaxisDate();//sets up yAxis
    const currentFrame = frame[frameName];

    let mindate = new Date(1730,6,1);
    let maxdate = new Date(2017,6,1);

    myXAxis
      .offset(0)
      .domain([mindate,maxdate])
      .range([0,currentFrame.dimension().width])
      .interval("jubilee")
      .minorAxis(true)
      .tickSize(currentFrame.dimension().height)

    currentFrame.plot()
        .call(myXAxis);

alt tag

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.