Visualization, Prototypes, ML, Data wrangling and Art.
canvas = {
var elem = d3.create("div")
elem.call(zoom)
elem
.on("click", reset)
.on("mousemove", mousemove)
elem.append(() => renderer.view)
sprites;
renderer.resize(width,height);
container.sortableChildren = true
renderer.render(container)
return elem.node()
}
url = "https://vikusviewer.fh-potsdam.de/smb/beide/data/beide-similarity-image-norm-bit-space.csv"
umap = d3.csv(url, ({id,x,y}) => ({id, x: +x, y: +y}))
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])
projection = umap.map(d => ({
id: d.id,
x: x(d.x),
y: y(d.y),
scale
}))
zoom = d3.zoom()
.scaleExtent([1, 50])
.translateExtent([[0,0],[width,height]])
.clickDistance(2)
.on("zoom", zoomed);
resetProjection = () => {
projection.forEach((d,i) => {
const s = sprites.get(d.id)
s.position.x = d.x
s.position.y = d.y
s.alpha = 1
s.scale.set(scale)
})
renderer.render(container)
}
project = {
let lastSelected
return async function(selected, distance){
if(distance > 4) { lastSelected = null; resetProjection(); return }
if(lastSelected == selected) return
const similars = (await getImageDistancesForId(selected.id)).slice(0,topNum)
projection.forEach((d,i) => {
const s = sprites.get(d.id)
s.zIndex = 0
s.position.x = d.x
s.position.y = d.y
s.alpha = 0.2
s.scale.set(scale)
})
similars.forEach((d,i) => {
const s = sprites.get(d.id)
const active = selected.id == d.id
s.zIndex = active ? 2 : 1
s.scale.set(active ? scale * 3 : scale * 1.7)
s.alpha = 1
})
renderer.render(container)
lastSelected = selected
}
}
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)
project(q, distance)
}
import { renderer, container, PIXI } from "@cpietsch/pixi-renderer"
import { getTextureStream, sprites } with {loadDelay as delay } from "68b54e3f54ebd551"
import {getDistancesForId as getImageDistancesForId} from "@cpietsch/distance-between-logit-vectors-to-show-related-images"
d3 = require("d3@5")
loadDelay = 0
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.
