230 lines
6.5 KiB
HTML
230 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>IsoBands example</title>
|
|
|
|
<script src="https://d3js.org/d3.v3.min.js"></script>
|
|
<script src="../../dist/marchingsquares.js"></script>
|
|
|
|
<style>
|
|
div.tooltip {
|
|
position: absolute;
|
|
text-align: center;
|
|
padding: 5px;
|
|
font: 12px sans-serif;
|
|
background: #ededee;
|
|
border: 0px;
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="vienna"></div>
|
|
|
|
<script src="vienna_data.js"></script>
|
|
<script>
|
|
var useQuadTree = true;
|
|
var intervals = []
|
|
var bandWidths = []
|
|
var intervals_lines = []
|
|
var intervals_lines2 = []
|
|
var isoBands = [];
|
|
var isoLines = [];
|
|
var isoLines2 = [];
|
|
|
|
for (var i = 0; i < 256; i+=8) {
|
|
intervals.push(i);
|
|
bandWidths.push(8);
|
|
}
|
|
|
|
for (var i = 16; i < 256; i+=16)
|
|
intervals_lines.push(i);
|
|
|
|
for (var i = 8; i < 256; i+=16)
|
|
intervals_lines2.push(i);
|
|
|
|
data = d3.transpose(vienna_basin);
|
|
var xs = d3.range(0, data[0].length);
|
|
var ys = d3.range(0, data.length);
|
|
|
|
var prepData = data;
|
|
|
|
/* pre-process data to speed up multiple calls to isoBands/isoLines */
|
|
if (useQuadTree)
|
|
prepData = new MarchingSquaresJS.QuadTree(data);
|
|
|
|
/*******************
|
|
1st: iso bands
|
|
********************/
|
|
debugger
|
|
MarchingSquaresJS
|
|
.isoBands(
|
|
prepData,
|
|
intervals,
|
|
bandWidths,
|
|
{ noQuadTree: !useQuadTree })
|
|
.forEach(function(b, i) {
|
|
isoBands.push({
|
|
"coords": b,
|
|
"level": i + 1,
|
|
"val": intervals[i] + bandWidths[i]
|
|
});
|
|
});
|
|
|
|
/*******************
|
|
2nd: iso lines
|
|
********************/
|
|
|
|
/* iso line set A */
|
|
MarchingSquaresJS
|
|
.isoLines(
|
|
prepData,
|
|
intervals_lines,
|
|
{ linearRing: false, noQuadTree: !useQuadTree })
|
|
.forEach(function(c, i) {
|
|
isoLines.push({
|
|
"coords": c,
|
|
"level": i,
|
|
"val": intervals_lines[i]
|
|
});
|
|
});
|
|
|
|
/* iso line set B */
|
|
MarchingSquaresJS
|
|
.isoLines(
|
|
prepData,
|
|
intervals_lines2,
|
|
{ linearRing: false, noQuadTree: !useQuadTree })
|
|
.forEach(function(c, i) {
|
|
isoLines2.push({
|
|
"coords": c,
|
|
"level": i,
|
|
"val": intervals_lines2[i]
|
|
});
|
|
});
|
|
|
|
iso_lines_array = [];
|
|
|
|
iso_lines_array.push({
|
|
intervals: intervals_lines2,
|
|
coords: isoLines2
|
|
},{
|
|
intervals: intervals_lines,
|
|
coords: isoLines
|
|
});
|
|
|
|
drawLines('#vienna', isoBands, intervals, iso_lines_array);
|
|
|
|
var div = d3.select("#vienna").append("div")
|
|
.attr("class", "tooltip")
|
|
.style("opacity", 0);
|
|
|
|
// helper function
|
|
function drawLines(divId, bands, intervals, isolines) {
|
|
|
|
var marginBottomLabel = 0;
|
|
|
|
var width = 800;
|
|
var height = width * (ys.length / xs.length);
|
|
|
|
var xScale = d3.scale.linear()
|
|
.range([0, width])
|
|
.domain([Math.min.apply(null, xs), Math.max.apply(null, xs)]);
|
|
|
|
var yScale = d3.scale.linear()
|
|
.range([0, height])
|
|
.domain([Math.min.apply(null, ys), Math.max.apply(null, ys)]);
|
|
|
|
var colours = d3.scale.linear().domain([intervals[0], intervals[2], intervals[4], intervals[Math.floor(intervals.length / 2)], intervals[intervals.length - 1]])
|
|
.range(["blue", "darkgreen", "green", "brown", "grey"]);
|
|
|
|
var svg = d3.select(divId)
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height + marginBottomLabel);
|
|
|
|
svg.selectAll("path.bands")
|
|
.data(bands)
|
|
.enter().append("path")
|
|
.style("fill", function (d) {
|
|
return colours(d.val);
|
|
})
|
|
.style("stroke", "none")
|
|
.style('opacity', 1.0)
|
|
.attr("d", function (d) {
|
|
var p = "";
|
|
d.coords.forEach(function (aa) {
|
|
p += (d3.svg.line()
|
|
.x(function (dat) {
|
|
return xScale(dat[0]);
|
|
})
|
|
.y(function (dat) {
|
|
return yScale(dat[1]);
|
|
})
|
|
.interpolate("linear")
|
|
)(aa) + "Z";
|
|
});
|
|
return p;
|
|
})
|
|
.on('mouseover', function () {
|
|
d3.select(this).style('fill', d3.rgb(204, 185, 116));
|
|
})
|
|
.on('mouseout', function () {
|
|
d3.select(this).style('fill', function (d1) {
|
|
return colours(d1.val);
|
|
})
|
|
});
|
|
|
|
isolines.forEach(function(l, i) {
|
|
var intervals = l.intervals;
|
|
var lines = l.coords;
|
|
|
|
svg.selectAll("path.lines_" + i)
|
|
.data(lines)
|
|
.enter().append("path")
|
|
.style("fill", "none")
|
|
.style("stroke", "black")
|
|
.style("stroke-width", i + 0.5)
|
|
.style("stroke-dasharray", i == 0 ? "4,4" : "none")
|
|
.style('opacity', 1.0)
|
|
.attr("d", function (d) {
|
|
var p = "";
|
|
d.coords.forEach(function (aa) {
|
|
p += (d3.svg.line()
|
|
.x(function (dat) {
|
|
return xScale(dat[0]);
|
|
})
|
|
.y(function (dat) {
|
|
return yScale(dat[1]);
|
|
})
|
|
.interpolate("linear")
|
|
)(aa);
|
|
});
|
|
return p;
|
|
})
|
|
.on('mouseover', function (d) {
|
|
div.transition()
|
|
.duration(50)
|
|
.style("opacity", .97);
|
|
div.html("Height: " + d.val + " of 255")
|
|
.style("left", (d3.event.pageX) + "px")
|
|
.style("top", (d3.event.pageY - 30) + "px");
|
|
})
|
|
.on('mouseout', function () {
|
|
d3.select(this)
|
|
.style('stroke', "black")
|
|
.style("stroke-width", 1);
|
|
div.transition()
|
|
.duration(800)
|
|
.style("opacity", 0);
|
|
});
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|