rendering d3-timeseries on d3-plunker

I'm in need to use d3-timeseries graph given on link: http://mcaule.github.io/d3-timeseries/

I'm having some JSON data which I will use to plot on this graph. I'm trying to make this work on d3 plunker.

Being new to D3 and plunker,I'm not sure if I'm doing the code at right places or not as nothing is coming up. Please guide me.

Code I'm trying to use on d3-plunker:

<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data : [{date:new Date('2013-01-01'),n:120,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-02'),n:121,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-03'),n:122,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-04'),n:123,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-05'),n:124,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-06'),n:125,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-07'),n:126,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-08'),n:127,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-09'),n:128,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-10'),n:129,n3:124,ci_up:130,ci_down:118}]
var chart = d3.timeseries()
          .addSerie(data.slice(0,60),{x:'date',y:'n'},{interpolate:'linear',color:"#a6cee3",label:"value"})
          .addSerie(data.slice(50),
              {x:'date',y:'n3',ci_up:'ci_up',ci_down:'ci_down'},
              {interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"})
          .width(900)

</script>

Solution

First of all, you have to reference d3-timeseries:

<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>

After that, at the end of your code, you have to call it:

chart("body")

Finally, have in mind that this is not a valid JavaScript:

var data : [];

It should be var data = [] instead.

Here is your working code (click "run code snippet"):

var data = [{
  date: new Date('2013-01-01'),
  n: 120,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-02'),
  n: 121,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-03'),
  n: 122,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-04'),
  n: 123,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-05'),
  n: 124,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-06'),
  n: 125,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-07'),
  n: 126,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-08'),
  n: 127,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-09'),
  n: 128,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-10'),
  n: 129,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}]
var chart = d3.timeseries()
  .addSerie(data.slice(0, 60), {
    x: 'date',
    y: 'n'
  }, {
    interpolate: 'linear',
    color: "#a6cee3",
    label: "value"
  })
  .addSerie(data.slice(50), {
    x: 'date',
    y: 'n3',
    ci_up: 'ci_up',
    ci_down: 'ci_down'
  }, {
    interpolate: 'monotone',
    dashed: true,
    color: "#a6cee3",
    label: "prediction"
  })
  .width(900)

chart("body")

.axis line, .axis path {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>