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: .3;
}
</style>
<body>
<div id="chart"></div>
<script src="//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'];
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);
})
</script>
d3.scatterplot.js
d3.scatterplot = function() {
function scatterplot(selection) {
selection.each(function(d, i) {
var data = (typeof(data) === "function" ? data(d) : d.data),
margin = (typeof(margin) === "function" ? margin(d) : d.margin),
axes = (typeof(axes) === "function" ? axes(d) : d.axes),
minmax = (typeof(minmax) === "function" ? minmax(d) : d.minmax),
size = (typeof(size) === "function" ? size(d) : d.size),
colors = (typeof(colors) === "function" ? colors(d) : d.colors)
var width = size['width'] - margin.left - margin.right,
height = size['height'] - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.domain([minmax['x']['min'], minmax['x']['max']])
.range([margin.left, margin.left+width])
var yScale = d3.scale.linear()
.domain([minmax['y']['min'], minmax['y']['max']])
.range([margin.top + height, margin.top])
var rScale = d3.scale.linear()
.domain([minmax['r']['min'],minmax['r']['max']])
.range([minmax['rrange']['min'],minmax['rrange']['max']]);
var element = d3.select(this);
if (d.i != d.j) {
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
element.append("rect")
.attr("class", "frame")
.attr("x", xScale(0))
.attr("y", yScale(1))
.attr("width", xScale(1) - xScale(0))
.attr("height", yScale(0) - yScale(1));
element.append("rect")
.attr("x", xScale(0))
.attr("y", yScale(1))
.attr("width", xScale(0.33) - xScale(0))
.attr("height", yScale(0) - yScale(1))
.attr("fill-opacity", 0.5)
.attr("fill",colors.x);
element.append("rect")
.attr("x", xScale(0))
.attr("y", yScale(0.33))
.attr("width", xScale(1) - xScale(0))
.attr("height", yScale(0) - yScale(0.33))
.attr("fill-opacity", 0.5)
.attr('fill',colors.y);
element.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.x);
})
.attr("cy", function(d) {
return yScale(d.y);
})
.attr("r", function(d) {
if (typeof(d.r) !== 'undefined')
return rScale(d.r);
else return 1;
})
.attr("class", function(d) {
if (typeof(d['class'] != 'undefined')) return d['class'];
else return 'circle';
})
} else {
element.append("text")
.attr("x",xScale(0.2))
.attr("y",yScale(0.6))
.attr("dy","1em")
.text(d.name.x);
}
});
}
scatterplot.data = function(value) {
if (!arguments.length) return value;
data = value;
return scatterplot;
};
scatterplot.margin = function(value) {
if (!arguments.length) return value;
margin = value;
return scatterplot;
};
scatterplot.axes = function(value) {
if (!arguments.length) return value;
axes = value;
return scatterplot;
};
scatterplot.minmax = function(value) {
if (!arguments.length) return value;
minmax = value;
return scatterplot;
};
scatterplot.size = function(value) {
if (!arguments.length) return value;
size = value;
return scatterplot;
};
return scatterplot;
}
distribution_functions.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 3px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.scale.linear()
.range([0, width])
.domain([0,1]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0,1]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return x(d.x); })
.y(function(d) {
return y(d.y); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("quantiles.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'];
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width - 50)
.attr("y", -50)
.attr("dy", "1em")
.attr("font-size", "2em")
.style("text-anchor", "end")
.text("Distance (= 1 - Match)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "1em")
.attr("font-size", "2em")
.style("text-anchor", "end")
.text("Distribution function");
selected.forEach(function(d) {
lin = []
i = 0;
data.forEach(function(dd) {
lin.push({'y':parseFloat(dd.quantile), 'x': parseFloat(dd[d])});
i++;
});
svg.append("path")
.datum(lin)
.attr("class", "line")
.attr("stroke", n2c[d])
.attr("d", line);
});
svg.append("path")
.datum([{'x':0.33,'y':0},{'x':0.33,'y':1}])
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-width", "9px")
.attr("stroke-opacity", 0.3)
.attr("stroke-dasharray","10,10")
.attr("d", line);
});
</script>