D3.js in line Chart fetch data from local variable

Question

I am new to d3.js so please help I am trying to implement a line chart but i want to fetch the data from local variable

but getting error at this line

var cities = data.columns.slice(1).map(function(id))

when i console.log(data.columns); i am getting undefined

Uncaught TypeError: Cannot read property 'slice' of undefined

but getting this error

here is the code pen

I want to implement something like this

Answer 1

You'd better use the d3.v4.min.js by <script src="//d3js.org/d3.v4.min.js"></script> .

I came up with the same Error, and fixed it by changing <script type="text/javascript" src="/static/assets/js/d3.js"></script> to <script src="//d3js.org/d3.v4.min.js"></script> . I guess that something has changed between these two versions of d3.js .

Answer 2

As per codepen there is no key named columns inside data Try this

var cities = data.map(function(id, index){     
  return {
    id: id,
    values : {
      date : id.date,
      temperature:id[index]
    }
  }
});`