Plotly/heatmap1.html at gh-pages · d3VA/Plotly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

 <head>
	<!-- Numeric.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
	<!-- Plotly.js -->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
	<!-- Plotly chart will be drawn inside this DIV -->
	<div id="myDiv"></div>
	<script>
		//number of spiral loops
		var nspiral = 2;
		// angle
		var th = numeric.linspace(((-Math.PI) / 13), (2 * Math.PI * nspiral), 1000);

		//Empty Value Containers
		var xValues = [];
		var yValues = [];
		var yShift = [];
		var finalX = [];
		var finalY = [];

		//spiral
		for(var i = 0; i <th.length; i++){
		  var a = 1.120529;
		  var b = 0.306349;
		  var r = a * Math.exp((-b) * th[i]);
		  var xResult = (r * Math.cos(th[i]));
		  var yResult = (r * Math.sin(th[i]));
		  xValues.push(xResult);
		  yValues.push(yResult);
		}

		function getMaxOfArray(numArray) {
		  return Math.max.apply(null, numArray);
		};

		function getMinOfArray(numArray) {
		  return Math.min.apply(null, numArray);
		};

		//Shift spiral north so that it is centered
		var yShift = (1.6 - (getMaxOfArray(yValues) - getMinOfArray(yValues))) / 2;

		var spiralTrace = {
		  x: xValues.map(function(xi) { return -(xi) + xValues[0]; }),
		  y: yValues.map(function(yi) { return yi - yValues[0] + yShift; }),
		  type: 'scatter',
		  line: {
			color: 'white',
			width: 3
		  }
		};

		//Build the rectangles as a heatmap and specify the edges of the heatmap squares
		var phi = (1 + Math.sqrt(5)) / 2;
		var xe = [0, 1, (1 + (1 / Math.pow(phi,4))), 1 + (1 / Math.pow(phi,3)), phi];
		var ye = [0, (1 / Math.pow(phi,3)), (1 / Math.pow(phi,3)) + (1 / Math.pow(phi,4)), (1 / Math.pow(phi,2)), 1];

		var zValues = [
		  [13, 3, 3, 5],
		  [13, 2, 1, 5],
		  [13, 10, 11, 12],
		  [13, 8, 8, 8]
		];

		var hm = {
		  x: xe,
		  y: ye.map(function(yi) { return yi + yShift; }),
		  z: zValues,
		  type: 'heatmap',
		  colorscale: 'Viridis'
		};

		var axisTemplate = {
		  range: [0, 1.6],
		  autorange: false,
		  showgrid: false,
		  zeroline: false,
		  showticklabels: false,
		  ticks: ''
		};

		var data = [spiralTrace, hm];

		var layout = {
		  title: 'Heatmap with Unequal Block Sizes',
		  margin: {
			t: 100,
			r: 100,
			b: 100,
			l: 100
		  },
		  xaxis: axisTemplate,
		  yaxis: axisTemplate,
		  showlegend: false,
		  width: 400,
		  height: 400,
		  autosize: false
		};

		Plotly.newPlot('myDiv', data, layout);
	</script>
</body>