The x axis goes from 0 to 360 and so does the random data.
I want to change it to a time scale representing a year with the 12 months and if you zoom in you see the days and finally the time in minutes.
The book I have gives me a few examples but the data also consists of dates. Do I have to convert my random numbers into date formats or create random time/date data to make it work?
Well if you want a time-based scale… it will need some time-based data to work off of Technically, numbers can be time data (Timestamps), but lets look at your scale: let xScale = d3.scaleTime().domain([Date(2022,1,1) , Date.now]).range([0, width]).nice(),
If you generate random numbers between 0 and 360 and interpolate them as dates, they will come out as random times in the first 6 minutes of January 1, 1970. Timestamp 0 is Midnight, and every number counts as a single second.
Spitballing a random date generator in the range Midnight January 1, 2022 to Now… and making it readable instead of my one-line normality…
//Create 360 date points using the function...
let randDates = Array.from({length: 360}, () => {
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);
});
// Step 3
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin, //1700
height = svg.attr("height") - margin //700
const offsetX = margin/2 + width/2;
const offsetY = margin/2 + height/2;
//Create 360 date points using the function...
let randDates = Array.from({length: 360}, () => {
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);
});
// Step 4
let xScale = d3.scaleTime().domain([Jan1 , RandTime]).range([0, width]).nice(),
yScale = d3.scaleLinear().domain([0, 210]).range([height, 0]).nice(),
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 is not defined
Date is an object. To create a new Date object, you have to specify the new keyword. If you just say Date() Javascript is looking for a function called Date. If you tell it new Date Javascript goes and finds the class definition for a Date object and calls its constructor.
My code in the previous post generates a dataset. You would need to zip together the dates and some Y value, as you have with your other data.
You can pull the Jan1 out of the function if you like, and do something like let xScale = d3.scaleTime().domain([Jan1 , new Date]).range([0, width]).nice(),
You mean your code generates the plotted data which go into an array. I use three lines, two linear, up and down and one curvy.
So the scale code is correct?
//Create 360 date points using the function...
let randDates = Array.from({length: 360}, () => {
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);
// Step 4
let xScale = d3.scaleTime().domain([Jan1 , new Date]).range([0, width]).nice(),
yScale = d3.scaleLinear().domain([0, 210]).range([height, 0]).nice(),
newX = xScale,
newY = yScale;
console.log(xScale(new Date('2022-1-1')));
console.log(xScale.invert(400));
This gives me a time scale, zooming to 10080 gets me as close to 5 min intervals. Now I wanna change it from am pm to 24h style.
For January 1? They’re not actually beside each other, one is inside the other:
let Jan1 = new Date( new Date().getFullYear() ,0,1);
When you call new Date, there are a lot of overriding options for going into the constructor; in this case, i’m passing 3 numerical parameters to the outer constructor; this means i’m going into the constructor method:
Date(int Year, int Month, int Day)
The month and Day are fairly trivial - Month 0 is January (months are 0-indexed!), and Day 1 is… well, Day 1.
The first parameter, where we want the Year, I put new Date().getFullYear()
Remember that i said new Date will default to the current datetime? so, I call new Date(), which gives me a date with the current timestamp, and then getFullYear from that date object, which will give me the current year - in this case, 2022.
There are other ways this could have been done… mathematical ways, functional ways… this was the way i did it.
Need to update my data generating code next to get actual data. 270 days (until September) * 24 hours * 60 minutes = 388.800. Every minute a new data point.
You mean your one line of code creates one random dataset and replaces a third of this code?
Used 6480 since the other took too long.
// 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.round(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.sort(function(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.round(Math.random() * (max - min)) + min;
x2_arr[i]= i;
y2_arr[i]= r;
}
s2_arr = y2_arr.sort(function(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.round(Math.pow(Math.random(), 3) * (max - min)) + min;
x3_arr[i]= i;
y3_arr[i]= r;
}
s3_arr = y3_arr.sort(function(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 quite, I replaced dataset1 with x_date_values but there is this error message:
d3.v5.min.js:2 Error: attribute d: Expected number, “MNaN,NaNCNaN,NaN,…”.
Your function or code only gives me values of the 1.1.2022:
6464: Sat Jan 01 2022 01:47:44 GMT+0100 (Mitteleuropäische Normalzeit) {}
6465: Sat Jan 01 2022 01:47:45 GMT+0100 (Mitteleuropäische Normalzeit) {}
6466: Sat Jan 01 2022 01:47:46 GMT+0100 (Mitteleuropäische Normalzeit) {}
6467: Sat Jan 01 2022 01:47:47 GMT+0100 (Mitteleuropäische Normalzeit) {}
6468: Sat Jan 01 2022 01:47:48 GMT+0100 (Mitteleuropäische Normalzeit) {}
6469: Sat Jan 01 2022 01:47:49 GMT+0100 (Mitteleuropäische Normalzeit) {}
6470: Sat Jan 01 2022 01:47:50 GMT+0100 (Mitteleuropäische Normalzeit) {}
6471: Sat Jan 01 2022 01:47:51 GMT+0100 (Mitteleuropäische Normalzeit) {}
I need random values from 1.1.2022 until today. Maybe the y scale is random and it all happens every hour.
If put together with the index array:
2724: (2) [2724, Sat Jan 01 2022 00:45:24 GMT+0100 (Mitteleuropäische Normalzeit)]
2725: (2) [2725, Sat Jan 01 2022 00:45:25 GMT+0100 (Mitteleuropäische Normalzeit)]
2726: (2) [2726, Sat Jan 01 2022 00:45:26 GMT+0100 (Mitteleuropäische Normalzeit)]
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 if you’ve sliced off the first 6480 records of a function that generates a point per minute… you’ve sliced 6480 minutes… which would be 108 hours… or 4 and a half days. So yes, i would expect slicing 6480 records from that function to give you a data point every minute until Noon on January 5th.
Okay, so now we’re changing the specification
Lets… address this whole… data generation… mess you’ve got going on. No offense, but it is messy.
Do you want the X values to be…
1 point every hour? That will have a variable number of points as time goes on… more hours, more points.
6480 points, evenly divided across the timescale? That will have a fixed number of points, but as time goes on, those points will get further and further apart.
From what I can see in your code, the Y values of the three lines are:
Red: An increasing data set of random linear values between 0 and 200.
Green: A decreasing data set of random linear values between 200 and 0.
Blue: An increasing data set of random exponential values, with a power of 3, between 0 and 200.
I want all those those data points (could be a lot more, like a few thousand) ranging from 0 to 200 being displayed on a time scale representing this year instead of 0 to 360 as discrete numbers. Three different graphs, can look the same as now. I can already zoom far in enough to see a 5 min gap.
When this works, I wanna change the time format to 24h european system, not a.m., p.m. but 18:00 or so.
When this works, I later want to use and display different y axes, one on the right, one on the left and one somewhere else, one for each data set, cause they are different. If on the same scale one would be very small and the other stretched, e.g. 0 to 200, 0 to 500, 600 to 2000. I have literature to add one more scale.
The tooltip should still work on this. Final step would be adding a vertical line wherever my mouse is and when this line hits a circle (data point) it gives me the tooltip.
Right. So what i hear you say is you want a variable but definable number of points, spread across the year.
//Define some values...
//Our y-scale boundries...
const min = 0;
const max = 200;
//Number of points to create on the graph...
const points = 6480;
//I'm going to getTime here, because i only use Jan1 as its time form.
const Jan1 = new Date(new Date().getFullYear(),0,1).getTime();
//down to the millisecond, how wide is the gap between our datapoints?
const gap = Math.floor((new Date().getTime() - Jan1)/points);
//Data
//The X values are common.
const x_values = Array.from({length: points}, (e,i) => new Date(Jan1+(i*gap)));
//The Y values aren't.
const y_red = Array.from({length: points}, () => Math.round(Math.random() * (max - min)) + min)
y_red.sort((a,b) => a-b);
//I'm just going to steal the same values from the red set and flip them. I'm lazy. You can do whatever.
const y_green = [...y_red];
y_green.sort((a,b) => b-a);
//Blue doin exponential things.
const y_blue = Array.from({length: points}, () => Math.round(Math.pow(Math.random(), 3) * (max - min)) + min);
y_blue.sort((a,b) => a-b);
//Combine 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]);
//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]]);
}
This would replace lines 1-76 of the code in your codepen.
EDIT: Oh, i see where you’ve stuck that bit of code… right… it would replace lines 1-76 AND 87-111. Stick it at the top and call it Step 1. Or… 1 and 2? i dont know where Step 2 went.
