Published
Edited
Mar 30, 2020
Insert cell
Insert cell
Insert cell
Insert cell
x = columns.map(c => d3.scaleLinear()
.domain(d3.extent(data, d => d[c]))
.rangeRound([padding / 2, size - padding / 2]))
Insert cell
y = x.map(x => x.copy().range([size - padding / 2, padding / 2]))
Insert cell
z = d3.scaleOrdinal()
.domain(data.map(d => d.species))
.range(d3.schemeCategory10)
Insert cell
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", "#ddd"));
}
Insert cell
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", "#ddd"));
}
Insert cell
data = d3.csvParse(await FileAttachment("iris.csv").text(), d3.autoType)
Insert cell
columns = data.columns.filter(d => d !== "species")
Insert cell
width = 954
Insert cell
size = (width - (columns.length + 1) * padding) / columns.length + padding
Insert cell
padding = 20
Insert cell
d3 = require("d3@5")
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell

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.
Learn more