In response to the pandemic spread all over the world, governments introduced a diverse range of control measures, varying in stringency and timing of implementation. The relative efficacy of different policy decisions have been, and continue to be, debated amongst scientists, decision-makers and the public. By spring 2020, more than half of the world’s population had experienced a lockdown with strong containment measures. Lack of transparency by the governments has affected the spread of the virus and more than that has been used as a political tool.
Israel is now going to her fourth election in 18 month, after reflecting over the past year I wanted to explore the limitations of the coronavirus crisis as a democratic challenge and create a timeline of the political events compared to the pandemic ones.
For this project I took a sketch that I did for COVID-19 workshop and I decided to improve it.
I used the Israel Ministry of health dashboard to find the statistics in the number of positive cases, deaths and ext. https://datadashboard.health.gov.il/COVID-19/
Since politics is not my field of study I needed to get accurate and reliable information, thanks to Yael Finklshtein a lobbyist reporter and Idan Benyamin a government reporter I collected some of the important political events that happened in Israel since the pandemic started.
In the beginning I was not sure how to show the numbers against the events, when seeing the dramatic shape of the statistic in the sketch I thought it could be interesting to reflect the numbers in a graph from one side of the timeline and when the user moves the slider he can see the political events above it.
I wasn't satisfied with the visuality of the timeline and I also thought that it could be complicated for users to see the bigger picture. I saw an article of The New York Times about the United States reaching nearly 500,000 deaths that each was represented by a single dot, the vertical timeline and the use of dots was an inspiration that helped improve my sketch.
I decided to change the timeline to be vertical, from one side there are the dates from March 2020 until October 2020 and from the other side there are the political events. When a political event happened the date in the timeline is bold
if (day.event) {
push();
noStroke();
text(day.event, textsX, y1, width - textsX, 500);
if (enable_lines_colors) stroke(col);
else stroke(255);
let lineX = map(day.height, 0, 1, textsX - 10, center + w); //x.pos animated
line(lineX, y1 + graph_bar_height / 2, textsX - 10, y1 + graph_bar_height / 2);
pop();
}
Each of the days are declare as index start from 0 and so on
//each of the days
for (let [index, day] of days.entries()) {
let y1 = index * graph_bar_height;
let y2 = (index + 1) * graph_bar_height;
}One of the biggest challenges that I had from the first sketch was to fit everything to the screen I wanted the user to scroll up and down. After searching online I found innerHeight() and scrollY() which are javascript functions that also helps me fixing the computing power
//height increase
if (y2 > scrollY && y1 < scrollY + innerHeight) {
if (day.animation !== 'INCREASE' && day.height < 1.0) {
day.animation = 'INCREASE';
day.animationStart = millis();
}
//if the bar is not on screen, stop - computer power
if (y2 < scrollY - 100 || y1 > scrollY + innerHeight + 100) {
continue;
}
I tried to play with different animation modes with oscillation and perlin noise, there is three animation options:
FIXED_SPEED_ALL - when you click on the screen every bar starts to spin, small ones slowly and longer ones faster.
FIXED_SPEED_CLICK - triggers the spin for the bar you clicked instead of all the bars together.
RANDOM_SPEED_CLICK - the bar you clicked will change its spin direction randomly, and the rotation speed is still linked to the bar size.
The first one is my favorite but I enjoyed playing with them all.
let clickMode = 'FIXED_SPEED_ALL';
function mouseClicked() {
if (clickMode !== 'FIXED_SPEED_ALL') return; //mouseclicked mode
spinActivated = !spinActivated;
if (spinActivated) {
days.forEach(day => day.rotation = 0.0); //if spin activated change every null value
}
}
if (clickMode === 'RANDOM_SPEED_CLICK') {
day.rotation += (noise(index + millis() / 1000) - 0.5) * rotationSpeed / 4; //random speed and direction
} else if (clickMode === 'FIXED_SPEED_CLICK') {
day.rotation += radians(rotationSpeed) * 2;
}
}I used timeElapsed that is in millisecond
let elapsed = millis() - day.animationStart;
if (day.animation === 'INCREASE') { //when increasing animation is over ans set width to 1
if (elapsed > animationDuration) {
day.height = 1.0;
day.animation = 'NONE';
} else {
day.height = elapsed / animationDuration;
}
} else if (day.animation === 'DECREASE') {
if (elapsed > animationDuration) {
day.height = 0.0;
day.animation = 'NONE';
} else {
day.height = 1.0 - elapsed / animationDuration;
}
}
I found a sketch by Toby Schachman that really helped me and I add the smoothStep function - https://editor.p5js.org/makio135/sketches/QPzU_a8WN.
function smoothStep(x, edge0 = 0.0, edge1 = 1.0) {
let t = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0);
return t * t * (3.0 - 2.0 * t);
}
I have a few problems with the text events, it needs to be readable but since the events are really close to each other in terms of the dates they overlapping, maybe the solution is to summarize the events.
The sketch wes very challenging and I am still not completely satisfied with it. I really enjoyed collecting the data and thinking about the ways to display this information. Ellen sent me a chapter of the Data Feminism book and I think I am really interested in exploring data visualization. I still want to keep working on this project and there are more events to add from November till today.
Comments