Idea and Inspiration:
I am really into cryptocurrency, especially Bitcoin. I am doing an internship in a crypto exchange. I always read price tendency graphs and wanted to create one of my own.
Sketch:
Code that I am proud of:
// X axis- dates
let dates = btcTable.getColumn("Date");
let years = {};
for (let date of dates) { // Iterate over each date
let year = date.substring(0, 4); //Extract the year from the date
years[year] = true; //ensures that the years object will only contain unique year values by the end of the loop.
}
let uniqueYears = Object.keys(years); //// Extract the keys (unique years) into an array
for (let i = 0; i < uniqueYears.length; i++) {
// // Iterate over each unique year
let x = map(i, 0, uniqueYears.length - 1, 50, width - 50); //// Map the year index to x-coordinate
text(uniqueYears[i], x - 15, height - 35); //// Display the year as text at the calculated position
The first step in the procedure is to extract every date entry from a database (btcTable) that contains the prices of Bitcoin. Each date is represented by a string to indicate a particular day. Every date string in a loop is handled with the substring(0, 4) function to extract only the year part. Essentially separating the year (assuming a YYYY-MM-DD format) with this method is to take the first four characters from the date string. After that, the values of each of the extracted years are set to true and they are used as keys in an object called years. By ensuring that every year is only recorded once, this technique produces a collection of unique years, independent of the number of entries for that year in the dataset.
In the 2 sample code provided, we first utilize the year of each date as a key in an object named years. Next, we use the Object.keys(years) function to obtain an array of those distinct years.
Creating the years Object: We take the year (the first four characters of the date string) and use it as a key in an object called years when we loop over each date in our dataset. We give every key a value of true. As a result of JavaScript’s prohibition on duplicate keys, this step effectively eliminates any duplicate years, guaranteeing that each year appears only once in the years object.
Object.keys(years): Extracting Unique Years: Object.keys() is a JavaScript function that accepts an object as input and returns an array with all of the object’s keys, or property names.
The years object contains an array containing all of the keys, which is returned when we apply Object.keys() to it. The uniqueYears array that is produced now contains every unique year in our dataset, without any duplicates, because the keys are the unique years that we previously extracted.
Why It’s Done This Way: This method makes sure that, no matter how many data points we have for a given year, we only include that year once when we visualize the data (e.g., putting it on a graph). This ensures that every year is represented uniformly and without repetition.
Difficulties:
I encountered so many difficulties…
First of all the data was not uploading correctly into P5. It was complicated to figure out why. Then I realized the thing that was causing the problem was the year formating. Initially was (1.feb 2022) then (1/2/2022) and finally I changed to 2022-02-1.
then I did not know how to portray a graph. I followed these steps from the P5 website — https://editor.p5js.org/pedbad/sketches/sbGhi7GwU
Then I didn’t know how to leave some margin ant the bottom bottom of the canvas. I used this equation to help me with map(value, start1, stop1, start2, stop2) let y = map(price, 0, 60000, height – 50, 50);
Improvements:
I would like to have more up-to-date data.