d3-ez : Heat Map (Tabular) Example

Generated using d3-ez D3 Reusable Chart Library

A heat map is a data visualization type where the individual values contained in a matrix through variations in coloring. The term “Heat map” was originally introduced by software designer Cormac Kinney in 1991 to describe a 2D display depicting real time financial market information even though similar visualizations have existed for over a century. Heat maps are useful for visualizing variance across multiple variables to display patterns in correlations Fractal maps and tree maps both often use a similar system of color-coding to represent the values taken by a variable in a hierarchy. The term is also used to mean its thematic application as a choropleth map. Many also incorrectly refers to heat maps as Choropleth maps – properly because of the misleading term ‘map’. But a choropleth maps include different shading or patterns within geographic boundaries to show the proportion of a variable of interest, whereas the coloration a heat map does not correspond to geographic boundaries.

FUNCTION: Comparison; Correlation; Distribution; Trend over time

Credit: Data Viz Project

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Heat Map (Tabular) Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>

<body>
  <div id="chartholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>

var colors = [d3.rgb(214, 245, 0), d3.rgb(255, 166, 0), d3.rgb(255, 97, 0), d3.rgb(200, 65, 65), d3.rgb(0, 0, 0)];
      var chart = d3.ez.chart.heatMapTable().colors(colors);
      var legend = d3.ez.component.legend().title('Widget Counts');
      var title = d3.ez.component.title().mainText(json.Metadata.Title).subText(json.Metadata.Detail);

// Create chart base
      var myChart = d3.ez.base()
        .width(750)
        .height(550)
        .chart(chart)
        .legend(legend)
        .title(title)
        .on("customValueMouseOver", function(d, i) {
          d3.select("#message").text(d.value);
        });

d3.select('#chartholder')
        .datum(data)
        .call(myChart);
    });
  </script>
</body>

</html>

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

https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js