Published
Edited
Jan 19, 2020
{
let shownData = beacons;
function update(el, data) {
let u = el.selectAll('div.beacon')
.data(data);
let en = u.enter()
.append('div')
.merge(u)
.classed('beacon', true)
.classed('clicked', d => !!d.clicked);
en.append('img')
.attr('src', d => `https://maps.googleapis.com/maps/api/staticmap?center=${d.Latitude},${d.Longitude}&size=300x300&zoom=20&key=AIzaSyC1KYZaGGjGdV12iWOhjq5NnydTyNuNUZw&maptype=satellite`)
.on('click', (e, idx, els) => {
shownData[idx].clicked = !shownData[idx].clicked;
update(el, shownData);
});
en.append('a')
.text(d => `${d.Designation}, ${d.State}`)
.attr('href', d => `https://www.google.com/maps/@?api=1&map_action=map¢er=${d.Latitude},${d.Longitude}&basemap=satellite&zoom=20`);
en.append('span')
.text(d => `Arrow: ${d['Arrow?']}`);
u.exit().remove();
}
let out = html`<div class="container">`;
let el = d3.select(out);
update(el, shownData);
return out;
}
html`<style>
.container {display: flex; flex-direction: row; flex-wrap: wrap;}
.beacon {width: 300px; margin: 10px; display: flex; flex-direction: column;}
.clicked {border: 2px solid viridian;}
</style>`
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.
