wangziheng
/
scancode-miro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!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>