Visualization, Prototypes, ML, Data wrangling and Art.
margin = ({top: 20, right: 20, bottom: 20, left: 20})
height = Math.ceil(width * screen.height / screen.width)
x = d3.scaleLinear()
.domain(d3.extent(umap, d => d.x)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(umap, d => d.y)).nice()
.range([height - margin.bottom, margin.top])
umapProjection = umap.map((d,i) => ({
id: d.id,
x: x(d.x),
y: y(d.y),
scale,
alpha: 1,
zIndex: 0,
visible: true
}))
project(umapProjection)
zoomBarrier = 9
snappyDistance = 5
scoreCutoff = 0.3
mutable state = 1
function getListProjection(similarsMap, similars){
const space = 20
const paddingTop = 100
let projection = umapProjection.map(d => {
const similar = similarsMap.get(d.id)
const visible = similar.score > scoreCutoff
let x = d.x
let y = d.y
let scale = d.scale
let alpha = 0
if(visible) {
x = width / 2
y = paddingTop + similar.rank * (textureRes + space)
scale = 1
alpha = 1
//console.log(similar)
}
return { ...d, scale, visible, x, y, alpha }
})
return projection
}
transitionIntoList = {
let canvas
let lastProjection
return async function(selected,similarsMap, similars, _lastProjection, that){
lastProjection = _lastProjection
if(!canvas) canvas = d3.select(that)
console.log("here we go", selected,similarsMap, lastProjection, that)
canvas.on("click", function() {
console.log("click back")
that.reset(2000)
.on("end", () => {
})
d3.selection()
.interrupt()
.transition()
.duration(2000)
//.ease(d3.easePolyInOut)
.tween("list", function() {
const newProjection = umapProjection
const interpolate = d3.interpolate(lastProjection, newProjection)
return function(t) {
lastProjection = interpolate(t)
project(lastProjection)
};
})
.on("end", () => {
mutable state = 1
})
return
})
// setTimout hack
setTimeout(() => {
that.reset(2000)
.on("end", () => {
d3.selection()
.interrupt()
.transition()
.duration(2000)
//.ease(d3.easePolyInOut)
.tween("list", function() {
const newProjection = getListProjection(similarsMap, similars)
const interpolate = d3.interpolate(lastProjection, newProjection)
return function(t) {
lastProjection = interpolate(t)
project(lastProjection)
};
})
})
}, 50)
}
}
transition = {
let lastSelected
let lastProjection = umapProjection
let timer
let similarsMap
let canvas
let animationFinished = false
let similars
//
return async function(selected, distance, that){
if(distance >= snappyDistance) selected = null
if(lastSelected === selected) return
if(!canvas) canvas = d3.select(that)
canvas.style("cursor", distance >= snappyDistance ? "default" : "pointer")
const alted = d3.event.altKey
canvas.on("click", () => {
console.log("click", selected)
if(selected){
const transform = d3.zoomTransform(that)
if(transform.k >= zoomBarrier){
console.log("animate!")
if(animationFinished) {
lastProjection = umapProjection
d3.selection()
.interrupt()
transitionIntoList(selected,similarsMap,similars, lastProjection, that)
mutable state = 2
}
} else {
canvas
.transition()
.duration(1000)
.call(zoom.scaleTo, zoomBarrier, transform.apply([selected.x, selected.y]))
}
} else {
canvas
.transition()
.duration(200)
.call(
zoom.transform,
d3.zoomIdentity
.translate(0,0)
.scale(1)
);
}
})
animationFinished = false
// create similar map
if(selected){
similars = await getImageDistancesForId(selected.id)
//console.log(similars)
similarsMap = new Map(similars.map(d => [d.id, d]))
}
if(selected && alted) {
lastProjection = umapProjection.map(d => {
const similar = similarsMap.get(d.id)
const alpha = similar.score > scoreCutoff ? 1 : 0.1
const active = selected.id == d.id
return { ...d, scale: active ? scale * 2 : scale, zIndex: active ? 1 : 0, alpha }
})
project(lastProjection)
return
}
const transform = d3.zoomTransform(that)
if(transform.k !== zoomBarrier){
return
}
d3.selection()
.interrupt()
.transition()
.duration(200)
//.ease(d3.easePolyInOut)
.tween("close", function() {
const newProjection = umapProjection.map(d => {
const active = selected ? selected.id == d.id : false
return { ...d, scale: active ? scale * 1.2 : d.scale }
})
const interpolate = d3.interpolate(lastProjection, newProjection)
return function(t) {
lastProjection = interpolate(t)
project(lastProjection)
};
})
.filter(() => distance < snappyDistance)
.transition()
//.delay(30)
.delay(100)
.duration(700)
.ease(d3.easeExpIn)
.tween("open", function() {
const newProjection = lastProjection.map(d => {
const active = selected.id == d.id
return { ...d, scale: active ? scale * 2 : scale, zIndex: active ? 1 : 0 }
})
const interpolate = d3.interpolate(lastProjection, newProjection)
return function(t) {
lastProjection = interpolate(t)
project(lastProjection)
};
})
.transition()
.duration(0)
.tween("appear", function() {
const newProjection = lastProjection.map(d => {
const similar = similarsMap.get(d.id)
const alpha = similar.score > scoreCutoff ? 1 : 0.1
return { ...d, alpha }
})
const interpolate = d3.interpolate(lastProjection, newProjection)
return function(t) {
lastProjection = interpolate(t)
project(lastProjection)
};
})
.on("end", () => { animationFinished = true })
renderer.render(container)
lastSelected = selected
}
//asdasasd
}
function mousemove() {
const m = d3.mouse(this)
const p = d3.zoomTransform(this).invert(m)
const q = quadtree.find(p[0], p[1])
const distance = Math.hypot(p[0] - q.x, p[1] - q.y)
if(state === 1) transition(q, distance, this)
else if (state === 2) {
console.log("mouse2")
}
//as dasdasdasdasddsf
}
function wheeled() {
d3.event.preventDefault();
if(state === 1) return
const delta = d3.event.deltaY * (d3.event.deltaMode === 1 ? 0.05 : d3.event.deltaMode ? 1 : 0.002);
zoom.translateBy(d3.select(this), 0, -delta*230)
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import { renderer, container, PIXI } from "@cpietsch/pixi-renderer"
import { getTextureStream, sprites } with {loadDelay as delay } from "68b54e3f54ebd551"
import {getDistancesForId as getImageDistancesForId, umapUrl} from "09aee975378da6d9"
d3 = require("d3@5")
loadDelay = 0
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.