jsgao0/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I post a tutorial in order that my friend needs a 2D heat map for quailty display.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Heat Map - Quality Display</title>
  <style>
    svg {
      border: 3px solid;
    }
  </style>
</head>
<body>
  <div style="margin: 0 0 10px;">
    <select id="yearSelector">
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2016</option>
    </select>
    <input type="radio" name="valueSelector" value="min" checked>Min.
    <input type="radio" name="valueSelector" value="max">Max.
    <input type="radio" name="valueSelector" value="avg">Avg.
  </div>
  <div id="svg-block" style="text-align: center;"></div>
  <script>
    var config = {
      width: 400, // SVG width.
      height: 400, // SVG height.
      grid: {
        width: 40, // Can divide SVG width,
        height: 40 // Can divide SVG height
      },
      diff: 200, // The difference(gap) between each color.
      // It arrayed from deep to light and uses HEX colors.
      colors: ['#993404', '#d95f0e', '#fe9929', '#fed98e', '#ffffd4']
    };

    function getPosition(dataIndex) { // index is from 0.
      if(!dataIndex) return {x: 0, y: 0};

      var nthColumn = dataIndex % (config.height / config.grid.height), // x-axis: 0 - 99
          nthRow = Math.floor(dataIndex / (config.width / config.grid.width)); // y-axis: 0 - 99

      var columnWidth = config.grid.width,
          rowHeight = config.grid.height;
      return {
        x: columnWidth * nthColumn,
        y: rowHeight * nthRow
      };
    }

    function getColor(dataValue) {
      return config.colors[Math.floor(dataValue / config.diff)];
    }

    function renderSVG(data) {
      d3.select('svg').remove();
      var svg = d3.select('#svg-block')
                  .append('svg')
                  .attr({
                    width: config.width,
                    height: config.height
                  });
      svg.selectAll('rect').data(data).enter().append('rect').attr({
        width: config.grid.width,
        height: config.grid.height,
        x: function(d, i) { return getPosition(i).x; },
        y: function(d, i) { return getPosition(i).y; },
        'fill': '#fff'
      }).transition().duration(1500).attr({
        'fill': function(d) { return getColor(d); }
      });
    }

    var qualityData = {
      2014: {
        min: [],
        max: [],
        avg: []
      },
      2015: {
        min: [],
        max: [],
        avg: []
      },
      2016: {
        min: [],
        max: [],
        avg: []
      }
    };

    // This function is for DEMO.
    function dataRandom(dataLen) {
      for(var i = 0; i < dataLen; i++) {
        qualityData[2014].min.push(Math.floor(Math.random() * 1000));
        qualityData[2014].max.push(Math.floor(Math.random() * 1000));
        qualityData[2014].avg.push(Math.floor(Math.random() * 1000));
        qualityData[2015].min.push(Math.floor(Math.random() * 1000));
        qualityData[2015].max.push(Math.floor(Math.random() * 1000));
        qualityData[2015].avg.push(Math.floor(Math.random() * 1000));
        qualityData[2016].min.push(Math.floor(Math.random() * 1000));
        qualityData[2016].max.push(Math.floor(Math.random() * 1000));
        qualityData[2016].avg.push(Math.floor(Math.random() * 1000));
      }
    }

    dataRandom(100);

    renderSVG(qualityData[$('#yearSelector').val()][$('[name=valueSelector]:checked').val()]);

    $('#yearSelector, [name=valueSelector]').change(function() {
      renderSVG(qualityData[$('#yearSelector').val()][$('[name=valueSelector]:checked').val()]);
    })

  </script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Heat Map - Quality Display</title>
	<style>
	svg {
	border: 3px solid;
	}
	</style>
	</head>
	<body>
	<div style="margin: 0 0 10px;">
	<select id="yearSelector">
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	</select>
	<input type="radio" name="valueSelector" value="min" checked>Min.
	<input type="radio" name="valueSelector" value="max">Max.
	<input type="radio" name="valueSelector" value="avg">Avg.
	</div>
	<div id="svg-block" style="text-align: center;"></div>
	<script>
	var config = {
	width: 400, // SVG width.
	height: 400, // SVG height.
	grid: {
	width: 40, // Can divide SVG width,
	height: 40 // Can divide SVG height
	},
	diff: 200, // The difference(gap) between each color.
	// It arrayed from deep to light and uses HEX colors.
	colors: ['#993404', '#d95f0e', '#fe9929', '#fed98e', '#ffffd4']
	};

	function getPosition(dataIndex) { // index is from 0.
	if(!dataIndex) return {x: 0, y: 0};

	var nthColumn = dataIndex % (config.height / config.grid.height), // x-axis: 0 - 99
	nthRow = Math.floor(dataIndex / (config.width / config.grid.width)); // y-axis: 0 - 99

	var columnWidth = config.grid.width,
	rowHeight = config.grid.height;
	return {
	x: columnWidth * nthColumn,
	y: rowHeight * nthRow
	};
	}

	function getColor(dataValue) {
	return config.colors[Math.floor(dataValue / config.diff)];
	}

	function renderSVG(data) {
	d3.select('svg').remove();
	var svg = d3.select('#svg-block')
	.append('svg')
	.attr({
	width: config.width,
	height: config.height
	});
	svg.selectAll('rect').data(data).enter().append('rect').attr({
	width: config.grid.width,
	height: config.grid.height,
	x: function(d, i) { return getPosition(i).x; },
	y: function(d, i) { return getPosition(i).y; },
	'fill': '#fff'
	}).transition().duration(1500).attr({
	'fill': function(d) { return getColor(d); }
	});
	}

	var qualityData = {
	2014: {
	min: [],
	max: [],
	avg: []
	},
	2015: {
	min: [],
	max: [],
	avg: []
	},
	2016: {
	min: [],
	max: [],
	avg: []
	}
	};

	// This function is for DEMO.
	function dataRandom(dataLen) {
	for(var i = 0; i < dataLen; i++) {
	qualityData[2014].min.push(Math.floor(Math.random() * 1000));
	qualityData[2014].max.push(Math.floor(Math.random() * 1000));
	qualityData[2014].avg.push(Math.floor(Math.random() * 1000));
	qualityData[2015].min.push(Math.floor(Math.random() * 1000));
	qualityData[2015].max.push(Math.floor(Math.random() * 1000));
	qualityData[2015].avg.push(Math.floor(Math.random() * 1000));
	qualityData[2016].min.push(Math.floor(Math.random() * 1000));
	qualityData[2016].max.push(Math.floor(Math.random() * 1000));
	qualityData[2016].avg.push(Math.floor(Math.random() * 1000));
	}
	}

	dataRandom(100);

	renderSVG(qualityData[$('#yearSelector').val()][$('[name=valueSelector]:checked').val()]);

	$('#yearSelector, [name=valueSelector]').change(function() {
	renderSVG(qualityData[$('#yearSelector').val()][$('[name=valueSelector]:checked').val()]);
	})

	</script>
	</body>
	</html>