Graphics Developer, Creative Coder, DataViz Cognoscenti
Public
Edited
Dec 19, 2023
Importers
11 stars
function hatchHorizontal(config) {
const { n, stroke = "black" } = config;
const domain = d3.range(n);
const scale = d3.scalePoint(domain, [0, config.height]);
const lines = domain.map((index) => {
const y = config.y + scale(index);
const x = config.x;
const x1 = x;
const y1 = y;
const x2 = x1 + config.width;
const y2 = y;
return htl.svg`<line stroke=${stroke} ${{ x1, y1, x2, y2 }} />`;
});
return lines;
}
function hatchDiagonal(config) {
const { n, theta = -45, stroke = "black" } = config;
const center = {
x: config.x + config.width / 2,
y: config.y + config.height / 2
};
const domain = d3.range(n);
const scale = d3.scalePoint(domain, [0, config.height]);
const lines = domain.map((index) => {
const y = config.y + scale(index);
const x = config.x;
const x1_ = x;
const y1_ = y;
const x2_ = x1_ + config.width;
const y2_ = y;
const [x1, y1] = rotate(center.x, center.y, x1_, y1_, theta);
const [x2, y2] = rotate(center.x, center.y, x2_, y2_, theta);
return htl.svg`<line stroke=${stroke} ${{ x1, y1, x2, y2 }} />`;
});
return lines;
}
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.
