Correlogram, somewhat mimmicking those produced by R package corrgram. Generated to answer this StackOverflow question: http://stackoverflow.com/questions/34525173/how-to-create-correlogram-using-d3-as-in-the-example-picture/34539194#34539194
Last active
May 20, 2018 21:53
-
-
Save larsenmtl/dc2210055719b867e63d to your computer and use it in GitHub Desktop.
d3 Correlogram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| mpg | cyl | disp | hp | drat | wt | qsec | vs | am | gear | carb | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| mpg | 1 | -0.852161959426613 | -0.847551379262479 | -0.776168371826586 | 0.681171907806749 | -0.867659376517228 | 0.418684033921778 | 0.664038919127593 | 0.599832429454648 | 0.480284757338842 | -0.550925073902459 | |
| cyl | -0.852161959426613 | 1 | 0.902032872146999 | 0.83244745272182 | -0.69993811382877 | 0.782495794463241 | -0.591242073768869 | -0.810811796083005 | -0.522607046900675 | -0.492686599389471 | 0.526988293749643 | |
| disp | -0.847551379262479 | 0.902032872146999 | 1 | 0.790948586369806 | -0.71021392716927 | 0.887979922058138 | -0.433697880811014 | -0.7104158907906 | -0.591227040063948 | -0.555569198562483 | 0.394976864868969 | |
| hp | -0.776168371826586 | 0.83244745272182 | 0.790948586369806 | 1 | -0.44875911687292 | 0.658747887344759 | -0.708223388861953 | -0.72309673735245 | -0.243204257185851 | -0.125704258225474 | 0.74981247154911 | |
| drat | 0.681171907806749 | -0.69993811382877 | -0.71021392716927 | -0.44875911687292 | 1 | -0.712440646697372 | 0.091204759651183 | 0.440278464955349 | 0.71271112722627 | 0.699610131934665 | -0.0907897988688673 | |
| wt | -0.867659376517228 | 0.782495794463241 | 0.887979922058138 | 0.658747887344759 | -0.712440646697372 | 1 | -0.174715878713405 | -0.554915677663994 | -0.692495258839484 | -0.583286996536648 | 0.427605937735487 | |
| qsec | 0.418684033921778 | -0.591242073768869 | -0.433697880811014 | -0.708223388861953 | 0.091204759651183 | -0.174715878713405 | 1 | 0.744535443526254 | -0.229860862184883 | -0.212682229720365 | -0.656249228338059 | |
| vs | 0.664038919127593 | -0.810811796083005 | -0.7104158907906 | -0.72309673735245 | 0.440278464955349 | -0.554915677663994 | 0.744535443526254 | 1 | 0.168345124585359 | 0.206023348733579 | -0.569607141006843 | |
| am | 0.599832429454648 | -0.522607046900675 | -0.591227040063948 | -0.243204257185851 | 0.71271112722627 | -0.692495258839484 | -0.229860862184883 | 0.168345124585359 | 1 | 0.794058760256343 | 0.0575343510705041 | |
| gear | 0.480284757338842 | -0.492686599389471 | -0.555569198562483 | -0.125704258225474 | 0.699610131934665 | -0.583286996536648 | -0.212682229720365 | 0.206023348733579 | 0.794058760256343 | 1 | 0.274072836357522 | |
| carb | -0.550925073902459 | 0.526988293749643 | 0.394976864868969 | 0.74981247154911 | -0.0907897988688673 | 0.427605937735487 | -0.656249228338059 | -0.569607141006843 | 0.0575343510705041 | 0.274072836357522 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> | |
| <style> | |
| svg { | |
| font: 12px sans-serif; | |
| text-anchor: middle; | |
| } | |
| rect { | |
| stroke: lightgray; | |
| stoke-width: 1px; | |
| fill: none; | |
| } | |
| .y.axis path{ | |
| fill: none; | |
| stroke: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| d3.csv("data.csv", function(error, rows) { | |
| var data = []; | |
| rows.forEach(function(d) { | |
| var x = d[""]; | |
| delete d[""]; | |
| for (prop in d) { | |
| var y = prop, | |
| value = d[prop]; | |
| data.push({ | |
| x: x, | |
| y: y, | |
| value: +value | |
| }); | |
| } | |
| }); | |
| var margin = { | |
| top: 25, | |
| right: 80, | |
| bottom: 25, | |
| left: 25 | |
| }, | |
| width = 500 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom, | |
| domain = d3.set(data.map(function(d) { | |
| return d.x | |
| })).values(), | |
| num = Math.sqrt(data.length), | |
| color = d3.scale.linear() | |
| .domain([-1, 0, 1]) | |
| .range(["#B22222", "#fff", "#000080"]); | |
| var x = d3.scale | |
| .ordinal() | |
| .rangePoints([0, width]) | |
| .domain(domain), | |
| y = d3.scale | |
| .ordinal() | |
| .rangePoints([0, height]) | |
| .domain(domain), | |
| xSpace = x.range()[1] - x.range()[0], | |
| ySpace = y.range()[1] - y.range()[0]; | |
| var svg = d3.select("body") | |
| .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 cor = svg.selectAll(".cor") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", "cor") | |
| .attr("transform", function(d) { | |
| return "translate(" + x(d.x) + "," + y(d.y) + ")"; | |
| }); | |
| cor.append("rect") | |
| .attr("width", xSpace) | |
| .attr("height", ySpace) | |
| .attr("x", -xSpace / 2) | |
| .attr("y", -ySpace / 2) | |
| cor.filter(function(d){ | |
| var ypos = domain.indexOf(d.y); | |
| var xpos = domain.indexOf(d.x); | |
| for (var i = (ypos + 1); i < num; i++){ | |
| if (i === xpos) return false; | |
| } | |
| return true; | |
| }) | |
| .append("text") | |
| .attr("y", 5) | |
| .text(function(d) { | |
| if (d.x === d.y) { | |
| return d.x; | |
| } else { | |
| return d.value.toFixed(2); | |
| } | |
| }) | |
| .style("fill", function(d){ | |
| if (d.value === 1) { | |
| return "#000"; | |
| } else { | |
| return color(d.value); | |
| } | |
| }); | |
| cor.filter(function(d){ | |
| var ypos = domain.indexOf(d.y); | |
| var xpos = domain.indexOf(d.x); | |
| for (var i = (ypos + 1); i < num; i++){ | |
| if (i === xpos) return true; | |
| } | |
| return false; | |
| }) | |
| .append("circle") | |
| .attr("r", (width / (num * 2) - 5)) | |
| .style("fill", function(d){ | |
| if (d.value === 1) { | |
| return "#000"; | |
| } else { | |
| return color(d.value); | |
| } | |
| }); | |
| var aS = d3.scale | |
| .linear() | |
| .range([-margin.top + 5, height + margin.bottom - 5]) | |
| .domain([1, -1]); | |
| var yA = d3.svg.axis() | |
| .orient("right") | |
| .scale(aS) | |
| .tickPadding(7); | |
| var aG = svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yA) | |
| .attr("transform", "translate(" + (width + margin.right / 2) + " ,0)") | |
| var iR = d3.range(-1, 1.01, 0.01); | |
| var h = height / iR.length + 3; | |
| iR.forEach(function(d){ | |
| aG.append('rect') | |
| .style('fill',color(d)) | |
| .style('stroke-width', 0) | |
| .style('stoke', 'none') | |
| .attr('height', h) | |
| .attr('width', 10) | |
| .attr('x', 0) | |
| .attr('y', aS(d)) | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment