CODEWITHSUNDEEP
javascriptreactjsd3.js
rvz
rvz

Reputation: 43

Getting dates from JSON for D3

My JSON file has the dates separated like this:

   "time": {
        "date": {
            "year": 2018,
            "month": 2,
            "day": 25
        },
        "time": {
            "hour": 10,
            "minute": 19,
            "second": 6,
            "nano": 19000000
        }
    },

The tutorial I used to get a line graph in d3 going was in this link: https://datawanderings.com/2019/10/28/tutorial-making-a-line-chart-in-d3-js-v-5/

Using the code below:-

const timeConv = d3.timeParse("%d-%b-%Y");
const dataset = d3.csv(datacsv);
dataset.then(function(data) {
var slices = data.columns.slice(1).map(function(id) {
      return {
          id: id,
          values: data.map(function(d){
              return {
                  date: timeConv(d.date),
                  measurement: +d[id]
              };
          })
        };
      });
   });

How could I use the same code but use the JSON file with the separated date values?

Upvotes: 0

Views: 264

Answers (1)

soundquiet
soundquiet

Reputation: 495

Just make up the actual date string from the separate dates:

return {
    date: timeConv(d.time.date.day + '-' + d.time.date.month + '-' + d.time.date.year),
    measurement: +d[id]
};

Since the month is not described as the abbreviated month name, you need to change timeConv as

const timeConv = d3.timeParse("%d-%m-%Y");

An json data example:

let dataset = [{
  "id": 1,
  "time": {
    "date": {
      "year": 2018,
      "month": 2,
      "day": 25
    },
    "time": {
      "hour": 10,
      "minute": 19,
      "second": 6,
      "nano": 19000000
    }
  }
}, {
  "id": 2,
  "time": {
    "date": {
      "year": 2019,
      "month": 2,
      "day": 25
    },
    "time": {
      "hour": 10,
      "minute": 19,
      "second": 6,
      "nano": 19000000
    }
  }
}]

const timeConv = d3.timeParse("%d-%m-%Y");
newData = dataset.map(function(d) {

  return {
    date: timeConv(d.time.date.day + '-' + d.time.date.month + '-' + d.time.date.year),
    measurement: +d.id
  }
})



console.log(newData)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Upvotes: 1

Related Questions