{
const size = 300;
const n = 8;
const cellSize = size / n;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", size)
.attr("viewbox", [0,0,width, size]);
const offsetG = svg.append("g").attr("id", "iso").attr("transform", `translate(${size*1.8}, 0)`);
makeGrid(offsetG, n, cellSize, "flatGrid", "#146152")
const isoG = svg.append("g").attr("id", "iso").attr("transform", `matrix(0.866, 0.5, -0.866, 0.5, ${size*0.9}, 0)`);
makeGrid(isoG, n, cellSize, "flatGrid", "#FF5A33")
const point = [80,80];
offsetG.append("circle")
.attr("r", 15)
.attr("stroke","#146152")
.attr("fill","white")
.attr('stroke-width', 1)
.attr("cx", point[0])
.attr("cy", point[1]);
const isoPoint = toIso(point);
isoG.append("circle")
.attr("r", 15)
.attr("stroke","#FF5A33")
.attr("fill","white")
.attr('stroke-width', 1)
.attr("cx", point[0])
.attr("cy", point[1]);
svg.append('text').attr('id','offset-coords').attr('x', 5).attr('y', '20')
svg.append('text').attr('id','iso-coords').attr('x', 5).attr('y', size - 10)
svg.on("pointermove", (event) => {
const pointer = d3.pointer(event);
var [x0, y0] = [pointer[0]-(size*1.8), pointer[1]];
if (x0 < 0) [x0, y0] = fromIso([pointer[0] - (size*0.9), pointer[1]])
offsetG.selectAll('circle')
.attr('cx', x0)
.attr('cy', y0)
isoG.selectAll('circle')
.attr('cx', x0)
.attr('cy', y0)
const [x1, y1] = toIso([x0, y0]);
offsetG.selectAll('path').attr('d', d3.line()([[x0 ,y0], [x1 - size * 0.9, y1]]))
const gs = [isoG, offsetG];
gs.forEach((selection, k) => {
const cm = d3.scaleLinear().range([k ==0 ? '#FF5A33' : '#146152', 'white']).domain([0, size]);
const rows = selection.selectAll('.gridrow');
rows.each((d, i) => {
const rects = d3.select(rows._groups[0][i]).selectAll('rect');
rects.attr('fill', (r, j) => {
const dist = distance(
[
cellSize * j,
cellSize * i,
],
[x0, y0]
)
return cm(dist)
});
});
})
const fmt = d3.format('.2d')
svg.select('#offset-coords').text(`Coords: ${fmt(x0)}, ${fmt(y0)}`)
svg.select('#iso-coords').text(`Coords (Projected): ${fmt(x1)}, ${fmt(y1)}`)
})
yield svg.node();
}