Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders

jamesleesaunders/README.md

Last active July 16, 2019 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesleesaunders/0cbfa9ab9bdce220113f to your computer and use it in GitHub Desktop.
Save jamesleesaunders/0cbfa9ab9bdce220113f to your computer and use it in GitHub Desktop.
Download ZIP
d3-ez : Heat Map (Radial) Example
Raw
README.md

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

Raw
index.html
<!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="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
<body>
<div id="chartholder"></div>
<br/>
<div>Value: <span id="message"></span></div>
<script type="text/javascript">
// Generate some data
function randomDataset() {
var _randomNum = function() {
return Math.floor(Math.random() * 10);
};
var data = [{
key: "asfd",
values: [{
key: "brig",
value: _randomNum()
}, {
key: "cosh",
value: _randomNum()
}, {
key: "popl",
value: _randomNum()
}, {
key: "winn",
value: _randomNum()
}]
}, {
key: "brig",
values: [{
key: "asfd",
value: _randomNum()
}, {
key: "cosh",
value: _randomNum()
}, {
key: "popl",
value: _randomNum()
}, {
key: "winn",
value: _randomNum()
}]
}, {
key: "cosh",
values: [{
key: "asfd",
value: _randomNum()
}, {
key: "brig",
value: _randomNum()
}, {
key: "popl",
value: _randomNum()
}, {
key: "winn",
value: _randomNum()
}]
}, {
key: "popl",
values: [{
key: "asfd",
value: _randomNum()
}, {
key: "brig",
value: _randomNum()
}, {
key: "cosh",
value: _randomNum()
}, {
key: "winn",
value: _randomNum()
}]
}, {
key: "winn",
values: [{
key: "asfd",
value: _randomNum()
}, {
key: "brig",
value: _randomNum()
}, {
key: "cosh",
value: _randomNum()
}, {
key: "popl",
value: _randomNum()
}]
}];
return data;
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment