// create your pattern
pattern = motif()
<svg height=100>
${pattern.defs}
<rect x=0 width= 200 height=100 fill="${pattern.url}" stroke="black" />
</svg>
{
const ctx = DOM.context2d(200, 100);
ctx.rect(0, 0, 200, 100);
ctx.fillStyle = pattern.context(ctx);
pattern.apply();
return ctx.canvas;
}
map = {
const size = [width, width];
const ctx = DOM.context2d(...size);
const proj = d3.geoIdentity().reflectY(true).fitSize(size, france[1]);
const path = d3.geoPath(proj).context(ctx);
const patterns = palette.map((d) => d.context(ctx));
// Départements
france[0].features.forEach((feature) => {
const pattern = patterns[Math.floor(Math.random() * patterns.length)];
ctx.beginPath();
ctx.fillStyle = pattern;
path(feature);
pattern.apply();
});
// buffer lines
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.lineJoin = "round";
ctx.lineWidth = 4;
path(france[1]);
ctx.stroke();
// lines
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineJoin = "round";
ctx.lineWidth = 1;
path(france[1]);
ctx.stroke();
// Basemap credit
ctx.fillStyle = "black";
ctx.textBaseline = "bottom";
ctx.font = "14px monospace";
ctx.fillText(
"Basemap: 'France communes 2022 COG' by ICEM7 (Éric Mauvière)",
0,
size[1] - 7
);
return ctx.canvas;
}
Plot.plot({
width,
projection: { type: "reflect-y", domain: france[1] },
color: { type: "quantile", range: palette2.map((d) => d.url), legend: true },
marks: [
// Combine all palette patterns in one defs tag
() => htl.svg`<defs>${palette2.map((d) => d.pattern)}</defs>`,
Plot.geo(france[0], { fill: "dep" }), // Départements
Plot.geo(france[1], { stroke: "white", strokeWidth: 4 }), // Buffer lines
Plot.geo(france[1]) // Lines
]
})
plotPattern = motif({ scale: 0.5, size: 10, angle: 45 })
// cf https://github.com/observablehq/plot/pull/700/commits/5c90c1be8c0bd7578d68f7fe072cd58c349f05f6
Plot.plot({
marks: [
() => plotPattern.defs,
Plot.areaY(aapl, {
x: "Date",
y: "Close",
fill: plotPattern.url,
stroke: "black"
}),
Plot.ruleY([0])
]
})
function customSquareSVG(tile, shapeArea) {
// Calcul square side length from square area
const side = Math.sqrt(shapeArea);
// Generic SVG string path of a square
// M 0 0
// h side v side h -side
// Z
// But we need to center our square in the tile. And origin (0,0) is at the center of tile
return `M ${-side / 2} ${-side / 2}
h ${side} v ${side} h ${-side}
Z`;
}
function customSquareCanvas(tile, shapeArea, context) {
// Calcul square side length from square area
const side = Math.sqrt(shapeArea);
// Generic Canvas path method of a square
// context.rect(x, y, width, height);
context.rect(-side / 2, -side / 2, side, side);
return context;
}
function customShapeSVG(tile, shapeArea) {
// Borrow from d3-shape, https://github.com/d3/d3-shape/blob/main/src/symbol/wye.js
// and adapt to SVG string path
const c = -0.5;
const s = Math.sqrt(3) / 2;
const k = 1 / Math.sqrt(12);
const a = (k / 2 + 1) * 3;
const r = Math.sqrt(shapeArea / a);
const x0 = r / 2,
y0 = r * k;
const x1 = x0,
y1 = r * k + r;
const x2 = -x1,
y2 = y1;
return `M ${x0} ${y0}
L ${x1} ${y1}
L ${x2} ${y2}
L ${c * x0 - s * y0} ${s * x0 + c * y0}
L ${c * x1 - s * y1} ${s * x1 + c * y1}
L ${c * x2 - s * y2} ${s * x2 + c * y2}
L ${c * x0 + s * y0} ${c * y0 - s * x0}
L ${c * x1 + s * y1} ${c * y1 - s * x1}
L ${c * x2 + s * y2} ${c * y2 - s * x2}
Z`;
}
function customShapeCanvas(tile, shapeArea, context) {
// On call context is replace to d3.path()
// Borrow from d3-shape, https://github.com/d3/d3-shape/blob/main/src/symbol/wye.js
const c = -0.5;
const s = Math.sqrt(3) / 2;
const k = 1 / Math.sqrt(12);
const a = (k / 2 + 1) * 3;
const r = Math.sqrt(shapeArea / a);
const x0 = r / 2,
y0 = r * k;
const x1 = x0,
y1 = r * k + r;
const x2 = -x1,
y2 = y1;
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(c * x0 - s * y0, s * x0 + c * y0);
context.lineTo(c * x1 - s * y1, s * x1 + c * y1);
context.lineTo(c * x2 - s * y2, s * x2 + c * y2);
context.lineTo(c * x0 + s * y0, c * y0 - s * x0);
context.lineTo(c * x1 + s * y1, c * y1 - s * x1);
context.lineTo(c * x2 + s * y2, c * y2 - s * x2);
context.closePath();
return context;
}
patternSettings
/**
* Creates a canvas element with a pattern applied to it.
*
* @param {Function} pattern_function - pattern function
* @param {Object} pattern_options - An object with options of the pattern_function.
* @param {number} [height=80] - The height of the canvas. Default value is 80.
* @param {number} [w=width] - The width of the canvas. Default value is observable width.
* @returns {HTMLCanvasElement} A canvas element with the pattern applied to it.
*/
function sample(pattern_options, height = 80, w = width) {
const ctx = DOM.context2d(w, height);
const ptn = motif(pattern_options);
ctx.imageSmoothingEnabled = false;
ctx.rect(0, 0, w, height);
ctx.fillStyle = ptn.context(ctx);
ptn.apply();
return ctx.canvas;
}
/**
* Creates a pattern/motif that can be used in SVG environment or Canvas context.
* @param {object} [options={}] - An object containing the options for the pattern.
* @param {string} [options.type="line"] - Type of pattern. Can be "line", "plaid", "circle", "plus", "cross", "triangle", square", "diamond" and "custom". If "custom" see options.custom
* @param {number} [options.scale=1] - Scale of the tile.
* @param {number} [options.size=20] - Shape size as a percentage of tile area.
* @param {number} [options.angle=0] - Rotation angle, in degrees.
* @param {string} [options.fill="black"] - Fill color.
* @param {string} [options.stroke="transparent"] - Stroke color.
* @param {number} [options.strokeWidth=0] - Line width of shape stroke, in pixels.
* @param {number[]} [options.dash=[]] - Dash pattern as in CSS.
* @param {string} [options.background="transparent"] - Background color of the pattern canvas.
* @param {number} [options.border=0] - Tile border width. Default as 0 = no border.
* @param {boolean} [options.patchSize=false] - Patch the size to truly respect ratio between shape and tile area.
* @param {function} [option.custom.shape] - Custom shape as an SVG string data or Canvas path method.
* @param {number} [option.custom.patch=50] - Patch size for the custom shape. Default: 50.
* @returns {{ defs: SVG, urls: string, context: Function, apply: Function }} An object containing SVG defs tags with pattern, url id of the pattern and two functions for Canvas use: context and apply.
*/
function motif(options = {}) {
let {
type,
scale,
size,
angle,
fill,
stroke,
strokeWidth,
dash,
background,
border,
patchSize,
custom
} = options;
type = type ?? "line";
scale = scale ?? 1;
size = size ?? 20;
angle = angle ?? 0;
fill = fill ?? "black";
stroke = stroke ?? "transparent";
strokeWidth = strokeWidth ?? 0;
dash = dash ?? [];
background = background ?? "white";
border = border ?? 0;
patchSize = patchSize ?? false;
const tile = scale * 10;
const getShapeArea = () => (size / 100) * (tile * tile);
let externalContext;
const dpi = devicePixelRatio || 2; // double the dpi to ensure crisp small shape
const shapePath = new Map([
["line", line],
["plaid", plaid],
["circle", circle],
["plus", plus],
["cross", plus],
["triangle", triangle],
["square", square],
["diamond", square],
["custom", custom?.shape]
]);
// Empirical tipping point = faster and still close to real one
const tippingPoint = new Map([
["line", 50], // arbitrary
["plaid", 50], // arbitrary
["circle", 78],
["triangle", 43],
["plus", 43],
["cross", 55],
["square", 50], // arbitrary
["diamond", 50],
["custom", custom?.patch ?? 50]
]);
if (patchSize && size > tippingPoint.get(type)) {
const back = background;
background = fill;
fill = back;
size = 100 - size;
}
const pathFunction = shapePath.get(type);
const path =
custom?.shape && custom?.shape.length === 3
? pathFunction(tile, getShapeArea(), d3.path())
: pathFunction(tile, getShapeArea());
const id = `${type}-${
Math.round(performance.now()) + Math.random().toFixed(3)
}`;
const rotateShape = ["cross", "diamond"].includes(type) ? 45 : 0;
// SVG OUTPUT
// prettier-ignore
const pattern = svg`<pattern id="${id}"
width="${tile}" height="${tile}"
viewBox="${-tile / 2} ${-tile / 2} ${tile} ${tile}"
patternUnits="userSpaceOnUse"
patternTransform="rotate(${angle})">
<rect fill="${background}"
x=${-tile / 2} y=${-tile / 2}
width="${tile}" height="${tile}"/>
<path d="${path}"
transform="rotate(${rotateShape})"
fill="${fill}" stroke="${stroke}" strokeWidth="${strokeWidth}"/>
</pattern>`;
const defs = svg`<defs>${pattern}</defs>`;
const url = `url(#${id})`;
// CANVAS OUTPUT
function get_canvas_with_base_tile() {
let canvas;
// Handle resolution
const tile_dpi = tile * dpi;
// Tile create with an offscreen canvas if available
if (typeof window.OffscreenCanvas !== "undefined") {
canvas = new window.OffscreenCanvas(tile_dpi, tile_dpi);
} else {
canvas = document.createElement("canvas");
canvas.width = canvas.height = tile_dpi;
}
const ctx = canvas.getContext("2d");
// Tile background and border
ctx.fillStyle = background;
ctx.strokeStyle = border === 0 ? "transparent" : "black";
ctx.lineWidth = border;
ctx.rect(0, 0, tile_dpi, tile_dpi);
ctx.fill();
ctx.stroke();
// Origin to tile center and shape styling
ctx.beginPath();
ctx.translate(tile_dpi / 2, tile_dpi / 2);
ctx.scale(dpi, dpi);
ctx.rotate(degreeToRadian(rotateShape)); // handle cross and diamond as rotation of plus and square
ctx.strokeStyle = strokeWidth === 0 ? "transparent" : stroke;
ctx.setLineDash(dash);
ctx.lineWidth = strokeWidth;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.fillStyle = fill;
// SVG string path pass to a Path2D
const path2D = new Path2D(path);
ctx.stroke(path2D);
ctx.fill(path2D);
// Reset translate to tile center
ctx.resetTransform();
return canvas;
}
function context(ctx) {
const canvasBaseTile = get_canvas_with_base_tile();
const pattern = ctx.createPattern(canvasBaseTile, "repeat");
externalContext = ctx;
pattern.apply = apply;
pattern.defs = defs;
pattern.pattern = pattern;
pattern.url = url;
return pattern;
}
// Apply pattern with good scale and angle
function apply() {
const angleRadian = degreeToRadian(angle);
// Scale pattern to it's good size
externalContext.scale(1 / dpi, 1 / dpi);
// Rotate pattern according to angle input
externalContext.rotate(angleRadian);
externalContext.fill();
externalContext.resetTransform();
// restore scale to device pixel resolution
externalContext.scale(dpi, dpi);
}
return { defs, pattern, url, context, apply };
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.