Published
Edited
Mar 13, 2021
1 fork
1 star
chart = {
const max_x = d3.max(wafer_data, ({x}) => x);
const max_y = d3.max(wafer_data, ({y}) => y);
const min_x = d3.min(wafer_data, ({x}) => x);
const min_y = d3.min(wafer_data, ({y}) => y);
const radius = max_x + 2;
const width = 4 * max_x + 1;
const height = 4 * max_y + 1;
const svg = d3.create("svg")
.attr("viewBox", [2 * min_x, 2 * min_y, width, height]);
const c1 = svg.append("circle")
.style("fill", "gray")
.style("stroke", "black")
.style("stroke-width", 0.025)
.attr("r", radius + 0.2)
.attr("cx", 0.5)
.attr("cy", 0.5);
const c2 = svg.append("circle")
.style("fill", "gray")
.style("stroke", "black")
.style("stroke-width", 0.025)
.attr("r", radius)
.attr("cx", 0.5)
.attr("cy", 0.5);
const g = svg.append("g").selectAll("rect")
.data(wafer_data)
.join("rect")
.attr("x", ({x}) => x)
.attr("y", ({y}) => y)
.attr("width", 0.975)
.attr("height", 0.975)
.attr("fill", ({color}) => color)
.attr("stroke", "black")
.attr("stroke-width", 0.025)
svg.selectAll("rect")
.data(wafer_data)
.append("svg:title")
.text(({mouseover}) => mouseover);
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 8])
.on("zoom", zoomed));
function zoomed({transform}) {
g.attr("transform", transform);
c1.attr("transform", transform);
c2.attr("transform", transform);
}
return svg.node();
}
wafer_data = [
{x: -9, y: -4, color: 'green', mouseover: 'Z'},
{x: -9, y: -3, color: 'green', mouseover: 'Y'},
{x: -9, y: -2, color: 'green', mouseover: 'Y'},
{x: -9, y: -1, color: 'green', mouseover: 'Z'},
{x: -9, y: 0, color: 'green', mouseover: 'X'},
{x: -9, y: 1, color: 'green', mouseover: 'Z'},
{x: -9, y: 2, color: 'green', mouseover: 'X'},
{x: -9, y: 3, color: 'green', mouseover: 'Y'},
{x: -9, y: 4, color: 'orange', mouseover: 'Y'},
{x: -8, y: -5, color: 'green', mouseover: 'Y'},
{x: -8, y: -4, color: 'green', mouseover: 'X'},
{x: -8, y: -3, color: 'green', mouseover: 'X'},
{x: -8, y: -2, color: 'green', mouseover: 'X'},
{x: -8, y: -1, color: 'green', mouseover: 'Z'},
{x: -8, y: 0, color: 'green', mouseover: 'Z'},
{x: -8, y: 1, color: 'green', mouseover: 'X'},
{x: -8, y: 2, color: 'orange', mouseover: 'X'},
{x: -8, y: 3, color: 'green', mouseover: 'Y'},
{x: -8, y: 4, color: 'orange', mouseover: 'X'},
{x: -8, y: 5, color: 'green', mouseover: 'Y'},
{x: -7, y: -7, color: 'green', mouseover: 'Y'},
{x: -7, y: -6, color: 'green', mouseover: 'Y'},
{x: -7, y: -5, color: 'green', mouseover: 'X'},
{x: -7, y: -4, color: 'green', mouseover: 'X'},
{x: -7, y: -3, color: 'green', mouseover: 'Y'},
{x: -7, y: -2, color: 'orange', mouseover: 'Y'},
{x: -7, y: -1, color: 'red', mouseover: 'Z'},
{x: -7, y: 0, color: 'green', mouseover: 'Z'},
{x: -7, y: 1, color: 'red', mouseover: 'Z'},
{x: -7, y: 2, color: 'orange', mouseover: 'Z'},
{x: -7, y: 3, color: 'green', mouseover: 'Y'},
{x: -7, y: 4, color: 'green', mouseover: 'X'},
{x: -7, y: 5, color: 'green', mouseover: 'X'},
{x: -7, y: 6, color: 'green', mouseover: 'Y'},
{x: -7, y: 7, color: 'orange', mouseover: 'X'},
{x: -6, y: -7, color: 'green', mouseover: 'X'},
{x: -6, y: -6, color: 'red', mouseover: 'Z'},
{x: -6, y: -5, color: 'green', mouseover: 'Y'},
{x: -6, y: -4, color: 'red', mouseover: 'X'},
{x: -6, y: -3, color: 'red', mouseover: 'Z'},
{x: -6, y: -2, color: 'green', mouseover: 'Z'},
{x: -6, y: -1, color: 'green', mouseover: 'X'},
{x: -6, y: 0, color: 'green', mouseover: 'Y'},
{x: -6, y: 1, color: 'orange', mouseover: 'X'},
{x: -6, y: 2, color: 'green', mouseover: 'Y'},
{x: -6, y: 3, color: 'green', mouseover: 'Z'},
{x: -6, y: 4, color: 'green', mouseover: 'Y'},
{x: -6, y: 5, color: 'green', mouseover: 'Y'},
{x: -6, y: 6, color: 'green', mouseover: 'Z'},
{x: -6, y: 7, color: 'green', mouseover: 'X'},
{x: -5, y: -8, color: 'red', mouseover: 'Y'},
{x: -5, y: -7, color: 'green', mouseover: 'X'},
{x: -5, y: -6, color: 'green', mouseover: 'Z'},
{x: -5, y: -5, color: 'green', mouseover: 'Z'},
{x: -5, y: -4, color: 'orange', mouseover: 'X'},
{x: -5, y: -3, color: 'green', mouseover: 'Y'},
{x: -5, y: -2, color: 'green', mouseover: 'Y'},
{x: -5, y: -1, color: 'red', mouseover: 'X'},
{x: -5, y: 0, color: 'green', mouseover: 'Y'},
{x: -5, y: 1, color: 'green', mouseover: 'X'},
{x: -5, y: 2, color: 'orange', mouseover: 'X'},
{x: -5, y: 3, color: 'red', mouseover: 'X'},
{x: -5, y: 4, color: 'green', mouseover: 'X'},
{x: -5, y: 5, color: 'green', mouseover: 'Y'},
{x: -5, y: 6, color: 'green', mouseover: 'Y'},
{x: -5, y: 7, color: 'green', mouseover: 'Z'},
{x: -5, y: 8, color: 'green', mouseover: 'X'},
{x: -4, y: -9, color: 'green', mouseover: 'Z'},
{x: -4, y: -8, color: 'green', mouseover: 'Y'},
{x: -4, y: -7, color: 'green', mouseover: 'Y'},
{x: -4, y: -6, color: 'green', mouseover: 'Z'},
{x: -4, y: -5, color: 'orange', mouseover: 'Y'},
{x: -4, y: -4, color: 'orange', mouseover: 'Z'},
{x: -4, y: -3, color: 'green', mouseover: 'Y'},
{x: -4, y: -2, color: 'orange', mouseover: 'Z'},
{x: -4, y: -1, color: 'green', mouseover: 'Z'},
{x: -4, y: 0, color: 'green', mouseover: 'Y'},
{x: -4, y: 1, color: 'green', mouseover: 'Z'},
{x: -4, y: 2, color: 'green', mouseover: 'Y'},
{x: -4, y: 3, color: 'green', mouseover: 'Z'},
{x: -4, y: 4, color: 'green', mouseover: 'Y'},
{x: -4, y: 5, color: 'green', mouseover: 'Y'},
{x: -4, y: 6, color: 'red', mouseover: 'Y'},
{x: -4, y: 7, color: 'green', mouseover: 'Y'},
{x: -4, y: 8, color: 'green', mouseover: 'X'},
{x: -4, y: 9, color: 'orange', mouseover: 'Y'},
{x: -3, y: -9, color: 'green', mouseover: 'Z'},
{x: -3, y: -8, color: 'green', mouseover: 'Z'},
{x: -3, y: -7, color: 'green', mouseover: 'Z'},
{x: -3, y: -6, color: 'green', mouseover: 'Z'},
{x: -3, y: -5, color: 'green', mouseover: 'X'},
{x: -3, y: -4, color: 'green', mouseover: 'X'},
{x: -3, y: -3, color: 'green', mouseover: 'Y'},
{x: -3, y: -2, color: 'green', mouseover: 'X'},
{x: -3, y: -1, color: 'green', mouseover: 'Z'},
{x: -3, y: 0, color: 'green', mouseover: 'Z'},
{x: -3, y: 1, color: 'green', mouseover: 'Z'},
{x: -3, y: 2, color: 'red', mouseover: 'Z'},
{x: -3, y: 3, color: 'green', mouseover: 'Y'},
{x: -3, y: 4, color: 'green', mouseover: 'Z'},
{x: -3, y: 5, color: 'green', mouseover: 'Y'},
{x: -3, y: 6, color: 'green', mouseover: 'X'},
{x: -3, y: 7, color: 'green', mouseover: 'X'},
{x: -3, y: 8, color: 'orange', mouseover: 'X'},
{x: -3, y: 9, color: 'green', mouseover: 'Y'},
{x: -2, y: -9, color: 'green', mouseover: 'Z'},
{x: -2, y: -8, color: 'green', mouseover: 'Y'},
{x: -2, y: -7, color: 'green', mouseover: 'Y'},
{x: -2, y: -6, color: 'green', mouseover: 'Y'},
{x: -2, y: -5, color: 'green', mouseover: 'Y'},
{x: -2, y: -4, color: 'green', mouseover: 'Y'},
{x: -2, y: -3, color: 'green', mouseover: 'Y'},
{x: -2, y: -2, color: 'green', mouseover: 'Y'},
{x: -2, y: -1, color: 'orange', mouseover: 'X'},
{x: -2, y: 0, color: 'orange', mouseover: 'Z'},
{x: -2, y: 1, color: 'green', mouseover: 'Y'},
{x: -2, y: 2, color: 'orange', mouseover: 'Z'},
{x: -2, y: 3, color: 'red', mouseover: 'X'},
{x: -2, y: 4, color: 'green', mouseover: 'X'},
{x: -2, y: 5, color: 'orange', mouseover: 'Y'},
{x: -2, y: 6, color: 'orange', mouseover: 'Z'},
{x: -2, y: 7, color: 'green', mouseover: 'Z'},
{x: -2, y: 8, color: 'green', mouseover: 'Y'},
{x: -2, y: 9, color: 'green', mouseover: 'Z'},
{x: -1, y: -9, color: 'green', mouseover: 'Y'},
{x: -1, y: -8, color: 'green', mouseover: 'Y'},
{x: -1, y: -7, color: 'orange', mouseover: 'Y'},
{x: -1, y: -6, color: 'green', mouseover: 'Y'},
{x: -1, y: -5, color: 'green', mouseover: 'Y'},
{x: -1, y: -4, color: 'green', mouseover: 'X'},
{x: -1, y: -3, color: 'green', mouseover: 'Y'},
{x: -1, y: -2, color: 'red', mouseover: 'X'},
{x: -1, y: -1, color: 'green', mouseover: 'Z'},
{x: -1, y: 0, color: 'green', mouseover: 'X'},
{x: -1, y: 1, color: 'green', mouseover: 'X'},
{x: -1, y: 2, color: 'green', mouseover: 'Z'},
{x: -1, y: 3, color: 'green', mouseover: 'Z'},
{x: -1, y: 4, color: 'red', mouseover: 'Y'},
{x: -1, y: 5, color: 'green', mouseover: 'X'},
{x: -1, y: 6, color: 'green', mouseover: 'Y'},
{x: -1, y: 7, color: 'orange', mouseover: 'X'},
{x: -1, y: 8, color: 'green', mouseover: 'Z'},
{x: -1, y: 9, color: 'orange', mouseover: 'X'},
{x: 0, y: -9, color: 'red', mouseover: 'Z'},
{x: 0, y: -8, color: 'orange', mouseover: 'Y'},
{x: 0, y: -7, color: 'green', mouseover: 'Z'},
{x: 0, y: -6, color: 'red', mouseover: 'Y'},
{x: 0, y: -5, color: 'green', mouseover: 'Y'},
{x: 0, y: -4, color: 'green', mouseover: 'Y'},
{x: 0, y: -3, color: 'green', mouseover: 'Z'},
{x: 0, y: -2, color: 'green', mouseover: 'Z'},
{x: 0, y: -1, color: 'green', mouseover: 'Z'},
{x: 0, y: 0, color: 'orange', mouseover: 'Y'},
{x: 0, y: 1, color: 'orange', mouseover: 'X'},
{x: 0, y: 2, color: 'green', mouseover: 'X'},
{x: 0, y: 3, color: 'green', mouseover: 'X'},
{x: 0, y: 4, color: 'red', mouseover: 'X'},
{x: 0, y: 5, color: 'green', mouseover: 'X'},
{x: 0, y: 6, color: 'green', mouseover: 'Z'},
{x: 0, y: 7, color: 'green', mouseover: 'X'},
{x: 0, y: 8, color: 'green', mouseover: 'X'},
{x: 0, y: 9, color: 'red', mouseover: 'Y'},
{x: 1, y: -9, color: 'green', mouseover: 'X'},
{x: 1, y: -8, color: 'green', mouseover: 'X'},
{x: 1, y: -7, color: 'green', mouseover: 'Z'},
{x: 1, y: -6, color: 'green', mouseover: 'X'},
{x: 1, y: -5, color: 'green', mouseover: 'Z'},
{x: 1, y: -4, color: 'red', mouseover: 'X'},
{x: 1, y: -3, color: 'green', mouseover: 'Z'},
{x: 1, y: -2, color: 'green', mouseover: 'Y'},
{x: 1, y: -1, color: 'green', mouseover: 'Y'},
{x: 1, y: 0, color: 'orange', mouseover: 'X'},
{x: 1, y: 1, color: 'green', mouseover: 'Y'},
{x: 1, y: 2, color: 'green', mouseover: 'Y'},
{x: 1, y: 3, color: 'green', mouseover: 'X'},
{x: 1, y: 4, color: 'orange', mouseover: 'Y'},
{x: 1, y: 5, color: 'green', mouseover: 'Z'},
{x: 1, y: 6, color: 'red', mouseover: 'Z'},
{x: 1, y: 7, color: 'green', mouseover: 'Z'},
{x: 1, y: 8, color: 'green', mouseover: 'Z'},
{x: 1, y: 9, color: 'green', mouseover: 'X'},
{x: 2, y: -9, color: 'green', mouseover: 'Z'},
{x: 2, y: -8, color: 'green', mouseover: 'X'},
{x: 2, y: -7, color: 'orange', mouseover: 'Y'},
{x: 2, y: -6, color: 'green', mouseover: 'X'},
{x: 2, y: -5, color: 'red', mouseover: 'Z'},
{x: 2, y: -4, color: 'green', mouseover: 'Y'},
{x: 2, y: -3, color: 'green', mouseover: 'X'},
{x: 2, y: -2, color: 'green', mouseover: 'Z'},
{x: 2, y: -1, color: 'green', mouseover: 'Y'},
{x: 2, y: 0, color: 'green', mouseover: 'X'},
{x: 2, y: 1, color: 'red', mouseover: 'Y'},
{x: 2, y: 2, color: 'green', mouseover: 'Y'},
{x: 2, y: 3, color: 'orange', mouseover: 'Z'},
{x: 2, y: 4, color: 'green', mouseover: 'X'},
{x: 2, y: 5, color: 'green', mouseover: 'Z'},
{x: 2, y: 6, color: 'green', mouseover: 'X'},
{x: 2, y: 7, color: 'green', mouseover: 'Y'},
{x: 2, y: 8, color: 'green', mouseover: 'X'},
{x: 2, y: 9, color: 'green', mouseover: 'X'},
{x: 3, y: -9, color: 'red', mouseover: 'X'},
{x: 3, y: -8, color: 'green', mouseover: 'Z'},
{x: 3, y: -7, color: 'green', mouseover: 'Z'},
{x: 3, y: -6, color: 'red', mouseover: 'X'},
{x: 3, y: -5, color: 'red', mouseover: 'X'},
{x: 3, y: -4, color: 'green', mouseover: 'X'},
{x: 3, y: -3, color: 'green', mouseover: 'Z'},
{x: 3, y: -2, color: 'green', mouseover: 'X'},
{x: 3, y: -1, color: 'green', mouseover: 'X'},
{x: 3, y: 0, color: 'green', mouseover: 'X'},
{x: 3, y: 1, color: 'green', mouseover: 'Z'},
{x: 3, y: 2, color: 'green', mouseover: 'Y'},
{x: 3, y: 3, color: 'green', mouseover: 'Y'},
{x: 3, y: 4, color: 'green', mouseover: 'Z'},
{x: 3, y: 5, color: 'green', mouseover: 'X'},
{x: 3, y: 6, color: 'green', mouseover: 'Y'},
{x: 3, y: 7, color: 'green', mouseover: 'Z'},
{x: 3, y: 8, color: 'red', mouseover: 'Y'},
{x: 3, y: 9, color: 'green', mouseover: 'Y'},
{x: 4, y: -9, color: 'green', mouseover: 'Y'},
{x: 4, y: -8, color: 'orange', mouseover: 'Z'},
{x: 4, y: -7, color: 'green', mouseover: 'Y'},
{x: 4, y: -6, color: 'green', mouseover: 'X'},
{x: 4, y: -5, color: 'green', mouseover: 'X'},
{x: 4, y: -4, color: 'green', mouseover: 'Y'},
{x: 4, y: -3, color: 'orange', mouseover: 'Y'},
{x: 4, y: -2, color: 'green', mouseover: 'Y'},
{x: 4, y: -1, color: 'orange', mouseover: 'X'},
{x: 4, y: 0, color: 'orange', mouseover: 'X'},
{x: 4, y: 1, color: 'green', mouseover: 'Y'},
{x: 4, y: 2, color: 'green', mouseover: 'X'},
{x: 4, y: 3, color: 'green', mouseover: 'Y'},
{x: 4, y: 4, color: 'green', mouseover: 'Z'},
{x: 4, y: 5, color: 'orange', mouseover: 'Y'},
{x: 4, y: 6, color: 'green', mouseover: 'X'},
{x: 4, y: 7, color: 'green', mouseover: 'X'},
{x: 4, y: 8, color: 'green', mouseover: 'X'},
{x: 4, y: 9, color: 'green', mouseover: 'Z'},
{x: 5, y: -8, color: 'green', mouseover: 'Y'},
{x: 5, y: -7, color: 'green', mouseover: 'X'},
{x: 5, y: -6, color: 'green', mouseover: 'Z'},
{x: 5, y: -5, color: 'green', mouseover: 'X'},
{x: 5, y: -4, color: 'orange', mouseover: 'Z'},
{x: 5, y: -3, color: 'green', mouseover: 'X'},
{x: 5, y: -2, color: 'orange', mouseover: 'X'},
{x: 5, y: -1, color: 'green', mouseover: 'X'},
{x: 5, y: 0, color: 'green', mouseover: 'Y'},
{x: 5, y: 1, color: 'orange', mouseover: 'X'},
{x: 5, y: 2, color: 'green', mouseover: 'X'},
{x: 5, y: 3, color: 'green', mouseover: 'X'},
{x: 5, y: 4, color: 'orange', mouseover: 'Z'},
{x: 5, y: 5, color: 'orange', mouseover: 'Y'},
{x: 5, y: 6, color: 'green', mouseover: 'Z'},
{x: 5, y: 7, color: 'green', mouseover: 'Y'},
{x: 5, y: 8, color: 'green', mouseover: 'Y'},
{x: 6, y: -7, color: 'red', mouseover: 'Z'},
{x: 6, y: -6, color: 'green', mouseover: 'X'},
{x: 6, y: -5, color: 'green', mouseover: 'Y'},
{x: 6, y: -4, color: 'green', mouseover: 'Z'},
{x: 6, y: -3, color: 'green', mouseover: 'Y'},
{x: 6, y: -2, color: 'green', mouseover: 'Y'},
{x: 6, y: -1, color: 'green', mouseover: 'X'},
{x: 6, y: 0, color: 'orange', mouseover: 'X'},
{x: 6, y: 1, color: 'green', mouseover: 'Z'},
{x: 6, y: 2, color: 'red', mouseover: 'Z'},
{x: 6, y: 3, color: 'orange', mouseover: 'X'},
{x: 6, y: 4, color: 'orange', mouseover: 'X'},
{x: 6, y: 5, color: 'green', mouseover: 'Z'},
{x: 6, y: 6, color: 'green', mouseover: 'Y'},
{x: 6, y: 7, color: 'green', mouseover: 'X'},
{x: 7, y: -7, color: 'orange', mouseover: 'Y'},
{x: 7, y: -6, color: 'green', mouseover: 'Z'},
{x: 7, y: -5, color: 'green', mouseover: 'X'},
{x: 7, y: -4, color: 'green', mouseover: 'X'},
{x: 7, y: -3, color: 'green', mouseover: 'Z'},
{x: 7, y: -2, color: 'red', mouseover: 'Y'},
{x: 7, y: -1, color: 'green', mouseover: 'X'},
{x: 7, y: 0, color: 'green', mouseover: 'Z'},
{x: 7, y: 1, color: 'green', mouseover: 'X'},
{x: 7, y: 2, color: 'green', mouseover: 'Z'},
{x: 7, y: 3, color: 'green', mouseover: 'Y'},
{x: 7, y: 4, color: 'orange', mouseover: 'Y'},
{x: 7, y: 5, color: 'green', mouseover: 'Y'},
{x: 7, y: 6, color: 'green', mouseover: 'Z'},
{x: 7, y: 7, color: 'green', mouseover: 'X'},
{x: 8, y: -5, color: 'green', mouseover: 'Y'},
{x: 8, y: -4, color: 'green', mouseover: 'Z'},
{x: 8, y: -3, color: 'orange', mouseover: 'X'},
{x: 8, y: -2, color: 'orange', mouseover: 'X'},
{x: 8, y: -1, color: 'green', mouseover: 'X'},
{x: 8, y: 0, color: 'green', mouseover: 'Z'},
{x: 8, y: 1, color: 'green', mouseover: 'X'},
{x: 8, y: 2, color: 'green', mouseover: 'Y'},
{x: 8, y: 3, color: 'green', mouseover: 'Z'},
{x: 8, y: 4, color: 'orange', mouseover: 'Z'},
{x: 8, y: 5, color: 'red', mouseover: 'Z'},
{x: 9, y: -4, color: 'green', mouseover: 'Y'},
{x: 9, y: -3, color: 'green', mouseover: 'X'},
{x: 9, y: -2, color: 'green', mouseover: 'Z'},
{x: 9, y: -1, color: 'green', mouseover: 'Y'},
{x: 9, y: 0, color: 'green', mouseover: 'Y'},
{x: 9, y: 1, color: 'green', mouseover: 'Z'},
{x: 9, y: 2, color: 'red', mouseover: 'X'},
{x: 9, y: 3, color: 'orange', mouseover: 'Z'},
{x: 9, y: 4, color: 'green', mouseover: 'Y'},
]
d3 = require("d3@6")
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.
