Materials science // data interaction
Published
Edited
Dec 23, 2021
2 stars
VLspec = ({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"layer": [
{
"width": width,
"height": width / 1.618,
"data": {"values": [{"x": 1}]},
"layer": [
{
"mark": {"type": "rect", "opacity": toggle_rect, "color": {
"x1": 0, "x2": 0, "y1": 1, "y2": 0,
"gradient": "linear",
"stops": [
{"offset": 1.0, "color": "#1b5175"},
{"offset": 0.7, "color": "#a399b4"},
{"offset": 0.5, "color": "#efccb6"},
{"offset": 0.43, "color": "#fea063"},
{"offset": 0.4, "color": "#495d83"},
{"offset": 0.3, "color": "#495d83"},
{"offset": 0.2, "color": "#e69c5e"},
{"offset": 0, "color": "#af6c47"}
]
}}
},
{
"mark": {"type": "point", "filled": true, "size": width * 100, "opacity": 1 * toggle_point,
"color": {
"gradient": "radial",
"stops": [
{"color": "#fce27000", "offset": 0.9},
{"color": "#ffd42a55", "offset": 0.3},
{"color": "#ffffffff", "offset": 0.15}
]
}},
"encoding": {
"x": {"datum": 50},
"y": {"datum": 0.065}
}
}
]
},
{
"data": {"values": data},
"layer": [
{
"mark": {"type": "area", "color": "#495d83", "opacity": 0.8 * toggle_area, "interpolate": "monotone"},
"encoding": {
"y2": {"datum": 0.06}
}
},
{
"mark": {"type": "line", "color": "white", "opacity": 0.5 * toggle_line, "strokeWidth": 4, "interpolate": "monotone", "clip": true}
}
],
"encoding": {
"x": {"field": "i", "type": "quantitative", "axis": {"domain": false, "ticks": false, "labels": false, "title": null}, "scale": {"domain": [0,100]}},
"y": {"field": "pos", "type": "quantitative", "scale": {"domain": [-0.025, 0.175], "nice": false}, "axis": {"domain": false, "ticks": false, "labels": false, "title": null}}
}
}
]
})
data = Array.from(Array(101).keys()).map(x => ({i: x, pos: recede() + wave(x) + undulation(x) + froth(x)}))
function recede() {
return Math.sin(now/1500)/100
}
function wave(x) {
return Math.sin(2*Math.PI/300*x - now/900)/200
}
function undulation(x) {
return Math.sin(2*Math.PI/40*x - now/250)/2000
}
function froth(x) {
return (Math.sin(2*Math.PI*x - now/10000) + Math.random()) / 1500
}
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.
