CODEWITHSUNDEEP
javascriptjsond3.js
Ashley
Ashley

Reputation: 155

Formatting in JSON File to be used in D3.js

I'm having issues understanding how to format dates and times in JSON.
I'm trying to use the file in a snippet of D3.js code. I appreciate any explanation you may have as I am new to JSON and relatively new to D3.

[
  {"BeaconMac":"Office","UserMac":"22", "Date": "3.6.2015", "Time":"8:09"},
  {"BeaconMac":"Office","UserMac":"42", "Date": "3.6.2015", "Time": "8:10"},
  {"BeaconMac":"TreatmentRoom","UserMac:":"60", "Date": "3.6.2015", "Time":"8:11"}
]

Here is the code I'm implementing. It does not show anything when I run it.

<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Hello world</p>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>D3 Tutorial</title>
    <!--let browser know where to find library-->
    <script src = "http://d3js.org/d3.v3.min.js"></script>
</head>


<body>

<script>

    d3.json("data.json", function(data){

        var canvas = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500);

        canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d){return d.Time * 10;})
                    .attr("height", 48)
                    .attr("y", function(d, i){return d.Date * 50;})
                    .attr("fill", "blue");
        /*canvas.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .attr("fill","white")
                .attr("y", function(d,i){return i * 50;})
                .text(function(d){return d.name + 24;})*/
    })

</script>




</body>

</html>

Upvotes: 0

Views: 1451

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13746

I don't know anything about D3 but your "dates" are definitely not a JavaScript Date object. If you open a JavaScript console in Chrome (as an example) it is easy to see what JavaScript would want a date to look like in JSON:

var myDate = new Date();

console.log(myDate);
VM415:2 Wed Feb 10 2016 13:09:29 GMT-0700 (MST)

myDate.toJSON();
"2016-02-10T20:09:29.056Z"

What you have in your JSON is not a Date object you just have strings with labels of Date and Time. A Date object can represent both date and time in one object.

It may well be D3 has a completely different idea for what a Date and Time are but if they are looking for an actual JavaScript Date object you would need to change what is in your JSON.

Upvotes: -1

meetamit
meetamit

Reputation: 25157

You are correct that the dates need to be processed before they are usable, because they are currently in String form. So you need to create Date objects or perhaps Numbers out of them. So, for starters, you need to loop over the data, so that you can accesses and modify each date. You do that as soon as the data is loaded:

d3.json("data.json", function(data){
  data.forEach(function(d) {
    // Here d is an entry in the data array
    console.log(d.Date); // logs "3.6.2015" 3 times

    // Now do something with d.Date...
  });

The question is what to do, and it somewhat depends on how you need this data to be. But likely, you want to create Date objects, the equivalent of calling new Date(2015, 2, 6).

D3 has convenient functions that will format and/or parse strings from/into Date objects. For example:

var formatter = d3.time.format("%m.%d.%Y")

formatter is now a function, that if you call it with a date object, eg formatter(new Date()) will return a string such as "02.10.2015". You can read more about how that format is specified using those % characters in the d3 API reference.

However, you need to do the opposite of the example above; you want to convert the formatted string into a date object. That's possible too, using that formatter function:

formatter.parse("2.6.2015")

that will return a Date object set to Feb 6th 2015.

Putting it all together, the loop from the beginning would look something like this:

d3.json("data.json", function(data) {
  var formatter = d3.time.format("%m.%d.%Y");
  data.forEach(function(d) {
    d.Date = formatter.parse(d.Date);
  });
})

Upvotes: 2

Related Questions