sughodke · August 29, 2015 14:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
  }

  #subdivision {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  #subdivision input {
    width: 200px;
  }

 </style>
 <div id="subdivision">
  <input type="range" min="0" max="100" value="8" step="1">
  <output name="subdivision">8</output>
  <div id='heatmap'></div>
 </div>

 <script src="http://d3js.org/d3.v3.min.js"></script>

 <script>
  var T = true, F = false;

  function generateRandomMap(r, c, stns)
  {
    var prob = stns / (r * c),
        cnt = 0,
        ret = new Array (r);

    for (var i = 0; i < r; i ++) {
      ret[i] = new Array(c);

      for (var j = 0; j < c; j ++) {
        if (Math.random() > prob)
          ret[i][j] = F;
        else {
          ret[i][j] = T;
          cnt ++;
        }
      }
    }

    console.log("created random maps with " + cnt + " stations (prob="+prob+")")
    d3.select("output").text(+d3.select("output").text() + " (cnt=" + cnt + ")")
    return ret;
  }

  function computeMDistance(a, b)
  {
    return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
  }

  function createDistanceMap3(r)
  {
    var list = [];
    var loc = [];

    var maxDist = computeMDistance( [0,0], [r.length, r[0].length] )

    r.forEach(function(row, rno) {
      var nr = [];
      row.forEach(function(entry, cno){
        if (entry)
          list.push( [rno, cno] );

        nr.push( [rno, cno] );
      });
      loc.push( nr );
    });

    loc.forEach(function(row) {
      row.forEach(function(entry) {
        var whole = list.map(function(trainstn) {
          return computeMDistance( trainstn, entry );
        });
        entry.push( Math.min.apply(null, whole) / maxDist );
      });
    });

    var merged = [];
    merged = merged.concat.apply(merged, loc);

    return merged;
  }

  function loadData(s, r, c) {
    d3.select('#heatmap').html('loading');

    var r = r || 35,
        c = c || 20,
        s = s || 8;

    var m = generateRandomMap(r, c, s);
    var d = createDistanceMap3(m);

    d3.select('#heatmap').html('');

    //console.log(d);

    draw( d );
  }

  function draw( data ) {
  //get some data
  //var data = loadData(z);

  var colorLow = 'green', colorMed = 'yellow', colorHigh = 'red';

  var margin = {top: 20, right: 20, bottom: 30, left: 20},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  //height of each row in the heatmap
  //width of each column in the heatmap
  if (1 == 1) {
  var gridSize = 50/2,
      h = gridSize,
      w = gridSize,
      rectPadding = 60/2;
  } else {
  var h = 10 * height / data.length,
      w = 10 * width / data[0].length;
  }

  var colorScale = d3.scale.linear()
       .domain([-1, 0, 1])
       .range([colorLow, colorMed, colorHigh]);

  var svg = d3.select("#heatmap").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var heatMap = svg.selectAll(".heatmap")
      .data(data, function(d) { return d[1] + ':' + d[0]; })
    .enter().append("svg:rect")
      .attr("x", function(d) { return d[0] * w; })
      .attr("y", function(d) { return d[1] * h; })
      .attr("width", function(d) { return w; })
      .attr("height", function(d) { return h; })
      .style("fill", function(d) { return colorScale(d[2]); });
  }

  loadData();
 </script>
 <script>
 var output = d3.select("output");

 var input = d3.select("input")
    .on("change", function() { output.text(+this.value); })
    .on("mouseup", function() { loadData(+this.value); });

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	#subdivision {
	position: absolute;
	top: 20px;
	left: 20px;
	}

	#subdivision input {
	width: 200px;
	}

	</style>
	<div id="subdivision">
	<input type="range" min="0" max="100" value="8" step="1">
	<output name="subdivision">8</output>
	<div id='heatmap'></div>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	var T = true, F = false;

	function generateRandomMap(r, c, stns)
	{
	var prob = stns / (r * c),
	cnt = 0,
	ret = new Array (r);

	for (var i = 0; i < r; i ++) {
	ret[i] = new Array(c);

	for (var j = 0; j < c; j ++) {
	if (Math.random() > prob)
	ret[i][j] = F;
	else {
	ret[i][j] = T;
	cnt ++;
	}
	}
	}

	console.log("created random maps with " + cnt + " stations (prob="+prob+")")
	d3.select("output").text(+d3.select("output").text() + " (cnt=" + cnt + ")")
	return ret;
	}

	function computeMDistance(a, b)
	{
	return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
	}

	function createDistanceMap3(r)
	{
	var list = [];
	var loc = [];

	var maxDist = computeMDistance( [0,0], [r.length, r[0].length] )

	r.forEach(function(row, rno) {
	var nr = [];
	row.forEach(function(entry, cno){
	if (entry)
	list.push( [rno, cno] );

	nr.push( [rno, cno] );
	});
	loc.push( nr );
	});

	loc.forEach(function(row) {
	row.forEach(function(entry) {
	var whole = list.map(function(trainstn) {
	return computeMDistance( trainstn, entry );
	});
	entry.push( Math.min.apply(null, whole) / maxDist );
	});
	});

	var merged = [];
	merged = merged.concat.apply(merged, loc);

	return merged;
	}

	function loadData(s, r, c) {
	d3.select('#heatmap').html('loading');

	var r = r \|\| 35,
	c = c \|\| 20,
	s = s \|\| 8;

	var m = generateRandomMap(r, c, s);
	var d = createDistanceMap3(m);

	d3.select('#heatmap').html('');

	//console.log(d);

	draw( d );
	}

	function draw( data ) {
	//get some data
	//var data = loadData(z);

	var colorLow = 'green', colorMed = 'yellow', colorHigh = 'red';

	var margin = {top: 20, right: 20, bottom: 30, left: 20},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	//height of each row in the heatmap
	//width of each column in the heatmap
	if (1 == 1) {
	var gridSize = 50/2,
	h = gridSize,
	w = gridSize,
	rectPadding = 60/2;
	} else {
	var h = 10 * height / data.length,
	w = 10 * width / data[0].length;
	}

	var colorScale = d3.scale.linear()
	.domain([-1, 0, 1])
	.range([colorLow, colorMed, colorHigh]);

	var svg = d3.select("#heatmap").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var heatMap = svg.selectAll(".heatmap")
	.data(data, function(d) { return d[1] + ':' + d[0]; })
	.enter().append("svg:rect")
	.attr("x", function(d) { return d[0] * w; })
	.attr("y", function(d) { return d[1] * h; })
	.attr("width", function(d) { return w; })
	.attr("height", function(d) { return h; })
	.style("fill", function(d) { return colorScale(d[2]); });
	}

	loadData();
	</script>
	<script>
	var output = d3.select("output");

	var input = d3.select("input")
	.on("change", function() { output.text(+this.value); })
	.on("mouseup", function() { loadData(+this.value); });

	</script>
No results found