Published
Edited
Apr 11, 2020
{
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(${i * size},${j * size})`);
cell
.append("rect")
.attr("fill", "#817e8c")
.attr("fill-opacity", 0.1)
.attr("stroke", "none")
.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)
.join("circle")
.attr("cx", d => x[i](d[columns[i]]))
.attr("cy", d => y[j](d[columns[j]]));
});
const circle = cell
.selectAll("circle")
.attr("r", d =>
Math.floor(Math.sqrt(d.x * d.x + d.y * d.y + d.z * d.z) / 2)
)
.attr("fill", d => z(d.dog))
.attr("stroke", d => t(d.temp))
.attr("stroke-width", 1)
.attr("clip-path", d => moons[d.moon]);
svg
.append("g")
.style("font", "bold 10px sans-serif")
.selectAll("text")
.data(columns)
.join("text")
.attr("transform", (d, i) => `translate(${i * 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.dog))
.range(d3.schemeAccent)
t = d3
.scaleOrdinal()
.domain(data.map(d => d.temp))
.range(d3.schemeRdBu[4])
xAxis = {
const axis = d3
.axisBottom()
.ticks(6)
.tickSize(size * columns.length);
return g =>
g
.selectAll("g")
.data(x)
.join("g")
.attr("transform", (d, i) => `translate(${i * 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", "#bbb"));
}
yAxis = {
const axis = d3
.axisLeft()
.ticks(6)
.tickSize(-size * columns.length);
return g =>
g
.selectAll("g")
.data(y)
.join("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", "#bbb"));
}
data = d3.csvParse(await FileAttachment("fake_data@2.csv").text(), d3.autoType)
columns = data.columns.filter(
d =>
d === "alfa" ||
d === "bravo" ||
d === "charlie" ||
d === "delta" ||
d === "echo"
)
moons = ({
full: "none",
gibbous: "ellipse(50% 70% at 30% 50%)",
quarter: "polygon(-10% -10%, 50% -10%, 50% 110%, -10% 110%)",
crescent: "ellipse(15% 80% at 90% 55%)"
})
width = 954
size = (width - (columns.length + 1) * padding) / columns.length + padding
padding = 30
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.
