Line chart using ordinal x-axis with d3.js and nvd3.js

Question

I am trying to make a line chart from a dataset while keeping X-axis categorical. For the observer it will look like a line chart with equidistant spacing between observations' X coordinates:

( 1 ------ 5 ------ 30 ------ 600)

For now I am getting something like this:

(1-5-----30-------------------600)

This is my dataset:

var ds1 =  [
  {
    key: 'VAR-1',
    color: '#FF7F0E',
    values: [
   { "x" : "600", "y" : 0.07706} 
 , { "x" : "30", "y" : 0.00553} 
 , { "x" : "5", "y" : 0.00919} 
 , { "x" : "1", "y" : 0.00969} 
    ]
  }
];

I tried to create the ordinal axis and set it in the line chart object:

var chart =nv.models.lineChart()
             .margin({top: 10, bottom: 40, left: 60, right: 30});   
var x = d3.scale.ordinal().domain(["1","5", "30", "600"]);
chart.xAxis.scale(x);

chart.yAxis
    .tickFormat(d3.format(',.3f'));

chart.forceY([0]);

d3.select('#exampleOne')
    .datum(ds1)
    .transition().duration(500)
    .call(chart);

Nothing seems to be changing on the plot however.

I was wondering, could the ordinal axis be enabled at all in the NVD3 line chart implementation or this line chart was written for numerical data only?

PS: I am new to d3.js, so I might be doing something wrong here.

Chatoyant

Could you post your solution? – Disunity

Answer 1

Try setting rangeBounds([0, chartWidth]) for the scale. i.e

d3.scale.ordinal().domain(["1","5", "30", "600"]).rangeBounds([0, width]);

Correction : I thought your scales needed to be changed, but you actually want the line plotted to be have the values plotted equidistant. To do this you may want to modify the dataset you are sending to the lineGraph to something like.

var ds1 =  [ {
key: 'VAR-1',
color: '#FF7F0E',
values: [
{ "x" : "4", "y" : 0.07706} 
, { "x" : "3", "y" : 0.00553} 
, { "x" : "2", "y" : 0.00919} 
, { "x" : "1", "y" : 0.00969} 
]}
];

That way while the values shown in the x-axis will be ordinal (i.e 1, 5, 30, 600), the values plotted for the line will be on a linear scale.

Participate

Thanks a lot, I explored rangeBands(..) in the documentation but axis tickers still does not change to look equidistant using the ordinal scale. – Chatoyant

Do you want the graph tickers to look equidistant or the points plotted on the graph to be equidistant on the x-Axis. The above code changes the xAxis tick marker scale but not the scale for the line being plotted using the above data. Unfortunately there is no direct accessor for changing this in the NVD3 api. Take a look at models.lineChart implementation in nv.d3.js. One way you might look at implementing this is to transform the X-Axis data items into values representing indices of their positions. – Participate

Answer 2

I think you can't set an ordinal domain for any line or scatter chart in nvd3. These lines are in the models.scatter definition:

  if ( isNaN(x.domain()[0])) {
      x.domain([-1,1]);
  }

  if ( isNaN(y.domain()[0])) {
      y.domain([-1,1]);
  }

Obviously this will disallow any ordinal scales for the x or y scales in this type of chart (which underlies the line chart and most of the other non-bar charts it seems).

Nomanomad