Public
Edited
May 16, 2023
viewof logGDPPerCapitaSlider = Range([6.635, 11.648], {value: 9.1415, step: 0.1})
viewof SocialSupportSlider = Range([0.290, 0.987], {value: 0.6385, step: 0.01})
viewof LifeExpectancySlider = Range([32.3, 77.10], {value: 54.7,step: 0.1})
viewof FreedomSlider = Range([0.258, 0.985], {value: 0.6215,step: 0.01})
viewof GenerositySlider = Range([-0.335, 0.689], {value: 0.177,step: 0.01})
viewof CorruptionSlider = Range([0.035, 0.983], {value: 0.509,step: 0.01})
viewof PositiveAffectSlider = Range([0.322, 0.944], {value: 0.633,step: 0.01})
viewof NegativeAffectSlider = Range([0.094, 0.705], {value: 0.3995,step: 0.01})
happiness_prediction = -0.998808 + 0.298835 * logGDPPerCapitaSlider + 2.871018 * SocialSupportSlider + 0.035179 * LifeExpectancySlider - 1.186201 * CorruptionSlider ;
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(900, 400);
//Create the first slider
sketch.slider1 = sketch.createSlider(6.635, 11.648, 9.1415, 0.1);
sketch.slider1.position(300, 175);
sketch.slider1.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);');
// Create the second slider
sketch.slider2 = sketch.createSlider(0.290, 0.987, 0.6385, 0.01);
sketch.slider2.position(375, 175);
sketch.slider2.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);');
// Create the third slider
sketch.slider3 = sketch.createSlider(32.3, 77.10, 54.7, 0.1);
sketch.slider3.position(450, 175);
sketch.slider3.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);');
// Create the fourth slider.
sketch.slider4 = sketch.createSlider(0.035, 0.983, 0.509, 0.01);
sketch.slider4.position(525, 175);
sketch.slider4.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);');
};
sketch.draw = function(){
sketch.background(255);
//add labels to the bars
sketch.textSize(12)
let s1 = 'Log of GDP Per Capita';
let s2 = 'Social\nSupport';
let s3 = 'Life\nExpectancy';
let s4 = 'Corruption';
sketch.fill(0);
sketch.textAlign(sketch.CENTER);
sketch.text(s1, 387, 345, 70, 30);
sketch.text(s2, 462, 345, 70, 30);
sketch.text(s3, 537, 345, 70, 30);
sketch.text(s4, 612, 345, 70, 30);
let happiness_prediction = -0.998808 + 0.298835 * sketch.slider1.value() + 2.871018 * sketch.slider2.value() + 0.035179 * sketch.slider3.value() - 1.186201 * sketch.slider4.value();
sketch.textSize(12);
sketch.text(sketch.round(happiness_prediction,4), 0, 0, 70, 30);
sketch.textSize(32);
if (happiness_prediction >= 7) {
sketch.text('Thriving',200, 70);
//Draw the face
sketch.fill(102,255, 0);
sketch.circle(200,200, 200);
// Draw the eyes
sketch.fill(0)
sketch.circle(200 - 40, 200 - 30, 20);
sketch.circle(200 + 40, 200 - 30, 20);
// Draw the mouth200
sketch.noFill();
sketch.strokeWeight(7);
sketch.arc(200, 200 + 12, 80, 80, 0, sketch.PI);
}
else if(happiness_prediction < 7 && happiness_prediction > 4) {
sketch.text('Struggling',200, 70);
sketch.fill(255,234,23);
sketch.circle(200, 200, 200);
// Draw the eyes
sketch.fill(0);
sketch.circle(200 - 40, 200 - 30, 20);
sketch.circle(200 + 40, 200 - 30, 20);
// Draw the mouth
sketch.noFill();
sketch.strokeWeight(7);
sketch.line(200 - 40, 200 +30, 200 +40, 200 +30);
}
else{
sketch.text('Suffering',200, 70)
//Draw the face
sketch.fill(255,0,0)
sketch.circle(200, 200, 200);
// Draw the eyes
sketch.fill(0);
sketch.circle(200 - 40, 200 - 30, 20);
sketch.circle(200 + 40, 200 - 30, 20);
// Draw the mouth
sketch.noFill();
sketch.strokeWeight(7);
sketch.arc(200, 200 + 50, 80, 80, sketch.PI, 2*sketch.PI);
}
};
})
md`<hr/>
## Imports`
import {vl} from "@vega/vega-lite-api-v5"
import {Range} from "@observablehq/inputs"
import {p5} from "@tmcw/p5";
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
