heatmap

Heatmap

[ ] 20 pts Create a heatmap encoding weekday versus month (or visa versa) along the x- and y-axis, and incident count using a 3-color sequential color palette.
[ ] 04 pts Add a compact color legend to your visualization.
[ ] 02 pts Add annotations for the x-axis, y-axis, and a chart title or caption. This includes axis lines, tick marks, and tick labels. The exact style is up to you.
[ ] 02 pts Add text annotations for the minimum and maximum values only.
[ ] 02 pts Add one general conclusion about the data that you can make from your visualization. This can be placed as paragraph text below your SVG.

forked from junngeronimo's block: heatmap

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="colorbrewer.js"></script>
  <script src="heatmap.js"></script>
</head>
<body>
<script>
/* helper method to make translating easier */
var translate = function(x, y) { return "translate(" + x + "," + y + ")"; };

// container for configuration parameters
var config = {};

config.svg = {width: 800, height: 500};
config.margin = { top: 50, right: 50, bottom: 100, left: 120};

config.plot = {
  width: config.svg.width - config.margin.right - config.margin.left,
  height: config.svg.height - config.margin.top - config.margin.bottom
};

config.legend = {
  width: 100,
  height: 15
};

// create svg based on config
var svg = d3.select("body").append("svg")
  .attr("width", config.svg.width)
  .attr("height", config.svg.height);

// create plot area based on config
var plot = svg.append("g")
  .attr("id", "plot")
  .attr("transform", translate(config.margin.left, config.margin.top));

// create the scales and set ranges
// https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal_rangeBands

// we only need the plot dimensions for the range!
// we will set the domain later when we load the data

var xScale = d3.scale.ordinal()
  .rangeBands([0, config.plot.width], 0, 0);

var yScale = d3.scale.ordinal()
  .rangeBands([config.plot.height, 0], 0, 0);

// create color scale for each cell
// https://github.com/mbostock/d3/wiki/Ordinal-Scales#colorbrewer
// https://bl.ocks.org/mbostock/5577023

// we will use a 3 color sequential palette for this demo

var colorScale = d3.scale.linear()
  .range(colorbrewer.YlGnBu[3]);

// placeholder for data
var data = [];

// d3.csv("Monthly_Property_Crime_2005_to_2015.csv",
d3.csv("chart_long.csv", 
  function(d) { // accessor - will format data as it loads it
    var row = {};

row.entropy = +d["entropy"];
		row.chart = d["chart"];
  	row.var = d["var"];
  	row.id = +d["id"];
	
    return row;
  },
  
  function(error, rows) { // callback - will try to format it as it goes
    if (error) {
      console.warn(error);
    }

data = d3.nest()
      .key(function(d) { return d.chart; })  
      .key(function(d) { return d.var; }) 
      .rollup(function(values) {
        return ({"entr":values[0].entropy,
                "id":values[0].id})
      })
      .map(rows, d3.map); // return as nested d3.maps
  
    var charts = data.keys();
  	
  	var vars = data.get(charts[0]).keys()

xScale.domain(vars);
    yScale.domain(charts);

/*
     * how will we map our values to those colors?
     * lets use the min, average, and max values as our "breaks"
     * (this means our "middle" color might not be the "middle" value)
     */

// our first step is to calculate the min, max, and average
    // the issue now is our sums are nested

// un-nesting these values is a little strange looking
    // debug each step in the console so you know what is going on

// this returns all the values in our map
    // in this case, our values are themselves maps
    var values = data.values();

// now we have an array of maps
    // grab the map values for each inner map
    values = values.map(function(d) { return d.values(); });

//extracting entropy value for each cell
  	entropy_vals=[]
  	values.forEach(function(e){
      e.forEach(function(val){
        entropy_vals.push(val.entr);
      })
    });

// now we have an array of arrays
    // merge arrays into a single array
//     values = d3.merge(entropy_vals);

// now we can calculate the min, max, and average of our counts
    var min = d3.min(entropy_vals);
    var max = d3.max(entropy_vals);
    var avg = d3.mean(entropy_vals);

// use these values as domain for x, y, and color scales
    colorScale.domain([min, avg, max]);

// finally, draw stuff
    drawBackground();
    drawAxes();
    drawHeatmap();
    drawTitle();
    drawLegend();
});
</script>
</body>

https://d3js.org/d3.v3.min.js