Published
Edited
May 6, 2019
{
//sets mark color
const mark_color = "#33ff33"
//creates interval brush
const brush = vl.selectInterval().encodings('x').resolve('intersect');
//creates histogram of object category
const object_hist = vl.markBar()
.encode(vl.x().fieldN('object_category').title('Object Category').axis({"labelAngle": 300}),
vl.y({"scale": {"domain": [1,10000], "type": "log"}}).count())
.width(300).height(180).title('Object Histogram');
//creates histogram of
const time_hist = vl.markBar()
.encode(vl.x().fieldT('date_full').timeUnit('yearmonthdate').title('Date'),
vl.y().count())
.width(412).height(170).title('Timeline (brush to select a date range!)');
//creates map layer
const maplayer1= vl.markCircle()
.data(lucca)
.encode(
vl.latitude().fieldQ('lat'),
vl.longitude().fieldQ('lon'),
//vl.color().fieldN('object_category'),
vl.size({'legend':{'values':[20,40,60,80,100,120,140]}}).count(),
//tooltip for hovering over data points
vl.tooltip(['new_owner']),
vl.color().value('lightgrey')
// vl.legend({'values':[5,10,15]})
).title("Map of Lucca (zoom with the 'scale' slider; pan with the 'x' and 'y' sliders; hover for town name)")
const maplayer2= vl.markCircle()
.data(lucca)
.transform(vl.filter(brush))
.encode(
vl.latitude().fieldQ('lat'),
vl.longitude().fieldQ('lon'),
//vl.color().fieldN('object_category'),
vl.size({'legend':{'values':[5,10,15,20,25,30,35,40]}}).count(),
//tooltip for hovering over data points
vl.tooltip(['town']),
vl.color().value('green')
// vl.legend({'values':[5,10,15]})
)
const mapdata = vl.layer(
//add the italy map
vl.markGeoshape({fill: '#e6f3ff'})
.data(vl.sphere()),
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.75})
.data(vl.topojson(italy).feature('custom')),
// vl.markGeoshape({fill: '#2a1d0c', stroke: '#e6f3ff', strokeWidth: 0.75})
// .data(vl.topojson(landrivers).feature('ne_10m_rivers_europe')),
// add lucca data as dots on top of map
maplayer1,maplayer2
)
.width(600).height(350)
.config({view: {stroke: null}}).project(projection)
//zoomed-out version of map for reference
const zoomedout =
vl.layer(
vl.markGeoshape({fill: '#e6f3ff'}) //blue water
.data(vl.sphere()),
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545'}) //italy
.data(vl.topojson(italy).feature('custom')),
vl.markCircle()
.data(lucca).encode(
vl.latitude().fieldQ('lat'),
vl.longitude().fieldQ('lon'),
vl.color({"value": mark_color})
)
).width(190).project(thumbnail_projection).title("Static Map of Italy")
return vl.data(lucca)
.vconcat(vl.hconcat(mapdata, zoomedout),
vl.hconcat(time_hist.select(brush),
vl.layer(object_hist.encode(vl.color().value('lightgrey')),
object_hist.transform(vl.filter(brush))
)
)
)
.render(); //43.88762 10.44889
}
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.
