Skip to content

Instantly share code, notes, and snippets.

@wenzhaoduo

wenzhaoduo/.block

Last active February 23, 2017 16:11
Show Gist options
  • Save wenzhaoduo/c42883c1ac30c21b597c09256c7051cf to your computer and use it in GitHub Desktop.
Save wenzhaoduo/c42883c1ac30c21b597c09256c7051cf to your computer and use it in GitHub Desktop.
Download ZIP
Scatter Plot Matrix
Raw
.block
license: mit
Raw
facebook.csv
Type Post Month Post Weekday Post Hour
Photo 12 4 3
Status 12 3 10
Photo 12 3 3
Photo 12 2 10
Photo 12 2 3
Status 12 1 9
Photo 12 1 3
Photo 12 7 9
Status 12 7 3
Photo 12 6 10
Status 12 5 10
Photo 12 5 10
Photo 12 5 10
Photo 12 5 3
Photo 12 4 5
Status 12 3 10
Photo 12 3 3
Photo 12 2 12
Status 12 2 3
Photo 12 1 11
Photo 12 1 3
Photo 12 7 10
Link 12 7 10
Photo 12 7 3
Status 12 6 10
Status 12 6 3
Status 12 5 11
Photo 12 5 3
Photo 12 5 3
Video 12 4 11
Photo 12 4 2
Photo 12 3 10
Photo 12 3 3
Photo 12 2 9
Photo 12 2 3
Photo 12 1 11
Photo 12 1 3
Photo 12 7 10
Status 12 7 9
Photo 12 7 3
Status 12 6 11
Link 12 6 3
Photo 12 5 10
Link 12 5 3
Photo 12 4 11
Link 12 4 3
Status 12 3 11
Link 12 3 2
Photo 12 2 11
Link 12 2 2
Photo 11 1 9
Photo 11 1 3
Photo 11 7 9
Photo 11 7 3
Photo 11 6 10
Video 11 6 2
Photo 11 5 11
Photo 11 5 3
Photo 11 4 10
Photo 11 4 3
Photo 11 3 11
Photo 11 3 2
Photo 11 2 10
Photo 11 2 3
Photo 11 1 10
Photo 11 1 3
Photo 11 7 11
Photo 11 7 3
Photo 11 6 11
Photo 11 6 3
Photo 11 5 10
Video 11 5 3
Status 11 4 11
Photo 11 4 2
Video 11 3 11
Photo 11 3 2
Photo 11 3 2
Photo 11 1 10
Photo 11 1 3
Photo 11 7 12
Status 11 7 3
Photo 11 6 10
Photo 11 6 3
Photo 11 5 10
Status 11 5 2
Photo 11 4 9
Link 11 4 3
Photo 11 3 10
Photo 11 3 3
Photo 11 2 11
Photo 11 2 3
Photo 11 1 9
Photo 11 1 3
Photo 11 7 9
Photo 11 7 4
Photo 10 6 10
Photo 10 6 3
Photo 10 5 11
Status 10 5 3
Photo 10 4 10
Photo 10 4 9
Photo 10 4 3
Photo 10 3 10
Photo 10 3 4
Photo 10 2 11
Photo 10 2 4
Photo 10 1 11
Status 10 1 4
Photo 10 7 9
Status 10 7 3
Photo 10 6 10
Photo 10 6 8
Photo 10 6 4
Photo 10 1 3
Photo 10 7 13
Photo 10 7 12
Photo 10 7 12
Photo 10 7 11
Photo 10 7 10
Photo 10 7 10
Photo 10 7 9
Status 10 7 9
Photo 10 7 8
Photo 10 7 7
Photo 10 7 6
Photo 10 7 5
Photo 10 7 3
Photo 10 6 13
Photo 10 6 13
Photo 10 6 12
Photo 10 6 11
Photo 10 6 9
Photo 10 6 9
Photo 10 6 8
Photo 10 6 6
Photo 10 6 2
Link 10 5 10
Photo 10 5 8
Status 10 5 3
Photo 10 4 10
Link 10 4 3
Status 10 3 10
Status 10 3 2
Photo 10 2 10
Photo 10 2 3
Photo 10 1 10
Photo 10 1 3
Photo 10 7 10
Status 10 7 4
Link 10 6 11
Photo 10 6 4
Photo 10 5 11
Photo 10 5 4
Photo 10 4 10
Photo 10 4 1
Photo 9 3 7
Photo 9 2 11
Photo 9 2 2
Photo 9 1 10
Photo 9 1 3
Photo 9 7 9
Photo 9 7 3
Photo 9 6 10
Status 9 6 4
Photo 9 5 10
Photo 9 5 3
Photo 9 4 10
Photo 9 4 2
Photo 9 3 10
Photo 9 3 2
Photo 9 2 9
Photo 9 2 2
Status 9 1 10
Photo 9 1 4
Photo 9 7 3
Status 9 6 10
Photo 9 6 3
Photo 9 5 11
Photo 9 5 2
Photo 9 4 10
Status 9 4 4
Photo 9 3 10
Photo 9 3 2
Video 9 2 10
Photo 9 2 3
Photo 9 1 10
Photo 9 1 6
Photo 9 7 10
Photo 9 7 4
Photo 9 2 10
Photo 9 2 3
Photo 8 1 10
Photo 8 1 4
Photo 8 7 10
Photo 8 7 3
Photo 8 6 10
Photo 8 6 8
Photo 8 5 13
Photo 8 4 9
Photo 8 4 10
Photo 8 4 3
Photo 8 3 9
Status 8 3 2
Photo 8 2 10
Photo 8 2 3
Photo 8 1 12
Photo 8 1 3
Photo 8 7 10
Photo 8 7 3
Photo 8 6 10
Photo 8 6 3
Photo 8 5 10
Photo 8 5 1
Photo 8 4 11
Photo 8 4 3
Photo 8 3 10
Photo 8 3 4
Status 8 2 12
Photo 8 2 7
Photo 8 1 12
Photo 8 1 4
Photo 8 7 10
Status 8 7 4
Status 8 6 10
Photo 8 6 6
Status 7 5 14
Photo 7 5 8
Photo 7 4 10
Photo 7 4 3
Photo 7 3 13
Photo 7 2 23
Photo 7 2 13
Status 7 2 6
Photo 7 1 11
Photo 7 1 5
Status 7 7 10
Photo 7 7 4
Photo 7 6 10
Photo 7 6 2
Photo 7 5 11
Photo 7 5 3
Photo 7 4 11
Status 7 4 6
Video 7 3 11
Photo 7 3 5
Photo 7 2 13
Photo 7 2 8
Photo 7 1 12
Photo 7 1 6
Photo 7 7 11
Photo 7 7 6
Photo 7 6 11
Photo 7 6 5
Status 7 5 12
Photo 7 5 3
Photo 7 4 12
Photo 7 4 6
Photo 7 3 13
Photo 7 3 1
Photo 7 2 13
Photo 7 2 7
Photo 7 1 13
Photo 7 1 3
Photo 7 7 11
Photo 7 7 3
Photo 7 6 13
Photo 7 6 3
Status 7 5 10
Photo 7 5 3
Photo 7 4 9
Photo 7 4 5
Photo 7 3 10
Photo 7 3 3
Photo 7 4 12
Photo 7 4 3
Status 7 3 13
Photo 7 3 4
Video 6 2 13
Photo 6 2 9
Photo 6 2 3
Photo 6 1 12
Photo 6 1 4
Status 6 7 11
Photo 6 7 4
Photo 6 6 12
Status 6 6 4
Photo 6 5 11
Photo 6 4 22
Photo 6 4 12
Photo 6 4 11
Photo 6 4 7
Photo 6 4 3
Photo 6 3 11
Photo 6 3 3
Photo 6 2 13
Photo 6 2 2
Photo 6 1 14
Photo 6 1 3
Photo 6 7 11
Photo 6 7 4
Photo 6 6 9
Photo 6 6 2
Photo 6 5 13
Photo 6 5 3
Photo 6 4 12
Photo 6 4 2
Photo 6 3 13
Photo 6 3 3
Photo 6 2 13
Photo 6 2 3
Photo 6 1 13
Photo 6 1 3
Photo 6 7 10
Photo 6 7 3
Photo 6 6 12
Photo 6 6 4
Photo 6 5 12
Photo 6 5 3
Photo 6 4 13
Photo 6 4 5
Photo 6 3 11
Photo 6 2 13
Photo 6 2 5
Photo 6 1 10
Photo 6 1 3
Photo 6 1 3
Photo 5 7 14
Photo 5 5 9
Photo 5 4 12
Photo 5 4 4
Photo 5 3 12
Photo 5 3 5
Photo 5 2 12
Photo 5 2 1
Status 5 1 2
Photo 5 7 2
Photo 5 6 14
Photo 5 6 6
Photo 5 5 10
Photo 5 4 10
Photo 5 4 4
Photo 5 3 11
Photo 5 2 11
Photo 5 1 13
Link 5 1 2
Photo 5 7 13
Photo 5 7 2
Photo 5 6 13
Photo 5 6 8
Photo 5 5 13
Photo 5 5 9
Photo 5 4 13
Status 5 4 3
Photo 5 3 7
Photo 5 2 14
Photo 5 2 8
Photo 5 1 13
Photo 5 1 3
Photo 5 7 14
Photo 5 7 2
Photo 5 6 9
Photo 5 6 3
Status 5 5 7
Photo 4 4 15
Photo 4 3 13
Photo 4 3 8
Photo 4 2 13
Photo 4 2 2
Photo 4 1 2
Photo 4 7 3
Photo 4 6 14
Status 4 6 3
Link 4 5 7
Photo 4 5 5
Photo 4 4 12
Photo 4 4 7
Photo 4 3 7
Photo 4 2 13
Photo 4 2 6
Photo 4 1 14
Photo 4 7 14
Photo 4 6 20
Photo 4 6 13
Photo 4 6 3
Photo 4 5 13
Photo 4 5 7
Photo 4 4 3
Photo 4 3 13
Photo 4 3 8
Photo 4 2 13
Photo 4 2 2
Photo 4 1 13
Photo 4 1 2
Photo 4 7 14
Photo 4 7 13
Photo 4 6 9
Photo 4 6 3
Photo 4 5 9
Photo 4 5 3
Photo 4 4 13
Photo 4 4 5
Photo 4 3 13
Photo 4 3 4
Link 4 2 6
Photo 4 1 3
Photo 4 7 10
Photo 4 7 3
Photo 4 6 9
Link 4 6 4
Photo 4 5 13
Photo 4 5 3
Photo 4 4 13
Photo 4 4 3
Photo 3 5 14
Photo 3 4 14
Photo 3 4 7
Status 3 3 15
Photo 3 3 10
Photo 3 3 10
Photo 3 3 4
Photo 3 2 12
Photo 3 2 3
Photo 3 1 19
Photo 3 1 18
Photo 3 1 18
Link 3 1 3
Photo 3 7 18
Photo 3 7 17
Photo 3 7 15
Photo 3 7 15
Link 3 7 14
Photo 3 7 12
Photo 3 6 17
Photo 3 6 17
Photo 3 6 15
Photo 3 6 15
Photo 3 6 13
Photo 3 6 10
Link 3 6 6
Photo 3 6 3
Photo 3 5 10
Photo 3 5 4
Photo 3 4 13
Photo 3 2 9
Photo 3 2 5
Photo 3 1 13
Photo 3 1 2
Photo 3 7 10
Photo 3 7 5
Photo 2 6 13
Photo 2 6 6
Photo 2 5 12
Photo 2 5 6
Photo 2 4 12
Photo 2 4 3
Photo 2 3 13
Photo 2 3 9
Photo 2 3 6
Photo 2 2 13
Photo 2 2 3
Photo 2 1 13
Photo 2 1 4
Photo 2 7 13
Photo 2 7 2
Photo 2 6 13
Photo 2 6 3
Photo 2 5 13
Photo 2 5 3
Photo 2 4 12
Photo 2 4 3
Link 2 3 13
Photo 2 3 3
Photo 2 2 13
Photo 2 2 4
Photo 2 1 12
Photo 1 6 16
Photo 1 6 10
Link 1 6 4
Photo 1 5 13
Photo 1 5 4
Photo 1 4 11
Link 1 4 4
Photo 1 3 10
Photo 1 3 3
Photo 1 2 7
Link 1 2 2
Photo 1 1 12
Photo 1 1 2
Photo 1 7 10
Photo 1 7 2
Photo 1 6 11
Photo 1 6 3
Link 1 5 11
Photo 1 1 2
Photo 1 7 10
Photo 1 7 2
Photo 1 5 8
Photo 1 5 2
Photo 1 4 11
Photo 1 4 4
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
padding: 10px;
}
.axis,
.frame {
shape-rendering: crispEdges;
}
.axis line {
stroke: #ddd;
}
.axis path {
display: none;
}
.cell text {
font-weight: bold;
text-transform: capitalize;
}
.frame {
fill: none;
stroke: #aaa;
}
circle {
fill-opacity: .7;
}
circle.hidden {
fill: #ccc !important;
}
.extent {
fill: #000;
fill-opacity: .125;
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
//http://bl.ocks.org/wrobstory/7612013
d3.helper = {};
d3.helper.tooltip = function(){
var tooltipDiv;
var bodyNode = d3.select('body').node();
function tooltip(selection){
selection.on('mouseover.tooltip', function(pD, pI){
// Clean up lost tooltips
d3.select('body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body')
.append('div')
.attr('class', 'tooltip');
console.log(tooltipDiv);
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 10)+'px',
top: (absoluteMousePos[1] - 40)+'px',
'background-color': '#d8d5e4',
width: '65px',
height: '30px',
padding: '5px',
position: 'absolute',
'z-index': 1001,
'box-shadow': '0 1px 2px 0 #656565'
});
var first_line = '<p>X-Value: ' + pD['Type'] + '</p>';
var second_line = '<p>Y-Value: ' + pD['Post Month'] + '</p>';
tooltipDiv.html(first_line + second_line)
})
.on('mousemove.tooltip', function(pD, pI){
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 10)+'px',
top: (absoluteMousePos[1] - 40)+'px'
});
})
.on('mouseout.tooltip', function(pD, pI){
// Remove tooltip
tooltipDiv.remove();
});
}
tooltip.attr = function(_x){
if (!arguments.length) return attrs;
attrs = _x;
return this;
};
tooltip.style = function(_x){
if (!arguments.length) return styles;
styles = _x;
return this;
};
return tooltip;
};
var width = 960,
size = 230,
padding = 20;
var x = d3.scale.linear()
.range([padding / 2, size - padding / 2]);
var y = d3.scale.linear()
.range([size - padding / 2, padding / 2]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(7);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(7);
var color = d3.scale.category10();
d3.csv("facebook.csv", function(data) {
// transfer value from string to number
_.each(data, function (ele) {
_.each(Object.keys(ele), function (key) {
if (key != 'Type') {
ele[key] = +ele[key];
}
});
});
var attr2Domain = {},
attrs = _.filter(d3.keys(data[0]), function(key) { return key !== "Type"; }),
n = attrs.length;
_.each(attrs, function(attr) {
attr2Domain[attr] = d3.extent(data, function(ele) { return ele[attr]; });
});
xAxis.tickSize(size * n);
yAxis.tickSize(-size * n);
var brush = d3.svg.brush()
.x(x)
.y(y)
.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend);
var svg = d3.select("body").append("svg")
.attr("width", size * n + padding)
.attr("height", size * n + padding)
.append("g")
.attr("transform", "translate(" + padding + "," + padding / 2 + ")");
svg.selectAll(".x.axis")
.data(attrs)
.enter().append("g")
.attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
.each(function(d) { x.domain(attr2Domain[d]); d3.select(this).call(xAxis); });
svg.selectAll(".y.axis")
.data(attrs)
.enter().append("g")
.attr("class", "y axis")
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
.each(function(d) { y.domain(attr2Domain[d]); d3.select(this).call(yAxis); });
var cell = svg.selectAll(".cell")
.data(cross(attrs, attrs))
.enter().append("g")
.attr("class", "cell")
.attr("transform", function(d) {
return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")";
});
// Titles for the diagonal.
cell.filter(function(d) { return d.i === d.j; }).append("text")
.attr("x", padding)
.attr("y", padding)
.attr("dy", ".71em")
.text(function(d) { return d.x; });
cell.call(brush);
cell.each(plot);
function plot(p) {
var cell = d3.select(this);
x.domain(attr2Domain[p.x]);
y.domain(attr2Domain[p.y]);
cell.append("rect")
.attr("class", "frame")
.attr("x", padding / 2)
.attr("y", padding / 2)
.attr("width", size - padding)
.style("pointer-events", "none")
.attr("height", size - padding);
cell.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function (d) {
return x(d[p.x]);
})
.attr("cy", function (d) {
return y(d[p.y]);
})
.attr("r", 4)
.call(d3.helper.tooltip())
.style("fill", function (d) {
return color(d.Type);
});
}
var brushCell;
// Clear the previously-active brush, if any.
function brushstart(p) {
if (brushCell !== this) {
d3.select(brushCell).call(brush.clear());
x.domain(attr2Domain[p.x]);
y.domain(attr2Domain[p.y]);
brushCell = this;
}
}
// Highlight the selected circles.
function brushmove(p) {
var e = brush.extent();
svg.selectAll("circle").classed("hidden", function(d) {
return e[0][0] > d[p.x] || d[p.x] > e[1][0]
|| e[0][1] > d[p.y] || d[p.y] > e[1][1];
});
}
// If the brush is empty, select all circles.
function brushend() {
if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
}
});
function cross(a, b) {
var c = [], n = a.length, m = b.length, i, j;
for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
return c;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment