Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
Feb 3, 2022
2 forks
2 stars
data = [{x: 50, y: 50}, {x: 90, y: 100}, {x: 60, y: 20}, {x: 80, y: 180} ]
{
const image = FileAttachment("Middle-earth.jpeg").image()
const plot1 = vl.markImage()
.data({
"values": [
{"x": 100, "y": 200, "img": await(FileAttachment("Middle-earth.jpeg").url())},
]
})
.encode(
vl.x().fieldQ('x'),
vl.y().fieldQ('y'),
vl.url().fieldN('img')
)
const circles = vl.markCircle({
stroke: '#555555',
strokeWidth: 1,
strokeOpacity: 0.7,
color: "#54E1AE",
size: 80
})
.data(data)
.encode(
vl.x().fieldQ('x'),
vl.y().fieldQ('y')
)
const layer = vl.layer( plot1, circles)
return layer.render()
}
import {vl} from '@vega/vega-lite-api-v5'
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
