Published
Edited
Nov 20, 2018
2 stars
photos = [
{
date: '2020-02-04',
mission: 'woz',
distance: 30
},
{
date: '2019-06-04',
mission: 'woz',
distance: 30
},
{
date: '2018-05-04',
mission: 'woz',
distance: 30
},
{
date: '2018-02-01',
mission: 'bi',
distance: 40
},
{
date: '2017-05-09',
mission: 'bi',
distance: 40
},
{
date: '2017-06-09',
mission: 'bi',
distance: 40
},
{
date: '2017-10-09',
mission: 'bi',
distance: 50
},
{
date: '2015-11-11',
mission: 'bi',
distance: 1300
},
{
date: '2014-06-08',
mission: 'bi',
distance: 14
}
]
viewof style = html`<style>
.panorama-picker text {
font-family: monospace;
}
.panorama-picker .years rect {
fill: none;
}
.panorama-picker .years text {
opacity: 0.6;
}
.panorama-picker text {
text-anchor: middle;
}
.panorama-picker text.distance {
font-size: 75%;
fill: rgba(0, 0, 0, 0.6);
}
.panorama-picker .photos line {
stroke: rgba(0, 0, 0, .5);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.panorama-picker .photos circle {
fill: white;
stroke-width: 2px;
stroke: black;
}
.panorama-picker .photos circle.mask {
fill: white;
stroke-width: 1px;
stroke: white;
}
.panorama-picker .photos circle.photo {
cursor: pointer;
}
.panorama-picker .photos .far {
transform: translateY(${farPaddingY}px);
}
.panorama-picker .photos .far .photo {
r: 5
}
.panorama-picker .photos circle.mission-bi {
fill: #1b9e77;
}
.panorama-picker .photos circle.mission-woz {
fill: #d95f02;
}
.panorama-picker .photos circle.photo:hover {
r: 8;
}
.panorama-picker .dividers line {
stroke: rgba(0, 0, 0, 0.5);
stroke-dasharray: 4 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1;
}
</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.
