Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
Dec 13, 2021
drawMap(vl.selectPoint()).render()
drawMap(vl.selectInterval()).render()
function drawMap(selection) {
// base map of New Zeland
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo).feature('nzl_subunits'))
const circles = vl.markCircle({
stroke: '#555555',
strokeWidth: 1,
strokeOpacity: 0.7
})
.data(earthquakes)
.params(selection)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size()
.fieldQ('magnitude')
.scale({type: 'pow', range: [0, 700]}).legend({title: 'Magnitude'}),
vl.color().if(selection, vl.value('#54E1AE')).value('grey'),
vl.opacity().if(selection, vl.value(0.6)).value(0.1)
)
const circles_filter = vl.markCircle({
fillOpacity: 0.3,
color: '#54E1AE',
stroke: '#008246',
strokeWidth: 1,
strokeOpacity: 0.7
})
.data(earthquakes)
.transform(
vl.filter(selection)
)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size()
.fieldQ('magnitude')
.scale({type: 'pow', range: [0, 700]}).legend({title: 'Magnitude'})
)
return vl.layer(map, circles)
.project(
vl.projection('transverseMercator').rotate([188, 40.5]).translate(width*0.16, 250).scale(1300)
)
.width(width*0.45)
.height(500)
}
topo = FileAttachment("nz-topo.json").json()
earthquakes = FileAttachment("earthquakes.csv").csv({typed: true})
import {vl} from '@vega/vega-lite-api-v5'
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.
