Public
Edited
Apr 26, 2023
Importers
xy = {
const arr = []
let x = 50;
let y = 80;
let r = 10;
let yellow = 245;
let lightblue = 170;
let darkblue = 60;
let brown = 41;
let red = 28;
let purple = 23;
let darkblue_2 = 18;
let dark_green = 13;
let yellow_2 = 11;
let color = "#fff563"
for (let i = 0; i < 31; i++){
for (let j= 0; j < 20; j ++){
if (yellow > 0) {
color = "#fff563";
yellow -= 1;
} else if (lightblue > 0) {
if (lightblue == 170){
x += 30
}
color = "#a6dcf7"
lightblue -= 1
} else if (darkblue > 0) {
if (darkblue == 60){
x += 30
}
color = "#143580"
darkblue -= 1
} else if (brown > 0) {
if (brown == 41){
x += 30
}
color = "#805e3c"
brown -= 1
} else if (red > 0) {
if (red == 28){
x += 30
}
color = "#b31b10"
red -= 1
} else if (purple > 0) {
if (purple == 23){
x += 30
}
color = "#501499"
purple -= 1
} else if (darkblue_2 > 0) {
if (darkblue_2 == 18){
x += 30
}
color = "#2d4466"
darkblue_2 -= 1
} else if (dark_green > 0) {
if (dark_green == 13){
x += 30
}
color = "#224f2a"
dark_green -= 1
} else if (yellow_2 > 0){
color = "#ffd34f"
yellow_2 -= 1
} else {
break
}
arr.push({x:x,y:y,r:r,color:color,offset:Math.floor(Math.random() * 5000)})
y += 20;
}
x += 30;
y = 80;
}
return arr
}
html_lines = {
const arr = []
for (let i = 0; i<598; i++){
arr.push("<circle cx="+(dot(i).x).toString()+" cy="+(dot(i).y).toString()+" r="+(dot(i).r).toString()+" fill="+(dot(i).color).toString()+" opacity="+opacity(i).toString()+" />")
}
return arr
}
function opacity(i) {
let offset = dot(i).offset
let val = (((time.getSeconds()%5))*1000 + time.getMilliseconds() + offset)%5000
if (val <= 2500){
return val / 2500
} else {
return 1 - ((val-2500) / 2500)
}
}
time = {
while (true) {
yield new Promise(resolve => {
setTimeout(() => resolve(new Date), 100)
})
}
}
//((time.getSeconds()%5))*1000 + time.getMilliseconds()
mfa_graph = {
const inner = html`
<svg width="1300" height="550">
${html_lines.join()}
<text x="40" y="40" fill="black" font-size="1.6em">The Top 9 Represented MFA Institutions</text>
<text x="40" y="500" fill="black" font-size="1.2em">U of Iowa</text>
<text x="430" y="500" fill="black" font-size="1.2em">Columbia</text>
<text x="705" y="500" fill="black" font-size="1.2em">JHU</text>
<text x="820" y="500" fill="black" font-size="1.2em">Brown</text>
<text x="900" y="500" fill="black" font-size="1.2em">Cornell</text>
<text x="990" y="500" fill="black" font-size="1.2em">NYU</text>
<text x="1050" y="500" fill="black" font-size="1.2em">Yale</text>
<text x="1100" y="500" fill="black" font-size="1.2em">WWC</text>
</svg>
`
return inner
}
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.
