Skip to content

Instantly share code, notes, and snippets.

@josiahdavis

josiahdavis/.DS_Store

Last active September 17, 2015 21:34
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 josiahdavis/7e488547a6381a365ac9 to your computer and use it in GitHub Desktop.
Save josiahdavis/7e488547a6381a365ac9 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Heatmap
Raw
Readme.md
Raw
correlationCoefficients.csv
axis1 axis2 value
Accessories Accessories 1
Accessories Appliances 0.067170477
Accessories Art -0.033959782
Accessories Binders -0.029153321
Accessories Bookcases 0.037162975
Accessories Chairs 0.051264112
Accessories Copiers -0.032657822
Accessories Envelopes 0.005072469
Accessories Fasteners -0.016277094
Accessories Furnishings 0.06565245
Accessories Labels -0.019181869
Accessories Machines -0.016040587
Accessories Paper 0.080919952
Accessories Phones 0.04023628
Accessories Storage -0.003158944
Accessories Supplies -0.035282645
Accessories Tables 0.128357646
Appliances Accessories 0.067170477
Appliances Appliances 1
Appliances Art 0.080498442
Appliances Binders -0.036483954
Appliances Bookcases 0.01221747
Appliances Chairs 0.064596126
Appliances Copiers -0.026016248
Appliances Envelopes 0.004641907
Appliances Fasteners -0.005270253
Appliances Furnishings 0.051346672
Appliances Labels -0.022621661
Appliances Machines 0.01230748
Appliances Paper 0.118245791
Appliances Phones 0.050227712
Appliances Storage 0.077248889
Appliances Supplies 0.018378453
Appliances Tables 0.025918683
Art Accessories -0.033959782
Art Appliances 0.080498442
Art Art 1
Art Binders -0.00382585
Art Bookcases 0.009211837
Art Chairs 0.056697779
Art Copiers 0.062871054
Art Envelopes 0.057083045
Art Fasteners 0.018721868
Art Furnishings 0.006565294
Art Labels 0.003414076
Art Machines 0.008733338
Art Paper 0.02882594
Art Phones 0.017668011
Art Storage 0.01709717
Art Supplies 0.043781772
Art Tables -0.015068255
Binders Accessories -0.029153321
Binders Appliances -0.036483954
Binders Art -0.00382585
Binders Binders 1
Binders Bookcases -0.012217727
Binders Chairs 0.035040851
Binders Copiers -0.0013434
Binders Envelopes 0.005020752
Binders Fasteners 0.054414029
Binders Furnishings 0.099256151
Binders Labels -0.024738337
Binders Machines 0.001186264
Binders Paper 0.055472425
Binders Phones 0.01098649
Binders Storage 0.032724401
Binders Supplies 0.039290566
Binders Tables 0.060496522
Bookcases Accessories 0.037162975
Bookcases Appliances 0.01221747
Bookcases Art 0.009211837
Bookcases Binders -0.012217727
Bookcases Bookcases 1
Bookcases Chairs 0.013320332
Bookcases Copiers -0.015721405
Bookcases Envelopes 0.022207002
Bookcases Fasteners 0.016284986
Bookcases Furnishings 0.035726847
Bookcases Labels 0.042978275
Bookcases Machines 0.001520128
Bookcases Paper 0.062690759
Bookcases Phones 0.056186361
Bookcases Storage -0.016740518
Bookcases Supplies 0.000111814
Bookcases Tables -0.02149225
Chairs Accessories 0.051264112
Chairs Appliances 0.064596126
Chairs Art 0.056697779
Chairs Binders 0.035040851
Chairs Bookcases 0.013320332
Chairs Chairs 1
Chairs Copiers 0.002763107
Chairs Envelopes 0.024406547
Chairs Fasteners 0.073677911
Chairs Furnishings 0.046085839
Chairs Labels 0.00102319
Chairs Machines 0.026233235
Chairs Paper 0.057336323
Chairs Phones 0.122591026
Chairs Storage 0.0592516
Chairs Supplies -0.027673276
Chairs Tables 0.042743928
Copiers Accessories -0.032657822
Copiers Appliances -0.026016248
Copiers Art 0.062871054
Copiers Binders -0.0013434
Copiers Bookcases -0.015721405
Copiers Chairs 0.002763107
Copiers Copiers 1
Copiers Envelopes 0.042089045
Copiers Fasteners -0.047913311
Copiers Furnishings -0.014955727
Copiers Labels -0.00626887
Copiers Machines -0.005979818
Copiers Paper -0.026558104
Copiers Phones 0.031385945
Copiers Storage 0.014515023
Copiers Supplies -0.005006422
Copiers Tables -0.027807886
Envelopes Accessories 0.005072469
Envelopes Appliances 0.004641907
Envelopes Art 0.057083045
Envelopes Binders 0.005020752
Envelopes Bookcases 0.022207002
Envelopes Chairs 0.024406547
Envelopes Copiers 0.042089045
Envelopes Envelopes 1
Envelopes Fasteners -0.000828438
Envelopes Furnishings -0.009827449
Envelopes Labels 0.099577973
Envelopes Machines -0.01207721
Envelopes Paper 0.059904982
Envelopes Phones -0.019199622
Envelopes Storage 0.070221013
Envelopes Supplies 0.068309046
Envelopes Tables -0.004030009
Fasteners Accessories -0.016277094
Fasteners Appliances -0.005270253
Fasteners Art 0.018721868
Fasteners Binders 0.054414029
Fasteners Bookcases 0.016284986
Fasteners Chairs 0.073677911
Fasteners Copiers -0.047913311
Fasteners Envelopes -0.000828438
Fasteners Fasteners 1
Fasteners Furnishings 0.019081525
Fasteners Labels -0.014907714
Fasteners Machines 0.029604901
Fasteners Paper 0.03925982
Fasteners Phones 0.043726273
Fasteners Storage 0.007706447
Fasteners Supplies -0.002799398
Fasteners Tables 0.073865545
Furnishings Accessories 0.06565245
Furnishings Appliances 0.051346672
Furnishings Art 0.006565294
Furnishings Binders 0.099256151
Furnishings Bookcases 0.035726847
Furnishings Chairs 0.046085839
Furnishings Copiers -0.014955727
Furnishings Envelopes -0.009827449
Furnishings Fasteners 0.019081525
Furnishings Furnishings 1
Furnishings Labels 0.045066785
Furnishings Machines 0.075362703
Furnishings Paper 0.027773254
Furnishings Phones 0.064851409
Furnishings Storage 0.057936723
Furnishings Supplies 0.069323073
Furnishings Tables 0.004155125
Labels Accessories -0.019181869
Labels Appliances -0.022621661
Labels Art 0.003414076
Labels Binders -0.024738337
Labels Bookcases 0.042978275
Labels Chairs 0.00102319
Labels Copiers -0.00626887
Labels Envelopes 0.099577973
Labels Fasteners -0.014907714
Labels Furnishings 0.045066785
Labels Labels 1
Labels Machines -0.02296394
Labels Paper 0.006263448
Labels Phones 0.027766206
Labels Storage 0.023579599
Labels Supplies -0.021290757
Labels Tables -0.009515662
Machines Accessories -0.016040587
Machines Appliances 0.01230748
Machines Art 0.008733338
Machines Binders 0.001186264
Machines Bookcases 0.001520128
Machines Chairs 0.026233235
Machines Copiers -0.005979818
Machines Envelopes -0.01207721
Machines Fasteners 0.029604901
Machines Furnishings 0.075362703
Machines Labels -0.02296394
Machines Machines 1
Machines Paper 0.012720274
Machines Phones -0.019591363
Machines Storage 0.03354372
Machines Supplies 0.010499225
Machines Tables -0.004884268
Paper Accessories 0.080919952
Paper Appliances 0.118245791
Paper Art 0.02882594
Paper Binders 0.055472425
Paper Bookcases 0.062690759
Paper Chairs 0.057336323
Paper Copiers -0.026558104
Paper Envelopes 0.059904982
Paper Fasteners 0.03925982
Paper Furnishings 0.027773254
Paper Labels 0.006263448
Paper Machines 0.012720274
Paper Paper 1
Paper Phones 0.197880453
Paper Storage 0.094134694
Paper Supplies 0.023183924
Paper Tables 0.059290883
Phones Accessories 0.04023628
Phones Appliances 0.050227712
Phones Art 0.017668011
Phones Binders 0.01098649
Phones Bookcases 0.056186361
Phones Chairs 0.122591026
Phones Copiers 0.031385945
Phones Envelopes -0.019199622
Phones Fasteners 0.043726273
Phones Furnishings 0.064851409
Phones Labels 0.027766206
Phones Machines -0.019591363
Phones Paper 0.197880453
Phones Phones 1
Phones Storage 0.060991934
Phones Supplies 0.061885764
Phones Tables 0.013782992
Storage Accessories -0.003158944
Storage Appliances 0.077248889
Storage Art 0.01709717
Storage Binders 0.032724401
Storage Bookcases -0.016740518
Storage Chairs 0.0592516
Storage Copiers 0.014515023
Storage Envelopes 0.070221013
Storage Fasteners 0.007706447
Storage Furnishings 0.057936723
Storage Labels 0.023579599
Storage Machines 0.03354372
Storage Paper 0.094134694
Storage Phones 0.060991934
Storage Storage 1
Storage Supplies 0.012411513
Storage Tables 0.028104193
Supplies Accessories -0.035282645
Supplies Appliances 0.018378453
Supplies Art 0.043781772
Supplies Binders 0.039290566
Supplies Bookcases 0.000111814
Supplies Chairs -0.027673276
Supplies Copiers -0.005006422
Supplies Envelopes 0.068309046
Supplies Fasteners -0.002799398
Supplies Furnishings 0.069323073
Supplies Labels -0.021290757
Supplies Machines 0.010499225
Supplies Paper 0.023183924
Supplies Phones 0.061885764
Supplies Storage 0.012411513
Supplies Supplies 1
Supplies Tables 0.011363052
Tables Accessories 0.128357646
Tables Appliances 0.025918683
Tables Art -0.015068255
Tables Binders 0.060496522
Tables Bookcases -0.02149225
Tables Chairs 0.042743928
Tables Copiers -0.027807886
Tables Envelopes -0.004030009
Tables Fasteners 0.073865545
Tables Furnishings 0.004155125
Tables Labels -0.009515662
Tables Machines -0.004884268
Tables Paper 0.059290883
Tables Phones 0.013782992
Tables Storage 0.028104193
Tables Supplies 0.011363052
Tables Tables 1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>
rect {
stroke: #E6E6E6;
stroke-width: 1.5px;
}
.axis text {
font-size: 9pt;
font-family: Consolas, courier;
fill: #000;
}
.axis path,
.axis line {
fill: none;
stroke: none;
}
.d3-tip {
line-height: 1;
font: 14px sans-serif;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: rgb(185, 185, 185);
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
#chart {
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
position: absolute;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<body>
<svg id="chart"></svg>
<script type="text/javascript">
var margin = { top: 100, right: 50, bottom: 50, left: 100 },
dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height")))
width = dim - margin.left - margin.right,
height = dim - margin.top - margin.bottom,
categories = 17,
gridSize = width / categories,
colors = ['rgb(84,48,5)','rgb(140,81,10)','rgb(191,129,45)','rgb(223,194,125)','rgb(246,232,195)','rgb(245,245,245)','rgb(199,234,229)','rgb(128,205,193)','rgb(53,151,143)','rgb(1,102,94)','rgb(0,60,48)'];
var xScale = d3.scale.ordinal().rangeBands([0, width]);
var yScale = d3.scale.ordinal().rangeBands([0, height]);
var xAxis = d3.svg.axis().orient("top");
var yAxis = d3.svg.axis().orient("left");
// Create the svg canvas
var svg = d3.select("#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<div><span>Relationship:</span> <span style='color:white'>" + d.axis2 + " and " + d.axis1 + "</span></div>" +
"<div><span>Correlation:</span> <span style='color:white'>" + d3.round(d.value, 3) + "</span></div>";
})
svg.call(tip);
d3.csv("correlationCoefficients.csv", format, function(error, data){
var color = d3.scale.quantile()
.domain([-0.05, 0.105])
.range(colors);
// Create the heatmap visualization
var viz = svg.selectAll(".correlation")
.data(data)
.enter().append("rect")
.attr("class", "correlation")
.attr("x", function(d, i) {return gridSize * Math.floor(i / categories) ; })
.attr("y", function(d, i) {return gridSize * (i % categories) ; })
.attr("width",gridSize)
.attr("height", gridSize)
.style("fill", function(d){return color(d.value) ; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
var names = [];
data.slice(0, categories).forEach(function(d){
names.push(d.axis2);
});
// Add the horizontal labels
xScale.domain(names);
xAxis.scale(xScale);
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.selectAll("text")
.attr("y", -10)
.attr("dy", ".5em")
.attr("x", 0)
.attr("transform", "rotate(-45)")
.style("text-anchor", "start")
.style("font-weight", "bold");
// Add the vertical labels
yScale.domain(names);
yAxis.scale(yScale);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.style("text-anchor", "end");
});
function resize() {
var dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height"))),
width = dim - margin.left - margin.right,
height = dim - margin.top - margin.bottom;
gridSize = width / 17;
// Update the range of the scale with new width/height
xScale.rangeBands([0, width]);
yScale.rangeBands([0, height]);
// Update the axis and text with the new scale
svg.select('.x.axis')
.call(xAxis)
.selectAll("text")
.attr("y", -10)
.attr("dy", ".5em")
.attr("x", 0)
.attr("transform", "rotate(-45)")
.style("text-anchor", "start")
svg.select('.y.axis')
.call(yAxis);
svg.selectAll('.correlation')
.attr("x", function(d, i) {return gridSize * Math.floor( i / categories ) ;})
.attr("y", function(d, i) {return gridSize * ( i % categories );})
.attr("width",gridSize)
.attr("height", gridSize);
}
d3.select(window).on('resize', resize);
resize();
function format(d) {
d.value = +d.value;
return d;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment