parsedData = await d3.csvParse(data).slice(0, 20000)
table(parsedData)
vl
.markLine({ interpolate: "monotone" })
.title('UFO Sightings')
.height(500)
.width(750)
.params({ interpolate: 'monotone' })
.data(parsedData)
.transform(vl.filter({ field: "shape", equal: shape }))
// .data(parsedData.filter(row => (shape == "all" ? row : row.shape == shape)))
//
// .data(
// parsedData.filter(function(row) {
// if (shape == "all") {
// return row;
// } else {
// if (row.shape == shape) {
// return row;
// }
// }
// })
.encode(
vl
.x()
.fieldT("date")
.timeUnit("day"),
vl.y().aggregate("count"),
vl.color().fieldN("country")
)
.render()
md`### Current Scale Factor: ___${scale}___`
viewof scale = html`<input type=range min=100 max=500 step=50>`
vl
.layer(
vl
.markGeoshape()
.data(
vl
.topojson("https://unpkg.com/world-atlas@2/countries-110m.json")
.feature("countries")
)
.encode(
vl.stroke().value("#fff"),
vl.color().value("#000"),
vl.fill().value("#dfd")
),
vl
.markCircle()
.data(parsedData)
.encode(
vl.longitude().fieldQ("longitude"),
vl.latitude().fieldQ("latitude"),
vl.color().fieldN("country")
)
)
.project(
vl
.projection()
.type("orthographic")
.scale(scale)
.rotate([-45, -45, 0])
)
.width(750)
.height(750)
.render()
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.
