main.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. define(['d3', 'dist/marchingsquares'], function (d3, MarchingSquaresJS) {
  2. var intervals = [0, 4.5, 9, 13.5, 18];
  3. var data = [
  4. [18, 13, 10, 9, 10, 13, 18],
  5. [13, 8, 5, 4, 5, 8, 13],
  6. [10, 5, 2, 1, 2, 5, 10],
  7. [9, 4, 1, 12, 1, 4, 9],
  8. [10, 5, 2, 1, 2, 5, 10],
  9. [13, 8, 5, 4, 5, 8, 13],
  10. [18, 13, 10, 9, 10, 13, 18],
  11. [18, 13, 10, 9, 10, 13, 18]
  12. ];
  13. data = d3.transpose(data);
  14. var xs = d3.range(0, data[0].length);
  15. var ys = d3.range(0, data.length);
  16. var isoBands = [];
  17. for (var i = 1; i < intervals.length; i++) {
  18. var lowerBand = intervals[i - 1];
  19. var upperBand = intervals[i];
  20. var band = MarchingSquaresJS.isoBands(
  21. data,
  22. lowerBand,
  23. upperBand - lowerBand,
  24. {
  25. successCallback: function (band) {
  26. console.log('Band' + i + ':', band)
  27. }
  28. }
  29. );
  30. isoBands.push({"coords": band, "level": i, "val": intervals[i]});
  31. }
  32. drawLines('#isobands', isoBands, intervals);
  33. // helper function
  34. function drawLines(divId, lines, intervals) {
  35. var marginBottomLabel = 0;
  36. var width = 300;
  37. var height = width * (ys.length / xs.length);
  38. var xScale = d3.scale.linear()
  39. .range([0, width])
  40. .domain([Math.min.apply(null, xs), Math.max.apply(null, xs)]);
  41. var yScale = d3.scale.linear()
  42. .range([0, height])
  43. .domain([Math.min.apply(null, ys), Math.max.apply(null, ys)]);
  44. var colours = d3.scale.linear().domain([intervals[0], intervals[intervals.length - 1]])
  45. .range([d3.rgb(0, 0, 0),
  46. d3.rgb(200, 200, 200)]);
  47. var svg = d3.select(divId)
  48. .append("svg")
  49. .attr("width", width)
  50. .attr("height", height + marginBottomLabel);
  51. svg.selectAll("path")
  52. .data(lines)
  53. .enter().append("path")
  54. .style("fill", function (d) {
  55. return colours(d.val);
  56. })
  57. .style("stroke", "black")
  58. .style('opacity', 1.0)
  59. .attr("d", function (d) {
  60. var p = "";
  61. d.coords.forEach(function (aa) {
  62. p += (d3.svg.line()
  63. .x(function (dat) {
  64. return xScale(dat[0]);
  65. })
  66. .y(function (dat) {
  67. return yScale(dat[1]);
  68. })
  69. .interpolate("linear")
  70. )(aa) + "Z";
  71. });
  72. return p;
  73. })
  74. .on('mouseover', function () {
  75. d3.select(this).style('fill', d3.rgb(204, 185, 116));
  76. })
  77. .on('mouseout', function () {
  78. d3.select(this).style('fill', function (d1) {
  79. return colours(d1.val);
  80. })
  81. });
  82. }
  83. });