Difficulty converting json string to date format in d3

Question

I've tried to look at some code examples for this but I'm stuck here. I have a json which is reading dates as strings. For example:

1/1/1993 is 33970.

I have points on a map, each with associated dates. I have a time-slider based on dates. Once the time slider is updated, I would like the appearance of the points to change based on the date value of slider.

// build slider

var inputValue = null;
var year = ["1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009", "2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"];

Build function to update slider.

function update(value) {
document.getElementById("range").innerHTML=year[value];
inputValue = year[value];
d3.selectAll(".points")
    .attr("fill", dateMatch);
}

d3.select("#timeslide").on("input", function() {
    update(+this.value);
    console.log(value)

});

And finally, build the function that matches the date in my data, to the date in the time slider!

function dateMatch(data, value) {
var d = new Date(data.properties.Sign_Date);
var y = [d.getFullYear()];
console.log(y)
console.log(d)
if (inputValue == y) {
    this.parentElement.appendChild(this);
    return "blue";
} else {
    return "#999";
};

}

I think the template here should work but there is an issue reading in the dates in the dateMatch function. For some reason, it's just printing

Wed Dec 31 1969 16:00:41 GMT-0800 (Pacific Standard Time)

For every record in my data. Which doesn't make sense since my data doesnt even go back to 1969. Can anyone tell me what they think might breaking here, or better, an easier way to filter this temporal data?

you need to input a valid param for new Date() , currently it seems you input something like 41000 which cause it to show unix epoch +41s — William Chong
– William Chong, Commented Sep 28, 2018 at 20:33

chriopp · Accepted Answer · 2018-09-29 11:05:07Z

1

You need to convert all your dates to real dates. Be aware, if you don't use UTC (universal time zone) or another defined timezone the date conversion will depend on the timezone set on the computer. For more about javascript dates I suggest reading MDN.

function createDateUTC(yourDateFormat) {
    var parsed = yourDateFormat.split('/'),
        day = +parsed[0],
        monthIndex = +parsed[1]-1,
        year = +parsed[2]
    return new Date(Date.UTC(year, monthIndex, day))
}

answered Sep 29, 2018 at 11:05

chriopp

9577 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Difficulty converting json string to date format in d3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related