{
var svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var viewExtent = [[0, 0], [width, height]];
var cellData = kelvinHelmholtzAMR.cellData;
var cellPaths = kelvinHelmholtzAMR.cellPaths;
var tree = kelvinHelmholtzAMR.tree;
var cellColor = d3.scaleSequential(d3.interpolateGreys).domain([0.95, 2.15]);
var biggestCell = [d3.max(cellData, d=>d.width[0]), d3.max(cellData, d=>d.height[0])];
console.log("biggest", biggestCell);
svg.append("g")
.attr("id", "image")
.selectAll("rect")
.data(cellData)
.enter()
.append("rect")
.attr("class", "selectable")
.attr("stroke", "darkgrey")
.attr("stroke-width", 1.0)
.attr("stroke-opacity", 0.5)
.style("fill", (d, flatIndex) => cellColor(d.density))
.style("fill-opacity", 0.2)
.attr("x", (d, flatIndex) => cellData[flatIndex].x[0])
.attr("y", (d, flatIndex) => cellData[flatIndex].y[0])
.attr("width", (d, flatIndex) => cellData[flatIndex].width[0])
.attr("height", (d, flatIndex) => cellData[flatIndex].height[0])
.each(d=>{d.selected=false});
var line = d3.line()
.curve(d3.curveCatmullRom.alpha(0.5));
var myPath = svg.append("g")
.attr("id", "pathintegration")
.append("path")
.attr("d", line(myPoints))
.attr("stroke", "none")
.attr("display", "none")
.style("fill", "none").node();
yield svg.node();
var length = myPath.getTotalLength();
var Nsegments = 200;
var dt = length / Nsegments;
var pathSegments = d3.range(Nsegments).map( d => {
var segment = {x1: myPath.getPointAtLength(d * dt).x,
y1: myPath.getPointAtLength(d * dt).y,
x2: myPath.getPointAtLength((d+1) * dt).x,
y2: myPath.getPointAtLength((d+1) * dt).y,
i: d};
tree.visit(findOverlappingNodesPoint([segment.x2, segment.y2], biggestCell, nd => {
segment.density = nd.density;
segment.velocity_x = nd.velocity_x;
segment.velocity_y = nd.velocity_y;
segment.level;
}));
return segment;
});
var pathsegments = svg.append("g").attr("id", "pathsegments")
.selectAll("line")
.data(pathSegments)
.enter()
.append("line")
.attr("x1", d=>d.x1)
.attr("y1", d=>d.y1)
.attr("x2", d=>d.x2)
.attr("y2", d=>d.y2)
.style("stroke", "#7C4DFF")
.style("stroke-width", 2.0)
.style("fill", "#7C4DFF")
.style("stroke-opacity", 0.0)
.style("fill-opacity", 0.0);
var linePlotY = d3.scaleLinear()
.domain(d3.extent(pathSegments, d=>d.density))
.range([height - 32, 32]);
var linePlotX = d3.scaleLinear()
.domain([0, Nsegments])
.range([512 + 48, width - 64]);
svg.append("g").attr("transform", "translate(560,0)").call(d3.axisLeft(linePlotY));
svg.append("g").attr("transform", "translate(0," + (height - 32) + ")").call(d3.axisBottom(linePlotX));
var linequery = svg.append("g")
.attr("id", "linequery")
.selectAll("line")
.data(pathSegments.slice(1))
.enter()
.append("line")
.attr("fill", "#7C4DFF")
.attr("stroke", "#7C4DFF")
.attr("stroke-width", 1.5)
.style("stroke-opacity", 0.0)
.style("fill-opacity", 0.0)
.attr("x1", (d, i) => linePlotX(i-1))
.attr("x2", (d, i) => linePlotX(i))
.attr("y1", (d, i) => linePlotY(pathSegments[i].density))
.attr("y2", (d, i) => linePlotY(d.density));
var circle = svg
.append("circle")
.attr("cx", myPoints[0][0])
.attr("cy", myPoints[0][1])
.attr("r", 5.0)
.style("fill", "#2196F3");
var circleQuery = svg
.append("circle")
.attr("cx", linePlotX(0))
.attr("cy", linePlotY(pathSegments[0].density))
.attr("r", 5.0)
.style("fill", "#2196F3");
var lastPos = myPath.getPointAtLength(0.0);
for (var segi = 0; segi < Nsegments; segi++) {
var t = d3.transition().duration(10);
circle.transition(t)
.attr("cx", pathSegments[segi].x2)
.attr("cy", pathSegments[segi].y2);
pathsegments
.filter(d => (d.i <= segi))
.transition(t)
.style("fill-opacity", 1.0)
.style("stroke-opacity", 1.0);
circleQuery.transition(t)
.attr("cx", linePlotX(segi))
.attr("cy", linePlotY(pathSegments[segi].density));
linequery
.filter(d => (d.i <= segi))
.transition(t)
.style("fill-opacity", 1.0)
.style("stroke-opacity", 1.0);
await t.end();
yield svg.node();
}
}