Published
Edited
Apr 19, 2022
viewof geoScatterFeatures = {
const selectedData = cn_ggz_data.filter(d => d.date == date_selected);
// Landmass for the U.S.
const landmass = vl.markGeoshape({ stroke: 'white' })
// Get the shape for the U.S. from the us-atlas npm module.
.data(vl.topojson(world).feature('countries'))
.encode(
// vl.stroke().value("#bbb"),
// vl.stroke().fill("#e5e8d3"),
vl.color().value('#e5e8d3')//.scale({
// scheme: 'spectral',
// domain: [30, 90]
//})
);
// The previous visualization
const points = vl.markCircle({ size: 50 })
.data(selectedData)
.encode(
vl.longitude().fieldQ("longitude"),
vl.latitude().fieldQ("latitude"),
vl.tooltip(["prb_id","asn_v4","country_code"])
);
// Return a combined view
return vl
.layer(landmass, points)
// .width(900).height(500)
//projection
.project(
vl
.projection("naturalEarth1")
.translate([300, 250])
.rotate(0)
.scale(150)
)
.width(width - 25)
.height(width *0.35)
.config({
view: { stroke: null }
})
// Layer the views together.
//.project(vl.projection("albersUSA"))
.render();
}
cn_ggz_data = cn_ggz_aq.objects()
//import { vl } from "@vega/vega-lite-api"
vl = {
const [vega, vegalite, api, tooltip] = await Promise.all([
`vega@${vegaVersion}`,
`vega-lite@${vlVersion}`,
`vega-lite-api@${apiVersion}`,
`vega-tooltip@${tooltipVersion}`
].map(module => require(module)));
const options = {
config: {
// vega-lite default configuration
config: {
view: {continuousWidth: 400, continuousHeight: 300},
mark: {tooltip: null}
}
},
init: view => {
// initialize tooltip handler
view.tooltip(new tooltip.Handler().call);
// enable horizontal scrolling for large plots
if (view.container()) view.container().style['overflow-x'] = 'auto';
},
view: {
// view constructor options
loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets@2/'}),
renderer: 'canvas'
}
};
return api.register(vega, vegalite, options);
}
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.
