pixel flipper, data sifter. trying to see what I can while I'm here
you
users
md`### TODO:
* Consider saving last interaction time so we can fade out users
* Tried updating mouse position but it was too spammy, need to debounce the mousemove handler probably
* Figure out a way to "transition" circles when people move them. Perhaps clicking slowly moves the circle towards its destination in a way that everyone sees?
* otherwise we can just transition when we receive a click, but might get weird transition update problems if anyone else moves their piece. We'd probably need to use named transitions with d3 instead of vue rendering
`
PeopleViewer = {
return {
template: `
<div>
<svg ref="svg" :width="width" :height="height" style="border: 1px solid black">
<circle
v-for="user in users"
:key="'user-' + user.id"
:fill="user.color"
:cx="user.position[0]"
:cy="user.position[1]"
r="10" />
<circle
:cx="mouseX"
:cy="mouseY"
r="12"
fill="none"
stroke-width="1"
stroke="black"
stroke-opacity="0.1"
/>
</svg>
</div>`,
props: {
users: Array,
user: Object
},
data : function () {
return {
width: width,
height: 600,
mouseX: 0,
mouseY: 0
}
},
mounted: function () {
let svg = d3.select(this.$refs.svg)
.on('mousemove', () => {
if(!this.user) return;
this.mouseX = d3.event.x - svg.node().getBoundingClientRect().x
this.mouseY = d3.event.y - svg.node().getBoundingClientRect().y
this.user.mouse = [
this.mouseX,
this.mouseY
]
// db.collection('users')
// .doc(this.user.id)
// .set(this.user)
// .then(() => {
// // console.log('user updated!')
// })
})
.on('mousedown', () => {
if(!this.user) return;
this.user.position = [
d3.event.x - svg.node().getBoundingClientRect().x,
d3.event.y - svg.node().getBoundingClientRect().y
]
db.collection('users')
.doc(this.user.id)
.set(this.user)
.then(() => {
// console.log('user updated!')
})
})
},
methods: {
}
}
}
// viewof vm = mount(PositionSelector, {user: you})
fbapp.auth()
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.
