d3-ez : Heat Map (Radial) Example

Generated using d3-ez D3 Reusable Chart Library

A radial heat map is a variation of heat map, where the table is aligned radially. A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors. 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. The term “Heatmap” was originally coined and trademarked by software designer Cormac Kinney in 1991, to describe a 2D display depicting real time financial market information.

FUNCTION: Comparison; Correlation

Credit: Data Viz Project

Credit: Peter Cook for giving permission to use code from his Circular Heat Chart

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Heat Map (Radial) 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 = ["#D34152", "#f4bc71", "#FBF6C4", "#9bcf95", "#398abb"];
    var chart = d3.ez.chart.heatMapRadial().colors(colors);
    var legend = d3.ez.component.legend().title('Widget Counts');
    var title = d3.ez.component.title().mainText("Town to Town Stats").subText("Number of widgets between UK towns");

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

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

</html>

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

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