xxxxxxxxxx
<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: .3;
}
</style>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="./d3.scatterplot.js"></script>
<script>
var width = 960,
size = 150,
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();
d3.csv("distances.csv", function(error, data) {
n2c = {
'ano':'#5f91b3',
'ceska-piratska-strana':'black',
'cssd':'orange',
'hnuti-usvit-prime-demokracie':'#91b82e',
'kdu-csl':'yellow',
'komunisticka-strana-cech-a-moravy':'red',
'obcanska-demokraticka-strana-ods':'blue',
'strana-svobodnych-obcanu':'#040',
'strana-zelenych':'green',
'top-09':'#660066',
}
n2n = {
'ano':'ANO',
'ceska-piratska-strana':'Piráti',
'cssd':'ČSSD',
'hnuti-usvit-prime-demokracie':'Úsvit',
'kdu-csl':'KDU-ČSL',
'komunisticka-strana-cech-a-moravy':'KSČM',
'obcanska-demokraticka-strana-ods':'ODS',
'strana-svobodnych-obcanu':'Svobodní',
'strana-zelenych':'Zelení',
'top-09':'TOP 09',
}
selected = ['ano','ceska-piratska-strana','cssd','hnuti-usvit-prime-demokracie','kdu-csl','komunisticka-strana-cech-a-moravy','obcanska-demokraticka-strana-ods','strana-svobodnych-obcanu','strana-zelenych','top-09'];
//selected = ['ano','ceska-piratska-strana','cssd','strana-zelenych','strana-svobodnych-obcanu','top-09'];
w = 600;
h = 600;
gap = 10;
csize = (w-(selected.length - 1)*gap)/selected.length - gap;
charts = [];
for (i=0;i<selected.length;i++) {
for (j=0;j<selected.length;j++) {
if (j<=i) {
cdata = [];
data.forEach(function(d) {
cdata.push({"x":d[selected[i]],"y":d[selected[j]]});
});
charts.push({
'data': cdata,
'margin': {'left': i*(csize+gap),'top':j*(csize+gap),'right':w - ((i)*(csize+gap) + csize),'bottom': h - (j*(csize+gap)+csize)},
'axes': {'labels': {'x': '', 'y': ''}},
'minmax': {'x': {'min': 0, 'max': 1},'y': {'min':0,'max':1},
'r':{'min':0,'max':1}, 'rrange':{'min':0,'max':1}},
'size': {'width': w, 'height': h},
'colors': {'x': n2c[selected[i]], 'y': n2c[selected[j]]},
'i': i,
'j': j,
'name': {'x': n2n[selected[i]], 'y': n2n[selected[j]]},
})
}
}
}
var svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
var sp = d3.scatterplot()
.data(function(d) {return d.data})
.margin(function(d) {return d.margin})
.axes(function(d) {return d.axes})
.minmax(function(d) {return d.minmax})
.size(function(d) {return d.size});
var scatter = svg.selectAll(".scatterplot")
.data(charts)
.enter()
.append("svg:g")
.call(sp);
})
/*
xAxis.tickSize(size * n);
yAxis.tickSize(-size * n);
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.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; });
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", 3)
.style("fill", function(d) { return color(d.species); });
}
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>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js