Based on the orginal made here: http://bl.ocks.org/mbostock/4063663
<!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="//d3js.org/d3.v3.min.js"></script>
<script>
//data - comparison of android devices
//original //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>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