It's hard to tell from just code eyeballing, but I noticed:

  1. You make a series of .rates properties from the non-"date" json data, so .rates for the first datum would be [{name:"2014", value:"0.0812"},{name:"2015", value:"0.0780"},{name:"2016", value:"0.0838"}]

    d.rates = { return {name: name, value: +d[name]}; });

  2. You then pass these to a d3.svg.line function

    .attr("d", function(d) { return line(d.rates); })

  3. But this line function has been previously set up to seemingly expect .date and .value properties not .name and .value

    var line = d3.svg.line().interpolate("basis").x(function(d) { return x(; }).y(function(d) { return y(d.value); });

  4. And the scale x has been set up to expect .date (the month strings) as arguments, because they were set as the domain

    x.domain( { return; }));

In short, it seems the x scale and line function are expecting data objects categorised by month to draw one line per year, but you're passing in the .rates objects which are organised by year in the expectation of drawing one line per month?

More Query from same tag