Using a time scale instead of normal numbers – JavaScript – SitePoint Forums

For this graph

The x axis goes from 0 to 360 and so does the random information.

I wish to change it to a time scale representing a yr with the 12 months and in case you zoom in you see the times and eventually the time in minutes.

The e book I’ve provides me just a few examples however the information additionally consists of dates. Do I’ve to transform my random numbers into date codecs or create random time/date information to make it work?

        let xScale = d3.scaleTime().area([Date(2022,1,1) , Date.now]).vary([0, width]).good(),
            yScale = d3.scaleLinear().area([0, 210]).vary([height, 0]).good(),
            newX = xScale,
            newY = yScale;

        var axBot = g.append("g")
         .attr("remodel", "translate(0," + peak + ")")
         .attr('id', 'x-axis')
         .name(d3.axisBottom().scale(xScale).tickSize(25));

Created a brand new Codepen for that:

Effectively in order for you a time-based scale… it can want some time-based information to work off of
Technically, numbers could be time information (Timestamps), however lets take a look at your scale:
let xScale = d3.scaleTime().area([Date(2022,1,1) , Date.now]).vary([0, width]).good(),
For those who generate random numbers between 0 and 360 and interpolate them as dates, they’ll come out as random occasions within the first 6 minutes of January 1, 1970. Timestamp 0 is Midnight, and each quantity counts as a single second.

Spitballing a random date generator within the vary Midnight January 1, 2022 to Now… and making it readable as an alternative of my one-line normality…

//Create 360 date factors utilizing the operate...
let randDates = Array.from(size: 360, () => 
  let Jan1 = new Date(new Date().getFullYear(),0,1);  //Wanted for a backside of our random pool.
//Get a random variety of seconds between 0 and Now's Variety of Seconds of the 12 months, then add January 1, 2022 to it.
  let RandTime = Math.flooring(Math.random()*(Date.now()-Jan1))+Jan1.getTime(); 
//Make it a date and spit it out.
  return new Date(RandTime);
);

Thanks will strive that out.

Additionally discovered this within the e book:

        let xScale = d3.scaleTime().area([new Date(2022,1,1) , new Date.now]).vary([0, width]).good(),
            yScale = d3.scaleLinear().area([0, 210]).vary([height, 0]).good(),
            newX = xScale,
            newY = yScale;

        console.log(xScale(new Date('2022-1-1')));
        console.log(xScale.invert(400));

What’s the distinction in placing “new” in entrance of date? In my case with “new” I get nothing, with out at the very least some errors and pics.

The place precisely do I place your code? Earlier than Step 4, the scaling?

        // Step 3
        var svg = d3.choose("svg"),
            margin = 200,
            width = svg.attr("width") - margin, //1700
            peak = svg.attr("peak") - margin //700

            const offsetX = margin/2 + width/2;
            const offsetY = margin/2 + peak/2;

        //Create 360 date factors utilizing the operate...
        let randDates = Array.from(size: 360, () => 
            let Jan1 = new Date(new Date().getFullYear(),0,1);  //Wanted for a backside of our random pool.
            //Get a random variety of seconds between 0 and Now's Variety of Seconds of the 12 months, then add January 1, 2022 to it.
            let RandTime = Math.flooring(Math.random()*(Date.now()-Jan1))+Jan1.getTime(); 
            //Make it a date and spit it out.
            return new Date(RandTime);
        );

        // Step 4 
        let xScale = d3.scaleTime().area([Jan1 , RandTime]).vary([0, width]).good(),
            yScale = d3.scaleLinear().area([0, 210]).vary([height, 0]).good(),
            newX = xScale,
            newY = yScale;

        console.log(xScale(new Date('2022-1-1')));
        console.log(xScale.invert(400));

Line Chart Zoom – Zeitachse.html:147 Uncaught ReferenceError: Jan1 shouldn’t be outlined

Date is an object. To create a brand new Date object, you must specify the new key phrase. For those who simply say Date() Javascript is in search of a operate known as Date. For those who inform it new Date Javascript goes and finds the category definition for a Date object and calls its constructor.

My code within the earlier put up generates a dataset. You would wish to zip collectively the dates and a few Y worth, as you’ve got along with your different information.

Mmmh… not fairly.

You possibly can pull the Jan1 out of the operate in case you like, and do one thing like
let xScale = d3.scaleTime().area([Jan1 , new Date]).vary([0, width]).good(),

(new Date will default to the present datetime)

You imply your code generates the plotted information which go into an array. I exploit three strains, two linear, up and down and one curvy.

So the size code is appropriate?

        //Create 360 date factors utilizing the operate...
        let randDates = Array.from(size: 360, () => 
            let Jan1 = new Date(new Date().getFullYear(),0,1);  //Wanted for a backside of our random pool.
            //Get a random variety of seconds between 0 and Now's Variety of Seconds of the 12 months, then add January 1, 2022 to it.
            let RandTime = Math.flooring(Math.random()*(Date.now()-Jan1))+Jan1.getTime(); 
            //Make it a date and spit it out.
            return new Date(RandTime);
        );

        let Jan1 = new Date(new Date().getFullYear(),0,1);

        // Step 4
        let xScale = d3.scaleTime().area([Jan1 , new Date]).vary([0, width]).good(),
            yScale = d3.scaleLinear().area([0, 210]).vary([height, 0]).good(),
            newX = xScale,
            newY = yScale;

        console.log(xScale(new Date('2022-1-1')));
        console.log(xScale.invert(400));

This provides me a time scale, zooming to 10080 will get me as shut to five min intervals. Now I wanna change it from am pm to 24h fashion.

Will do that: https://stackoverflow.com/questions/15654000/d3-js-default-axis-tickformat-to-24-hour-clock

And have to plot information since that’s gone.

Why two “new date” after the opposite?

For January 1? They’re not really beside one another, one is inside the opposite:

let Jan1 = new Date(     new Date().getFullYear()    ,0,1);

While you name new Date, there are quite a lot of overriding choices for going into the constructor; on this case, i’m passing 3 numerical parameters to the outer constructor; this implies i’m going into the constructor technique:

Date(int 12 months, int Month, int Day)

The month and Day are pretty trivial – Month 0 is January (months are 0-indexed!), and Day 1 is… properly, Day 1.

The primary parameter, the place we would like the 12 months, I put new Date().getFullYear()
Do not forget that i stated new Date will default to the present datetime? so, I name new Date(), which supplies me a date with the present timestamp, after which getFullYear from that date object, which can give me the present yr – on this case, 2022.

There are different methods this might have been executed… mathematical methods, practical methods… this was the way in which i did it.

Simply found that point.format has been deprecated.
https://splunktool.com/how-to-format-time-on-xaxis-use-d3js

So will strive the opposite choices.

Every little thing else is appropriate thus far?

Have to replace my information producing code subsequent to get precise information. 270 days (till September) * 24 hours * 60 minutes = 388.800. Each minute a brand new information level.

Effectively the code i supplied is producing random information factors, not an information level each minute.

If you would like an information level precisely each minute…spitballing…

let Jan1 = new Date(new Date().getFullYear(),0,1);
let x_date_values = Array.from(size: 388800, (e,i) => new Date(Jan1.getTime()+(i*60000)));

You imply your one line of code creates one random dataset and replaces a 3rd of this code?
Used 6480 for the reason that different took too lengthy.

        // Step 1

        let min = 0;
        let max = 200;
        let x_arr = [];
        let y_arr = [];
        let s_arr = [];
        let z_arr = [];

        for (let i = 0; i < 6480; i++) 
            var r = Math.spherical(Math.random() * (max - min)) + min;
            x_arr[i]= i;
            y_arr[i]= r;
            z_arr.push([x_arr[i],y_arr[i]]);
        

        s_arr = y_arr.type(operate(a, b)return a - b);

        let neu_arr = [];
        let zz_arr = [];

        for (let i = 0; i < 6480; i++) 
            neu_arr[i]= i;
            zz_arr.push([neu_arr[i], s_arr[i]]);
        

        // Zweiter und dritter Datensatz

        let x2_arr = [];
        let y2_arr = [];
        let s2_arr = [];
        let neu2_arr = [];
        let zz2_arr = [];

        for (let i = 0; i < 6480; i++) 
            var r = Math.spherical(Math.random() * (max - min)) + min;
            x2_arr[i]= i;
            y2_arr[i]= r;
        

        s2_arr = y2_arr.type(operate(a, b)return b - a);

        for (let i = 0; i < 6480; i++) 
            neu2_arr[i]= i;
            zz2_arr.push([neu2_arr[i], s2_arr[i]]);
        

        console.log(zz2_arr);

        let x3_arr = [];
        let y3_arr = [];
        let s3_arr = [];
        let neu3_arr = [];
        let zz3_arr = [];

        for (let i = 0; i < 6480; i++) 
            var r = Math.spherical(Math.pow(Math.random(), 3) * (max - min)) + min;
            x3_arr[i]= i;
            y3_arr[i]= r;
        

        s3_arr = y3_arr.type(operate(a, b)return a - b);

        for (let i = 0; i < 6480; i++) 
            neu3_arr[i]= i;
            zz3_arr.push([neu3_arr[i], s3_arr[i]]);
        

        console.log(zz3_arr);

        var dataset1 = zz_arr;
        var dataset2 = zz2_arr;
        var dataset3 = zz3_arr;

Not fairly, I changed dataset1 with x_date_values however there’s this error message:
d3.v5.min.js:2 Error: attribute d: Anticipated quantity, “MNaN,NaNCNaN,NaN,…”.

Effectively yeah, since you changed a 2-dimensional dataset of x,y information with a 1-dimensional array of dates

I wasnt going to touch upon the info technology schema you’ve bought going there, however if you wish to tidy that up we are able to.

Sure, I seen that myself. Will attempt to insert it into the two dimensional array as earlier than.

Your operate or code solely provides me values of the 1.1.2022:

1. 6464: Sat Jan 01 2022 01:47:44 GMT+0100 (Mitteleuropäische Normalzeit)
2. 6465: Sat Jan 01 2022 01:47:45 GMT+0100 (Mitteleuropäische Normalzeit)
3. 6466: Sat Jan 01 2022 01:47:46 GMT+0100 (Mitteleuropäische Normalzeit)
4. 6467: Sat Jan 01 2022 01:47:47 GMT+0100 (Mitteleuropäische Normalzeit)
5. 6468: Sat Jan 01 2022 01:47:48 GMT+0100 (Mitteleuropäische Normalzeit)
6. 6469: Sat Jan 01 2022 01:47:49 GMT+0100 (Mitteleuropäische Normalzeit)
7. 6470: Sat Jan 01 2022 01:47:50 GMT+0100 (Mitteleuropäische Normalzeit)
8. 6471: Sat Jan 01 2022 01:47:51 GMT+0100 (Mitteleuropäische Normalzeit)

I would like random values from 1.1.2022 till at present. Possibly the y scale is random and all of it occurs each hour.

If put along with the index array:

1. 2724: (2) [2724, Sat Jan 01 2022 00:45:24 GMT+0100 (Mitteleuropäische Normalzeit)]

2. 2725: (2) [2725, Sat Jan 01 2022 00:45:25 GMT+0100 (Mitteleuropäische Normalzeit)]

3. 2726: (2) [2726, Sat Jan 01 2022 00:45:26 GMT+0100 (Mitteleuropäische Normalzeit)]

4. 2727: (2) [2727, Sat Jan 01 2022 00:45:27 GMT+0100 (Mitteleuropäis

        //Create 360 date points using the function...
        let randDates = Array.from(length: 6480, () => 
            let Jan1 = new Date(new Date().getFullYear(),0,1);  //Needed for a bottom of our random pool.
            //Get a random number of seconds between 0 and Now's Number of Seconds of the Year, then add January 1, 2022 to it.
            let RandTime = Math.floor(Math.random()*(Date.now()-Jan1))+Jan1.getTime(); 
            //Make it a date and spit it out.
            return new Date(RandTime);
        );
   
        let Jan1 = new Date(new Date().getFullYear(),0,1);
        let x_date_values = Array.from(length: 6480, (e,i) => new Date(Jan1.getTime()+(i*1000)));
   
        console.log(x_date_values);
   
        let neud_arr = [];
        let zzd_arr = [];
   
        for (let i = 0; i < 6480; i++) 
            neud_arr[i]= i;
            zzd_arr.push([neud_arr[i], x_date_values[i]]);
        
   
        var dataset1 = zzd_arr;
   
        console.log(dataset1);
   

So in case you’ve sliced off the primary 6480 data of a operate that generates a degree per minute… you’ve sliced 6480 minutes… which might be 108 hours… or 4 and a half days. So sure, i might count on slicing 6480 data from that operate to offer you an information level each minute till Midday on January fifth.

Okay, so now we’re altering the specification

Lets… tackle this entire… information technology… mess you’ve bought occurring. No offense, however it’s messy.

Would you like the X values to be…
1 level each hour? That may have a variable variety of factors as time goes on… extra hours, extra factors.
6480 factors, evenly divided throughout the timescale? That may have a set variety of factors, however as time goes on, these factors will get additional and additional aside.

From what I can see in your code, the Y values of the three strains are:
Pink: An rising information set of random linear values between 0 and 200.
Inexperienced: A lowering information set of random linear values between 200 and 0.
Blue: An rising information set of random exponential values, with an influence of three, between 0 and 200.

I would like all these these information factors (may very well be much more, like just a few thousand) starting from 0 to 200 being displayed on a time scale representing this yr as an alternative of 0 to 360 as discrete numbers. Three completely different graphs, can look the identical as now. I can already zoom far in sufficient to see a 5 min hole.

When this works, I wanna change the time format to 24h european system, not a.m., p.m. however 18:00 or so.

When this works, I later wish to use and show completely different y axes, one on the appropriate, one on the left and one elsewhere, one for every information set, trigger they’re completely different. If on the identical scale one can be very small and the opposite stretched, e.g. 0 to 200, 0 to 500, 600 to 2000. I’ve literature so as to add another scale.

The tooltip ought to nonetheless work on this. Ultimate step can be including a vertical line wherever my mouse is and when this line hits a circle (information level) it provides me the tooltip.

Proper. So what i hear you say is you desire a variable however definable variety of factors, unfold throughout the yr.

//Outline some values...
//Our y-scale boundries...
const min = 0;
const max = 200;
//Variety of factors to create on the graph...
const factors = 6480;
//I will getTime right here, as a result of i solely use Jan1 as its time kind.
const Jan1 = new Date(new Date().getFullYear(),0,1).getTime(); 
//all the way down to the millisecond, how huge is the hole between our datapoints?
const hole = Math.flooring((new Date().getTime() - Jan1)/factors); 

//Information
//The X values are widespread.
const x_values = Array.from(size: factors, (e,i) => new Date(Jan1+(i*hole)));
//The Y values aren't.
const y_red = Array.from(size: factors, () => Math.spherical(Math.random() * (max - min)) + min)
y_red.type((a,b) => a-b);
//I am simply going to steal the identical values from the purple set and flip them. I am lazy. You are able to do no matter.
const y_green = [...y_red]; 
y_green.type((a,b) => b-a);
//Blue doin exponential issues.
const y_blue = Array.from(size: factors, () => Math.spherical(Math.pow(Math.random(), 3) * (max - min)) + min);
y_blue.type((a,b) => a-b);

//Mix the datasets.
const dataset1 = y_red.map((y,i) => [x_values[i],y]);
const dataset2 = y_green.map((y,i) => [x_values[i],y]);
const dataset3 = y_blue.map((y,i) => [x_values[i],y]);

On in compact kind, with out the feedback, and the way i’d in all probability do it in my very own code as a result of i’m a foul programmer:

const min = 0;
const max = 200;
const factors = 6480;
const Jan1 = new Date(new Date().getFullYear(),0,1).getTime(); 
const hole = Math.flooring((new Date().getTime() - Jan1)/factors); 

const x_values = Array.from(size: factors, (e,i) => new Date(Jan1+(i*hole)));
const dataset1 = Array.from(size: factors, () => Math.spherical(Math.random() * (max - min)) + min).type((a,b) => a-b).map((y,i) => [x_values[i],y]);
const dataset2 = Array.from(size: factors, () => Math.spherical(Math.random() * (max - min)) + min).type((a,b) => b-a).map((y,i) => [x_values[i],y]);
const dataset3 = Array.from(size: factors, () => Math.spherical(Math.pow(Math.random(), 3) * (max - min)) + min).type((a,b) => a-b).map((y,i) => [x_values[i],y]);

So this may go away?

        //Create 360 date factors utilizing the operate...
        let randDates = Array.from(size: 6480, () => 
            let Jan1 = new Date(new Date().getFullYear(),0,1);  //Wanted for a backside of our random pool.
            //Get a random variety of seconds between 0 and Now's Variety of Seconds of the 12 months, then add January 1, 2022 to it.
            let RandTime = Math.flooring(Math.random()*(Date.now()-Jan1))+Jan1.getTime(); 
            //Make it a date and spit it out.
            return new Date(RandTime);
        );

        let Jan1 = new Date(new Date().getFullYear(),0,1);
        let x_date_values = Array.from(size: 6480, (e,i) => new Date(Jan1.getTime()+(i*1000)));

        console.log(x_date_values);

        let neud_arr = [];
        let zzd_arr = [];

        for (let i = 0; i < 6480; i++) 
            neud_arr[i]= i;
            zzd_arr.push([neud_arr[i], x_date_values[i]]);
        

// var dataset1 = zzd_arr;

        console.log(dataset1);

This may exchange strains 1-76 of the code in your codepen.

EDIT: Oh, i see the place you’ve caught that little bit of code… proper… it will exchange strains 1-76 AND 87-111. Stick it on the high and name it Step 1. Or… 1 and a pair of? i dont know the place Step 2 went.