Skip to content

Instantly share code, notes, and snippets.

@arpitnarechania

arpitnarechania/.block

Last active August 21, 2019 04:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arpitnarechania/caeba2e6579900ea12cb2a4eb157ce74 to your computer and use it in GitHub Desktop.
Save arpitnarechania/caeba2e6579900ea12cb2a4eb157ce74 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Correlation Matrix
Raw
.block
license: MIT
Raw
README.md

Simple configurable Correlation Matrix DEMO

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Correlation Matrix</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
</head>
<body>
<div style="display:inline-block;" id="legend"></div>
<div style="display:inline-block; float:left" id="container"></div>
<script src="main.js"></script>
<script>
var correlationMatrix = [
[1, 0.3, 0, 0.8, 0, 0.2, 1, 0.5, 0, 0.75],
[0.3, 1, 0.5, 0.2, 0.4, 0.3, 0.8, 0.1, 1, 0],
[0, 0.5, 1, 0.4, 0, 0.9, 0, 0.2, 1, 0.3],
[0.8, 0.2, 0.4, 1, 0.3, 0.4, 0.1, 1, 0.2, 0.9],
[0, 0.4, 0, 0.3, 1, 0.1, 0.4, 0, 0.6, 0.7],
[0.2, 0.3, 0.9, 0.4, 0.1, 1, 0, 0.1, 0.4, 0.1],
[1, 0.8, 0, 0.1, 0.4, 0, 1, 0.5, 0, 1],
[0.5, 0.1, 0.2, 1, 0.1, 0, 0.5, 1, 0, 0.4],
[0, 1, 1, 0.2, 0.6, 0.4, 0, 0, 1, 0.6],
[0.75, 0, 0.3, 0.9, 0.7, 0.1, 1, 0.4, 0.6, 1]
];
var labels = ['Var 1', 'Var 2', 'Var 3', 'Var 4', 'Var 5', 'Var 6', 'Var 7', 'Var 8', 'Var 9', 'Var 10'];
Matrix({
container : '#container',
data : correlationMatrix,
labels : labels,
start_color : '#ffffff',
end_color : '#3498db'
});
</script>
</body>
Raw
main.js
function Matrix(options) {
var margin = {top: 50, right: 50, bottom: 100, left: 100},
width = 350,
height = 350,
data = options.data,
container = options.container,
labelsData = options.labels,
startColor = options.start_color,
endColor = options.end_color;
var widthLegend = 100;
if(!data){
throw new Error('Please pass data');
}
if(!Array.isArray(data) || !data.length || !Array.isArray(data[0])){
throw new Error('It should be a 2-D array');
}
var maxValue = d3.max(data, function(layer) { return d3.max(layer, function(d) { return d; }); });
var minValue = d3.min(data, function(layer) { return d3.min(layer, function(d) { return d; }); });
var numrows = data.length;
var numcols = data[0].length;
var svg = d3.select(container).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var background = svg.append("rect")
.style("stroke", "black")
.style("stroke-width", "2px")
.attr("width", width)
.attr("height", height);
var x = d3.scale.ordinal()
.domain(d3.range(numcols))
.rangeBands([0, width]);
var y = d3.scale.ordinal()
.domain(d3.range(numrows))
.rangeBands([0, height]);
var colorMap = d3.scale.linear()
.domain([minValue,maxValue])
.range([startColor, endColor]);
var row = svg.selectAll(".row")
.data(data)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });
var cell = row.selectAll(".cell")
.data(function(d) { return d; })
.enter().append("g")
.attr("class", "cell")
.attr("transform", function(d, i) { return "translate(" + x(i) + ", 0)"; });
cell.append('rect')
.attr("width", x.rangeBand())
.attr("height", y.rangeBand())
.style("stroke-width", 0);
cell.append("text")
.attr("dy", ".32em")
.attr("x", x.rangeBand() / 2)
.attr("y", y.rangeBand() / 2)
.attr("text-anchor", "middle")
.style("fill", function(d, i) { return d >= maxValue/2 ? 'white' : 'black'; })
.text(function(d, i) { return d; });
row.selectAll(".cell")
.data(function(d, i) { return data[i]; })
.style("fill", colorMap);
var labels = svg.append('g')
.attr('class', "labels");
var columnLabels = labels.selectAll(".column-label")
.data(labelsData)
.enter().append("g")
.attr("class", "column-label")
.attr("transform", function(d, i) { return "translate(" + x(i) + "," + height + ")"; });
columnLabels.append("line")
.style("stroke", "black")
.style("stroke-width", "1px")
.attr("x1", x.rangeBand() / 2)
.attr("x2", x.rangeBand() / 2)
.attr("y1", 0)
.attr("y2", 5);
columnLabels.append("text")
.attr("x", 0)
.attr("y", y.rangeBand() / 2)
.attr("dy", ".82em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-60)")
.text(function(d, i) { return d; });
var rowLabels = labels.selectAll(".row-label")
.data(labelsData)
.enter().append("g")
.attr("class", "row-label")
.attr("transform", function(d, i) { return "translate(" + 0 + "," + y(i) + ")"; });
rowLabels.append("line")
.style("stroke", "black")
.style("stroke-width", "1px")
.attr("x1", 0)
.attr("x2", -5)
.attr("y1", y.rangeBand() / 2)
.attr("y2", y.rangeBand() / 2);
rowLabels.append("text")
.attr("x", -8)
.attr("y", y.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) { return d; });
var key = d3.select("#legend")
.append("svg")
.attr("width", widthLegend)
.attr("height", height + margin.top + margin.bottom);
var legend = key
.append("defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "100%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "100%")
.attr("spreadMethod", "pad");
legend
.append("stop")
.attr("offset", "0%")
.attr("stop-color", endColor)
.attr("stop-opacity", 1);
legend
.append("stop")
.attr("offset", "100%")
.attr("stop-color", startColor)
.attr("stop-opacity", 1);
key.append("rect")
.attr("width", widthLegend/2-10)
.attr("height", height)
.style("fill", "url(#gradient)")
.attr("transform", "translate(0," + margin.top + ")");
var y = d3.scale.linear()
.range([height, 0])
.domain([minValue, maxValue]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
key.append("g")
.attr("class", "y axis")
.attr("transform", "translate(41," + margin.top + ")")
.call(yAxis)
}
Raw
style.css
.axis text {
font: 10px sans-serif;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
@Farkal
Copy link

Farkal commented Mar 2, 2017

d3 v4 Matrix function Code :

function Matrix(options) {

	var margin = {top: 50, right: 50, bottom: 100, left: 100},
	    width = 350,
	    height = 350,
	    data = options.data,
	    container = options.container,
	    labelsData = options.labels,
	    startColor = options.start_color,
	    endColor = options.end_color;

	var widthLegend = 100;

	if(!data){
		throw new Error('Please pass data');
	}

	if(!Array.isArray(data) || !data.length || !Array.isArray(data[0])){
		throw new Error('It should be a 2-D array');
	}

    var maxValue = d3.max(data, function(layer) { return d3.max(layer, function(d) { return d; }); });
    var minValue = d3.min(data, function(layer) { return d3.min(layer, function(d) { return d; }); });

	var numrows = data.length;
	var numcols = data[0].length;

	var svg = d3.select(container).append("svg")
	    .attr("width", width + margin.left + margin.right)
	    .attr("height", height + margin.top + margin.bottom)
		.append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var background = svg.append("rect")
	    .style("stroke", "black")
	    .style("stroke-width", "2px")
	    .attr("width", width)
	    .attr("height", height);

	var x = d3.scaleBand()
	    .domain(d3.range(numcols))
	    .range([0, width]);

	var y = d3.scaleBand()
	    .domain(d3.range(numrows))
	    .range([0, height]);

	var colorMap = d3.scaleLinear()
	    .domain([minValue,maxValue])
	    .range([startColor, endColor]);

	var row = svg.selectAll(".row")
	    .data(data)
	  	.enter().append("g")
	    .attr("class", "row")
	    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

	var cell = row.selectAll(".cell")
	    .data(function(d) { return d; })
			.enter().append("g")
	    .attr("class", "cell")
	    .attr("transform", function(d, i) { return "translate(" + x(i) + ", 0)"; });

	cell.append('rect')
	    .attr("width", x.bandwidth())
	    .attr("height", y.bandwidth())
	    .style("stroke-width", 0);

    cell.append("text")
	    .attr("dy", ".32em")
	    .attr("x", x.bandwidth() / 2)
	    .attr("y", y.bandwidth() / 2)
	    .attr("text-anchor", "middle")
	    .style("fill", function(d, i) { return d >= maxValue/2 ? 'white' : 'black'; })
	    .text(function(d, i) { return d; });

	row.selectAll(".cell")
	    .data(function(d, i) { return data[i]; })
	    .style("fill", colorMap);

	var labels = svg.append('g')
		.attr('class', "labels");

	var columnLabels = labels.selectAll(".column-label")
	    .data(labelsData)
	    .enter().append("g")
	    .attr("class", "column-label")
	    .attr("transform", function(d, i) { return "translate(" + x(i) + "," + height + ")"; });

	columnLabels.append("line")
		.style("stroke", "black")
	    .style("stroke-width", "1px")
	    .attr("x1", x.bandwidth() / 2)
	    .attr("x2", x.bandwidth() / 2)
	    .attr("y1", 0)
	    .attr("y2", 5);

	columnLabels.append("text")
	    .attr("x", 0)
	    .attr("y", y.bandwidth() / 2)
	    .attr("dy", ".82em")
	    .attr("text-anchor", "end")
	    .attr("transform", "rotate(-60)")
	    .text(function(d, i) { return d; });

	var rowLabels = labels.selectAll(".row-label")
	    .data(labelsData)
	  .enter().append("g")
	    .attr("class", "row-label")
	    .attr("transform", function(d, i) { return "translate(" + 0 + "," + y(i) + ")"; });

	rowLabels.append("line")
		.style("stroke", "black")
	    .style("stroke-width", "1px")
	    .attr("x1", 0)
	    .attr("x2", -5)
	    .attr("y1", y.bandwidth() / 2)
	    .attr("y2", y.bandwidth() / 2);

	rowLabels.append("text")
	    .attr("x", -8)
	    .attr("y", y.bandwidth() / 2)
	    .attr("dy", ".32em")
	    .attr("text-anchor", "end")
	    .text(function(d, i) { return d; });

    var key = d3.select("#legend")
    .append("svg")
    .attr("width", widthLegend)
    .attr("height", height + margin.top + margin.bottom);

    var legend = key
    .append("defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "100%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

    legend
    .append("stop")
    .attr("offset", "0%")
    .attr("stop-color", endColor)
    .attr("stop-opacity", 1);

    legend
    .append("stop")
    .attr("offset", "100%")
    .attr("stop-color", startColor)
    .attr("stop-opacity", 1);

    key.append("rect")
    .attr("width", widthLegend/2-10)
    .attr("height", height)
    .style("fill", "url(#gradient)")
    .attr("transform", "translate(0," + margin.top + ")");

    var y = d3.scaleLinear()
    .range([height, 0])
    .domain([minValue, maxValue]);

    var yAxis = d3.axisRight()
    .scale(y);

    key.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(41," + margin.top + ")")
    .call(yAxis)
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment