Public
Edited
Aug 27, 2022
d3
.select(matrix)
.append("div")
.style("width", "100%")
.style("height", "100%")
.style("padding", "10px")
.style("position", "absolute")
.style("top", "0")
.style("0", "0")
.style("align", "center")
// .style("background", "aliceblue")
.append((a) => {
return d3.select("#sig").clone().node();
})
.style("width", "100%")
.style("height", "100%")
.call(() => {
d3.select("#sig")
.selectAll("path")
.transition()
.delay((d, i, nl) => {
let o = Array.from(nl);
let val = o
.slice(0, i)
.reduce((prev, cur) => prev + cur.getTotalLength(), 0);
return val * 2 + 10 * (i - 1);
})
.duration((d, i, o) => o[i].getTotalLength() * 10)
.attr("stroke-dashoffset", 0)
.end()
.then((d, i, o) => {
console.log("Transition Over");
});
})
// d3
// .select(matrix)
// .append("div")
// .style("width", "100%")
// .style("height", "100%")
// .style("padding", "10px")
// .style("position", "absolute")
// .style("top", "0")
// .style("0", "0")
// .style("align", "center")
// // .style("background", "aliceblue")
// .append((a) => {
// let node = sketch();
// node.update(ab[2]);
// return node;
// })
// .style("width", "100%")
// .style("height", "100%")
load_things().then(() => {
matrix.update(make_matrix.call());
})
transition_t = 4
transition_d = 100
make_matrix = function () {
const x_count = Math.floor(width / one_sketch.clientWidth);
let arr = Array();
for (let i = 0; i < 20; i++) {
console.log(i);
arr.push(
Array.from(
{ length: x_count },
() => all_things[d3.randomInt(0, all_things.length)()]
)
);
}
return arr;
}
all_things[10]
d3.randomInt(0, all_things.length)()
// std.update([])
ab = fetchBinaryDrawings(download_url("envelope", 0))
one_sketch.update(randomData)
one_sketch = sketch()
sketch = function () {
var line = d3.line();
let range = 256;
let dim = 25;
let border = { top: 20, bottom: 20, left: 20, right: 20 };
const svg = d3
.create("svg")
.attr("width", dim)
.attr("height", dim)
.attr(
"viewBox",
"0 0 " +
(range + border.left + border.right) +
" " +
(range + border.top + border.bottom)
)
.on("mouseover", (d, i, o) => {
const transition_t_w = 2;
const transition_d_w = 10;
svg
.selectAll("path")
.attr("stroke-dasharray", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len + " " + path_len;
})
.attr("stroke-dashoffset", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len;
})
.call((paths) =>
paths
.transition()
.delay((d, i, nl) => {
let o = Array.from(nl);
let val = o
.slice(0, i)
.reduce((prev, cur) => prev + cur.getTotalLength(), 0);
return val * transition_t_w + transition_d_w * (i - 1);
})
.duration((d, i, o) => o[i].getTotalLength() * transition_t_w)
.attr("stroke-dashoffset", 0)
.end()
.then((d, i, o) => {
console.log("Transition Over");
})
);
});
let paths = svg.selectAll("path");
return Object.assign(svg.node(), {
update(data) {
paths = paths
.data(data.drawing, (d) => d.key_id)
.join(
(enter) =>
enter
.append("path")
.attr("transform", `translate(${border.left} ${border.top})`)
.attr("d", (d, i) => line(d[0].map((_, i) => [d[0][i], d[1][i]])))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "10px")
.attr("stroke-dasharray", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len + " " + path_len;
})
.attr("stroke-dashoffset", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len;
}),
(update) =>
update
.attr("d", (d, i) => line(d[0].map((_, i) => [d[0][i], d[1][i]])))
.attr("stroke-dasharray", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len + " " + path_len;
})
.attr("stroke-dashoffset", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len;
}),
(exit) => exit.remove()
)
.call((paths) =>
paths
.transition()
.delay((d, i, o) => {
let val = o
.slice(0, i)
.reduce((prev, cur) => prev + cur.getTotalLength(), 0);
return val * transition_t + transition_d * (i - 1);
})
.duration((d, i, o) => o[i].getTotalLength() * transition_t)
.attr("stroke-dashoffset", 0)
.end()
.then((d, i, o) => {
console.log("Transition Over");
})
);
}
});
}
parseInt(34.5)
four_digit_num = function (n) {
parseInt(n);
console.assert(n <= 9999, "Number too big.");
let s = n.toString();
return s.padStart(4, "0");
}
four_digit_num(1)
classes = {
const classes = `steak
cow
cactus
hamburger
airplane
bowtie
boomerang
kangaroo
duck
picture frame
book
piano
cake
envelope
pickup truck
postcard
campfire
soccer ball
sailboat
house plant
pizza
teapot
teddy-bear
bicycle
harp
wine glass
wine bottle
book
bread
carrot
cell phone
coffee cup
computer
diamond
dumbbell
fish
hot tub
house
laptop
sun
tiger
tractor`;
return classes.split("\n");
}
all_things = []
all_things
load_things = async function () {
let all_promises = [];
for (let cl of classes) {
all_promises.push(
fetchBinaryDrawings(download_url(cl, 0)).then((x) => {
all_things.push(...x);
})
);
}
return Promise.all(all_promises);
}
{
const transition_t_w = 2;
const transition_d_w = 10;
d3.select("#sig")
.selectAll("path")
.attr("stroke", "black")
.attr("stroke-dasharray", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len + " " + path_len;
})
.attr("stroke-dashoffset", (d, i, o) => {
let path_len = o[i].getTotalLength();
return path_len;
})
.call((paths) =>
paths
.transition()
.delay((d, i, nl) => {
let o = Array.from(nl);
let val = o
.slice(0, i)
.reduce((prev, cur) => prev + cur.getTotalLength(), 0);
return val * transition_t_w + transition_d_w * (i - 1);
})
.duration((d, i, o) => o[i].getTotalLength() * transition_t_w)
.attr("stroke-dashoffset", 0)
.end()
.then((d, i, o) => {
console.log("Transition Over");
})
);
}
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.
