Published
Edited
May 20, 2021
1 fork
1 star
viewof distCharts = {
const distBrush = vl.selectInterval().encodings("x");
// hover
const hover = vl.selectSingle("hover")
.on("mouseover")
.encodings("x")
.nearest(true)
.clear("moouseout")
.init({ x: { distance: 5 } });
// rule and ecdf
const cdf_filter = vl.layer(
vl.markLine({clip: true}),
vl.markPoint()
.transform(vl.filter(hover))
)
const rule = vl.markRule({ strokeWidth: 0.5, tooltip: true })
.transform(vl.value("pop_perc_cum"))
.encode(
vl.opacity().value(0).if(hover, vl.value(0.7)),
vl.tooltip([
{"field": "pop_perc_cum", "type": "quantitative", "format": ".2f", "title": "% Residents"},
{"field": "distance", "type": "quantitative", "format": ".2f", "title": "Distance (km)"},
// {"field": "pop_perc_cum", "type": "quantitative", "format": ".2f"}
])
// vl.text({"type": "quantitative", "format": ".2f","field": "pop_perc_cum",})
)
.select(hover);
const cdf_hover = vl.layer(cdf_filter, rule)
.data(histogram_data_filtered)
.encode(
vl.x().fieldQ('distance'),
vl.y().fieldQ('pop_perc_cum'),
)
// Create the figures
const hist = vl.markBar({width:19})
.data(histogram_data_filtered)
.encode(
vl.x().fieldQ('distance'),
vl.y().fieldQ('pop_perc')
)
.width(400)
.height(180);
const cdf_base = vl.markLine({color: "grey", size: 1, strokeDash: [5,5], interpolate: "natural"})
.data(histogram_data_base)
.select(distBrush)
.encode(
vl.x().fieldQ('distance'),
vl.y().fieldQ('pop_perc_cum')
)
const distribution = vl.layer(cdf_hover, hist,cdf_base)
.view({stroke:0})
.encode(
vl.x().title(`Distance to ${amenity} (km)`).axis({grid:false}).scale({domain:[0,20]}),
vl.y().scale({domain:[0,100]}).title(`% Residents`).axis({grid:false})
)
// recovery curve
const recovery_base = vl.markLine({color: "grey", size: 1, strokeDash: [5,5], interpolate: "step-before"})
.data(recovery_filtered)
.encode(
vl.x().fieldT('time_stamp'),
vl.y().fieldQ('average')
)
.width(400)
.height(180);
const recovery_now = vl.markLine({size: 3, interpolate: "step-before"})
.data(recovery_filtered_day)
.encode(
vl.x().fieldT('time_stamp'),
vl.y().fieldQ('average')
)
const recovery = vl.layer(recovery_now, recovery_base)
.view({stroke:0})
.encode(
vl.x().title(`September 2018`).axis({grid:false}),
vl.y().title(`Average distance (km)`).axis({grid:false}).sort("descending")
)
// const temp = base.encode(vl.y().average('temp_max'));
// const precip = base.encode(vl.y().average('precipitation'));
// const wind = base.encode(vl.y().average('wind'));
return vl.hconcat(distribution, recovery).render();
}
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.
average_distance = {
const dist = histogram_data_filtered.map(a=>a.distance);
const pop = histogram_data_filtered.map(a=>a.pop_perc);
return parseFloat(dist.reduce(function(r,a,i){return r+a*pop[i]},0)/100).toFixed(1)
}
// average_distance = 0
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
// map updating
// this one flashes https://observablehq.com/@sfu-iat355/advanced-interaction-with-multiple-views/2?collection=@sfu-iat355/tutorial-solution-sets
// no flashing https://bl.ocks.org/gwene/f3929040cca81742c29af297efeda7ab
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.
