Published
Edited
Jul 20, 2019
viewof test_sentence = text({placeholder: "je suis heureux que personne n ait ete blesse"})
chart = {
var indices = test_sentence.split(" ").map((d) => lang[d]).filter((d) => d != null),
x_seq = math.matrix(indices.map((d) => embeddings[d])),
model_data = cell_seq(f_stack, x_seq, [math.zeros(64)]),
plot_data = flatten(model_data),
plot_x = reshape_embeddings(x_seq);
var scales = generate_scales(indices);
const svg = d3.select(DOM.svg(width, height));
svg.selectAll("g")
.data(["h", "x", "z", "r", "text"]).enter()
.append("g")
.attr("id", (d) => d);
// initialize the h cells
svg.select("#h")
.selectAll("rect")
.data(plot_data["h"], (d) => d["time"] + "_" + d["coord"]).enter()
.append("rect")
.attrs({
"x": (d) => scales.hx(d.time),
"y": (d) => scales.hy(d.coord),
"fill": (d) => scales.fill(d.value),
"fill-opacity": 0.8,
"width": (scales.hx(1) - scales.hx(0)) * 1.01,
"height": (scales.hy(1) - scales.hy(0)) * 1.01
})
.on("mouseover", (d) => update_focus(svg, d, scales))
.on("mouseout", () => mouseout_fun(svg));
// initialize the z cells
svg.select("#z")
.selectAll("rect")
.data(plot_data["z"], (d) => d["time"] + "_" + d["coord"]).enter()
.append("rect")
.attrs({
"x": (d) => scales.zx(d.time),
"y": (d) => scales.zy(d.coord),
"fill": (d) => scales.sigmoid_fill(d.value),
"width": scales.zx(1) - scales.zx(0),
"height": (scales.hy(1) - scales.hy(0))
});
// initialize the r cells
svg.select("#r")
.selectAll("rect")
.data(plot_data["r"], (d) => d["time"] + "_" + d["coord"]).enter()
.append("rect")
.attrs({
"x": (d) => scales.zx(d.time),
"y": (d) => scales.ry(d.coord),
"fill": (d) => scales.sigmoid_fill(d.value),
"width": scales.zx(1) - scales.zx(0),
"height": scales.hy(1) - scales.hy(0)
});
// initialize the x cells
svg.select("#x")
.selectAll("rect")
.data(plot_x).enter()
.append("rect")
.attrs({
"x": (d) => scales.hx(d.time),
"y": (d) => scales.xy(d.coord),
"fill": (d) => scales.x_fill(d.value),
"width": scales.hx(1) - scales.hx(0),
"height": scales.xy(1) - scales.xy(0)
});
// initialize the text
svg.select("#text")
.selectAll("text")
.data(test_sentence.split(" ").filter((d) => d != null)).enter()
.append("text")
.attrs({
"x": (d, i) => scales.hx(i),
"y": .95 * height
})
.text((d) => d);
return svg.node();
}
function generate_scales(indices) {
return {
"hx": d3.scaleLinear().domain([0, indices.length]).range([width / 3, width]),
"hy": d3.scaleLinear().domain([0, 64]).range([0, .8 * height]),
"xy": d3.scaleLinear().domain([0, 16]).range([.8 * height, .9 * height]),
"zx": d3.scaleLinear().domain([0, indices.length]).range([0, width / 4]),
"zy": d3.scaleLinear().domain([0, 64]).range([0, .9 * height / 2]),
"ry": d3.scaleLinear().domain([0, 64]).range([1.1 * height / 2, height]),
"fill": d3.scaleLinear().domain([-1, 0, 1]).range(["#936c9c", "white", "#6c9c93"]),
"x_fill": d3.scaleLinear().domain([-2, 0, 2]).range(["#818181", "#c6c6c6"]),
"sigmoid_fill": d3.scaleLinear().domain([0, 1]).range(["#f7f7f7", "#2f4f4f"])
}
}
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.
