Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 14:01
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 danharr/a28fe9fff8eda0eefc56 to your computer and use it in GitHub Desktop.
Save danharr/a28fe9fff8eda0eefc56 to your computer and use it in GitHub Desktop.
Download ZIP
scatter matrix training
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;
}
.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="http://d3js.org/d3.v3.min.js"></script>
<script>
//data - comparison of android devices
//original http://bl.ocks.org/mbostock/4063663
var width = 960,
size = 200,
padding = 19.5;
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(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var color = d3.scale.category10();
var zz;
d3.csv("phones.csv", function(error, data) {
var domainByTrait = {},
traits = d3.keys(data[0]).filter(function(d) { return d !== "type" && d !== "model"; }),
n = traits.length;
traits.forEach(function(trait) {
domainByTrait[trait] = d3.extent(data, function(d) { return +d[trait]; });
console.log(trait + ":" + domainByTrait[trait]);
});
zz=domainByTrait;
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(traits)
.enter().append("g")
.attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
.each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });
svg.selectAll(".y.axis")
.data(traits)
.enter().append("g")
.attr("class", "y axis")
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
.each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); });
var cell = svg.selectAll(".cell")
.data(cross(traits, traits))
.enter().append("g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
.each(plot);
// Titles for the diagonal.
cell.append("text")
.attr("x", padding)
.attr("y", padding)
.attr("dy", ".71em")
.style("font-size",10)
.text(function(d) { return d.x + " vs " + d.y; });
cell.call(brush);
function plot(p) {
var cell = d3.select(this);
x.domain(domainByTrait[p.x]);
y.domain(domainByTrait[p.y]);
cell.append("rect")
.attr("class", "frame")
.attr("x", padding / 2)
.attr("y", padding / 2)
.attr("width", size - padding)
.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", 5)
.style("opacity",0.5)
.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(domainByTrait[p.x]);
y.domain(domainByTrait[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;
}
d3.select(self.frameElement).style("height", size * n + padding + 20 + "px");
});
</script>
Raw
phones.csv
display ram internal storage camera type model
71 256 0 3.2 Acer beTouch E110
89 256 0 5 Acer Liquid A1(S100)
89 512 0 5 Acer Liquid E
89 512 0 5 Acer Liquid E Ferrari
91 512 0 5 Acer Liquid Metal
94 512 0 5 Acer Acer Stream S110
94 512 1 5 Acer Liquid Glow[4]
81 192 0 3.15 HTC Dream
81 288 0.5 3.2 HTC Magic
81 384 0 5 HTC Legend
81 288 0 5 HTC Hero, G2 Touch, Droid Eris
94 512 0.5 5 HTC Nexus One
94 576 0 5 HTC Desire
110 768 0 8 HTC Desire HD(Inspire 4G in the US)
94 512 0 5 HTC Desire Z
94 768 0 5 HTC Desire S
100 768 1 8 HTC Incredible S
110 768 1 8 HTC Sensation
110 1024 0 5 HTC Evo 3D
110 768 4 8 HTC Sensation XE
120 768 16 8 HTC Sensation XL
110 1024 16 8 HTC Amaze 4G
110 1024 16 8 HTC Vivid
110 1024 16 8 HTC Rezound
81 512 0.15 3.15 HTC Explorer
81 512 4 5 HTC Desire C
100 512 4 5 HTC Desire V
94 512 4 5 HTC One V
110 1024 16 8 HTC One S
120 1024 32 8 HTC One X
120 1024 16 8 HTC One XL
120 1024 16 8 HTC Evo 4G LTE
100 768 4 5 HTC Desire X
120 1024 32 8 HTC One X+
120 2048 64 4 HTC HTC One
130 2048 32 4 HTC HTC One M8
110 1024 16 4 HTC HTC One Mini
130 2048 16 8 HTC Butterfly
100 512 8 8 LG G2X
81 512 0 3.2 LG LS670 Optimus S
89 512 0 5 LG LU2300 Optimus Q
81 512 0 3.2 LG P509 Optimus T
81 512 0 3.2 LG VM670 Optimus V
81 512 0 3 LG VS740 (US740),
100 512 0 5 LG P970 Optimus Black
100 512 8 8 LG Optimus 2X
110 512 8 5 LG Optimus 3D
110 1024 8 8 LG Prada 3.0
110 1024 4 8 LG Optimus LTE
81 384 1 3.15 LG Optimus L3
100 512 4 5 LG Optimus L5
110 512 4 5 LG Optimus L7
120 1024 4 5 LG Optimus L9
130 1024 32 8 LG Optimus Vu
120 1024 16 8 LG Optimus 4X HD
120 2048 32 13 LG Optimus G
130 2048 32 13 LG G2
120 2048 16 8 LG Google Nexus 4
126 2048 32 8 LG Google Nexus 5
110 1024 8 8 Motorola Atrix 2, MB865
100 1024 16 5 Motorola Atrix 4G, MB860
110 1024 8 8 Motorola Atrix HD, MB886
94 256 0 5 Motorola Droid, Milestone
110 512 8 8 Motorola Droid X, Motoroi X, Milestone X
110 512 8 8 Motorola Motorola Droid X2
94 512 8 5 Motorola Droid 2,
100 512 16 8 Motorola Motorola Droid 3,
94 512 2 5 Motorola Motorola Defy
110 1024 16 8 Motorola Droid Bionic
79 512 4 5 Motorola Motorola Admiral
100 1024 8 8 Motorola Droid 4[21]
110 1024 16 8 Motorola Droid RAZR(XT910)
110 1024 16 8 Motorola Droid RAZR MAXX
110 1024 8 8 Motorola Droid RAZR I
120 1024 16 8 Motorola Droid RAZR HD
120 2048 32 10.5 Motorola Moto X
114 1024 16 1.3 Motorola Moto G
114 1024 16 1.3 Motorola Moto G 4G LTE
66 256 0.19 2 Samsung Galaxy Y Pro (GT-B5510)
76 290 0.19 2 Samsung Galaxy Y(GT-S5360)
89 256 0.19 3 Samsung Admire/?Vitality (SCH-R720)
81 256 0.5 3.2 Samsung Moment
71 256 0.5 2 Samsung Galaxy 5/?Galaxy Europa/?Galaxy 550/?Corby Android(i5500/?i5503)
81 256 0 3.2 Samsung Spica/?Galaxy Spica/?Galaxy Portal
81 256 0 3.2 Samsung Galaxy 3/?Galaxy Apollo/?Galaxy Mini/?Galaxy 580
110 512 2 8 Samsung Droid Charge/?Galaxy S Aviator/?Galaxy S Lightray 4G
84 280 0.18 5 Samsung Galaxy Fit
110 512 16 8 Samsung Infuse 4G
100 512 16 5 Samsung GoogleNexus S
76 256 0.5 3.2 Samsung M910 Intercept,
89 256 0.5 3.2 Samsung Samsung Transform
80 384 0.16 3.15 Samsung Galaxy Mini
83 512 4 3.15 Samsung Galaxy Mini 2
89 512 0.25 5 Samsung Galaxy Ace
93 512 3 5 Samsung Galaxy Ace Plus
97 768 4 5 Samsung Galaxy Ace 2
94 512 4 5 Samsung i8150
76 512 2 2 Samsung GT-B5330, Galaxy Chat
118 1024 32 5 Samsung Galaxy Nexus
100 768 4 5 Samsung S7562 Galaxy S Duos
100 512 16 0 Samsung i9000 Galaxy S,
100 512 8 5 Samsung i9001 Galaxy S Plus
100 768 16 5 Samsung i9070 Galaxy S Advance
108 1024 32 8 Samsung i9100 Galaxy S II
120 1024 32 8 Samsung i9300 Galaxy S III
127 2048 32 13 Samsung i9505 Galaxy S4 (with LTE)
130 2048 32 16 Samsung Galaxy S5
130 1024 32 8 Samsung N7000 Galaxy Note
140 2048 32 8 Samsung N7100 Galaxy Note II
140 3072 64 13 Samsung Galaxy Note 3
100 1024 16 5 Samsung Galaxy S III mini
110 1536 8 8 Samsung Galaxy S4 mini
110 1024 8 5 Samsung Galaxy Express
118 1024 16 8 Samsung Galaxy Premier
190 1536 16 8 Samsung Galaxy Mega5.8
233 1536 16 8 Samsung Galaxy Mega6.3
81 512 2.5 3.15 Sony Xperia tipo
89 512 4 5 Sony Xperia Miro
89 512 2.5 3.15 Sony Xperia E
100 512 0.3 5 Sony Xperia Neo L
89 512 8 5 Sony Xperia go
94 512 8 5 Sony Xperia sola
89 512 8 5 Sony Xperia U
100 1024 16 8 Sony Xperia P
120 1024 16 12 Sony Xperia ionLTE
110 1024 16 12 Sony Xperia acro S
110 1024 1.5 1 Sony Xperia S
110 1024 1.5 12 Sony Xperia SL
100 512 4 5 Sony Xperia J
110 1024 8 13 Sony Xperia V
120 1024 16 13 Sony Xperia T
130 2048 16 13.1 Sony Xperia Z
130 2048 16 13.1 Sony Xperia ZL
116 2048 8 13.1 Sony Xperia ZR
160 2048 16 8 Sony Xperia Z Ultra
130 2048 16 20.7 Sony Xperia Z1
120 1024 8 8 Sony Xperia SP
110 1024 8 8 Sony Xperia L
100 1024 4 5 Sony Xperia M
94 512 2 8 Sony Ericsson Xperia Pro
110 512 1 8.1 Sony Ericsson Xperia arc
94 512 1 8.1 Sony Ericsson Xperia neo
81 512 0 5 Sony Ericsson Live with Walkman
100 512 1 5.1 Sony Ericsson Xperia Play
84 512 1 8.1 Sony Ericsson Xperia ray
110 512 0 8.1 Sony Ericsson Xperia acro SO-02C
110 512 0 8.1 Sony Ericsson Xperia acro IS11S
65 256 0.25 5 Sony Ericsson Xperia X10 Mini Pro
100 384 1 8 Sony Ericsson Xperia X10
76 168 0.12 3.2 Sony Ericsson Xperia X8
89 192 0.2 3.2 Huawei T-Mobile Pulse,
89 512 4 3.2 Huawei Fusion II U8665
81 256 0.25 3.2 Huawei Evolución UM840
71 256 0.5 3.2 Huawei U8120 (Joy), Vodafone 845
89 256 0.5 3.2 Huawei U8650 Sonic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment