Published
Edited
Feb 27, 2019
{
const svg = d3.select(DOM.svg(width, width))
.attr("viewBox", `${-padding} 0 ${width} ${width}`)
.style("max-width", "100%")
.style("height", "auto");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const cell = svg.append("g")
.selectAll("g")
.data(d3.cross(d3.range(columns.length), d3.range(columns.length)))
.join("g")
.attr("transform", ([i, j]) => `translate(${(columns.length - i - 1) * size},${j * size})`);
cell.append("rect")
.attr("fill", "none")
.attr("stroke", "#aaa")
.attr("x", padding / 2 + 0.5)
.attr("y", padding / 2 + 0.5)
.attr("width", size - padding)
.attr("height", size - padding);
cell.each(function([i, j]) {
d3.select(this).selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => x[i](d[columns[i]]))
.attr("cy", d => y[j](d[columns[j]]))
.attr("r", 3.5)
.attr("fill-opacity", 0.7)
.attr("fill", d => z(d.species));
});
svg.append("g")
.style("font", "bold 10px sans-serif")
.selectAll("text")
.data(columns)
.join("text")
.attr("transform", (d, i) => `translate(${(columns.length - i - 1) * size},${i * size})`)
.attr("x", padding)
.attr("y", padding)
.attr("dy", ".71em")
.text(d => d);
return svg.node();
}
x = columns.map(c => d3.scaleLinear()
.domain(d3.extent(data, d => d[c]))
.rangeRound([padding / 2, size - padding / 2]))
y = x.map(x => x.copy().range([size - padding / 2, padding / 2]))
z = d3.scaleOrdinal()
.domain(data.map(d => d.species))
.range(d3.schemeCategory10)
xAxis = {
const axis = d3.axisBottom()
.ticks(6)
.tickSize(size * columns.length);
return g => g.selectAll("g").data(x).enter().append("g")
.attr("transform", (d, i) => `translate(${(columns.length - i - 1) * size},0)`)
.each(function(d) { return d3.select(this).call(axis.scale(d)); })
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").attr("stroke", "#ddd"));
}
yAxis = {
const axis = d3.axisLeft()
.ticks(6)
.tickSize(-size * columns.length);
return g => g.selectAll("g").data(y).enter().append("g")
.attr("transform", (d, i) => `translate(0,${i * size})`)
.each(function(d) { return d3.select(this).call(axis.scale(d)); })
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").attr("stroke", "#ddd"));
}
data = d3.csv("https://gist.githubusercontent.com/sui414/0912599043e8526e4753ecceb133e6d3/raw/5f952995eb8d0804c90d9c83869c6c4f0cc74395/d3_sacatterplot_mattrix(simplified).csv", d3.autoType)
columns = data.columns.filter(d => d !== 'species')
width = 964
size = (width - (columns.length + 1) * padding) / columns.length + padding
padding = 20
d3 = require("d3@^5.9")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
