31:T436,sheepPath = "M-2 -1.2c0.2 0 0.2 0.2 0.5 0.2c0.3 0 0.3 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.4 -0.2c0.1 0 0.2 0.2 0.4 0.1c0.2 0 0.2 -0.2 0.4 -0.3c0.1 0 0.1 -0.1 0.4 0c0.3 0 0.3 -0.4 0.6 -0.4c0.3 0 0.6 -0.3 0.7 -0.2c0.1 0.1 1.4 1 1.3 1.4c-0.1 0.4 -0.3 0.3 -0.4 0.3c-0.1 0 -0.5 -0.4 -0.7 -0.2c-0.3 0.2 -0.1 0.4 -0.2 0.6c-0.1 0.1 -0.2 0.2 -0.3 0.4c0 0.2 0.1 0.3 0 0.5c-0.1 0.2 -0.3 0.2 -0.3 0.5c0 0.3 -0.2 0.3 -0.3 0.6c-0.1 0.2 0 0.3 -0.1 0.5c-0.1 0.2 -0.1 0.2 -0.2 0.3c-0.1 0.1 0.3 1.1 0.3 1.1l-0.3 0c0 0 -0.3 -0.9 -0.3 -1c0 -0.1 -0.1 -0.2 -0.3 -0.2c-0.2 0 -0.3 0.1 -0.4 0.4c0 0.3 -0.2 0.8 -0.2 0.8l-0.3 0l0.3 -1c0 0 0.1 -0.6 -0.2 -0.5c-0.3 0.1 -0.2 -0.1 -0.4 -0.1c-0.2 -0.1 -0.3 0.1 -0.4 0c-0.2 -0.1 -0.3 0.1 -0.5 0c-0.2 -0.1 -0.1 0 -0.3 0.3c-0.2 0.3 -0.4 0.3 -0.4 0.3l0.2 1.1l-0.3 0l-0.2 -1.1c0 0 -0.4 -0.6 -0.5 -0.4c-0.1 0.3 -0.1 0.4 -0.3 0.4c-0.1 -0.1 -0.2 1.1 -0.2 1.1l-0.3 0l0.2 -1.1c0 0 -0.3 -0.1 -0.3 -0.5c0 -0.3 0.1 -0.5 0.1 -0.7c0.1 -0.2 -0.1 -1 -0.2 -1.1c-0.1 -0.2 -0.2 -0.8 -0.2 -0.8c0 0 -0.1 -0.5 0.4 -0.8z"32:T439,{ const patternDefs = [ { id: "hach1", options: { strokeWidth: 0.6, spacing: 3, rotate: 90 } }, { id: "hach2", options: { strokeWidth: 1.6, spacing: 6, rotate: 45 } }, { id: "hach3", options: { strokeWidth: 1.6, spacing: 6, rotate: 90 } }, { id: "hach4", options: { strokeWidth: 1.2, spacing: 5, rotate: 0 } }, { id: "hach5", options: { strokeWidth: 1.6, spacing: 6, rotate: -45 } }, { id: "hach6", options: { strokeWidth: 1.2, spacing: 6, rotate: 0 } } ]; // Generate the SVG pattern definitions. const patterns = patternDefs.map(({ id, options }) => hachure(id, options)); // Embed the SVG with and Plot spec inside some html: return html` ${Plot.plot({ color: { range: patternDefs.map(({ id }) => `url(#${id})`) }, x: { tickSize: 0, label: null }, marks: [ Plot.rectY(animalData, { x: "animal", y: "count", fill: "animal", stroke: "currentColor", strokeWidth: 1.5 }) ] })} `; }33:T650,class Ellipse extends Plot.Mark { static defaults = { fill: "rgb(91,131,149)", stroke: null }; // Set the default options for this mark. constructor(data, options = {}) { const { x, y, rx, ry = rx } = options; // Extract the channel options relevant to this mark super( data, // The data to be encoded { // Channels and their associated scalings relevant to this mark x: { value: x, scale: "x" }, y: { value: y, scale: "y" }, rx: { value: rx, scale: "r" }, ry: { value: ry, scale: "r", optional: true } }, options, // The options object for user-customisation Ellipse.defaults // The default option values specific to this mark ); } // The method that will do the custom drawing of the mark. // indices: uInt32 array of numbers corresponding to the number of data items // scales: The scaling functions used by this mark // channels: The data items that have been encoded via channels // dimensions: width, height and the 4 margins in pixel units of the drawing area // cxt: The mark's context, that includes several elements used by D3 etc. for rendering render(indices, scales, channels, dimensions, cxt) { const { x: xs, y: ys, rx: rxs, ry: rys, fill: fs } = channels; return htl.svg`${[...indices].map((i) => { const fill = fs?.value ?? (fs ? fs[i] : this.fill); // Is colour a channel, constant or default? return htl.svg` `; })}`; } }34:T65e,class FlowCurve extends Plot.Mark { static defaults = { stroke: "black", strokeWidth: 1, opacity: 1 }; constructor(data, options = {}) { const { x1, y1, x2, y2, sweep = 1 } = options; super( data, { x1: { value: x1, scale: "x" }, y1: { value: y1, scale: "y" }, x2: { value: x2, scale: "x" }, y2: { value: y2, scale: "y" } }, options, FlowCurve.defaults ); this.sweep = sweep < 0 ? -1 : sweep > 0 ? 1 : 0; // +ve: bend left; 0: straight; -ve: bend right } render(indices, scales, channels, dimensions, cxt) { const { x1: x1s, y1: y1s, x2: x2s, y2: y2s, stroke: clrs, strokeWidth: sws, opacity: ops } = channels; return htl.svg`${[...indices].map((i) => { const clr = clrs?.value ?? (clrs ? clrs[i] : this.stroke); const op = ops?.value ?? (ops ? ops[i] : this.opacity); const sw = sws?.value ?? (sws ? sws[i] : this.strokeWidth); const [x1, y1, cx, cy, x2, y2] = FlowCurve.cPts( x1s[i], y1s[i], x2s[i], y2s[i], this.sweep ); // The SVG curve drawing const d = `M ${x1},${y1} C ${cx},${cy} ${x2},${y2} ${x2},${y2}`; return htl.svg``; })}`; } // For calculating the Bezier control point for a given pair of endpoints static cPts = (x1, y1, x2, y2, d = 1) => { const [cx, cy] = [x2 - d * 0.25 * (y1 - y2), y2 + d * 0.25 * (x1 - x2)]; return [x1, y1, cx, cy, x2, y2]; }; }35:T6a7,class Stem extends Plot.Mark { static defaults = { stroke: "black", fill: "rgb(136,150,71)", strokeWidth: 1, opacity: 1 }; constructor(data, options = {}) { const { x, y = 0, len, w = 0.04, asym = 3 } = options; super( data, { x: { value: x, scale: "x" }, y: { value: y, scale: "y" }, len: { value: len, scale: "y" } // Length of stem is data channel }, options, Stem.defaults ); this.w = w; this.asym = asym; } render(indices, scales, channels, dimensions, cxt) { const { x: xs, y: ys, len: lens, stroke: ss, fill: fs, strokeWidth: sws, opacity: ops } = channels; return htl.svg`${[...indices].map((i) => { const fill = fs?.value ?? (fs ? fs[i] : this.fill); const stroke = ss?.value ?? (ss ? ss[i] : this.stroke); const op = ops?.value ?? (ops ? ops[i] : this.opacity); const sw = sws?.value ?? (sws ? sws[i] : this.strokeWidth); const len = lens[i] - scales.y(0); // Adjust the length and width relative to the y-scale baseline. const w = this.w * len; const [x1, y1, cLeft, cRight, cy, x2, y2] = [ xs[i], ys[i], xs[i] - w - this.asym * w, xs[i] + w - this.asym * w, ys[i] + len / 2, xs[i], ys[i] + len ]; const d = ` M ${x1 - w / 2},${y1} C ${cLeft},${cy} ${x2},${y2} ${x2},${y2} C ${cRight},${cy} ${x1 + w / 2},${y1} ${x1 + w / 2},${y1}`; return htl.svg``; })}`; } }36:T9cf,class Flower extends Plot.Mark { static defaults = { stroke: "currentColor", fill: "rgb(209,77,65)", strokeWidth: 1, opacity: 1 }; constructor(data, options = {}) { const { x, y = 0, r = 40, len, nPetals = 7, petalL = 4, petalW = 2, cClr } = options; super( data, { x: { value: x, scale: "x" }, y: { value: y, scale: "y" }, r: { value: r, scale: "r", optional: true }, len: { value: len, scale: "y" } // Vertical position of flower at top of an invisible stem }, options, Flower.defaults ); this.nPetals = nPetals; this.petalL = petalL; this.petalW = petalW; this.cClr = cClr; } render(indices, scales, channels, dimensions, cxt) { const { x: xs, y: ys, r: rs, len: lens, stroke: ss, fill: fs, strokeWidth: sws, opacity: ops } = channels; return htl.svg`${[...indices].map((i) => { const fill = fs?.value ?? (fs ? fs[i] : this.fill); const stroke = ss?.value ?? (ss ? ss[i] : this.stroke); const op = ops?.value ?? (ops ? ops[i] : this.opacity); const sw = sws?.value ?? (sws ? sws[i] : this.strokeWidth); const len = lens[i] - scales.y(0); // Adjust the length relative to the y-scale baseline. const [cx, cy] = [xs[i], ys[i] + len]; // Flower centre is at (x, y+len) const r = rs[i]; // --- Petal parameters --- const [petalRx, petalRy] = [(this.petalL * r) / 2, (this.petalW * r) / 2]; const offset = r + petalRx; // Position petals so inner edge touches central circle. const petals = Array.from({ length: this.nPetals }, (_, k) => { const a = (𝜏 * k) / this.nPetals; const [pcx, pcy] = [cx + offset * cos(a), cy + offset * sin(a)]; return htl.svg``; }); const centerCircle = htl.svg``; return htl.svg`${[...petals, centerCircle]}`; })}`; } }37:T4c4,{ const purples = d3 .scaleSequential(d3.interpolatePurples) .domain(d3.extent(flowers1, (d) => d.a)); const oranges = d3 .scaleSequential(d3.interpolateOranges) .domain(d3.extent(flowers2, (d) => d.a)); return Plot.plot({ margin: 40, marginTop: 250, width: 900, height: 600, y: { axis: null }, r: { range: [0, 8] }, marks: [ new Stem(flowers1, { x: "x", y: "y", len: "len", w: 0.02, asym: 7, opacity: 0.8 }), new Stem(flowers2, { x: "x", y: "y", len: "len", w: 0.03, asym: -3, opacity: 0.8 }), // Purple flowers new Flower(flowers1, { x: "x", y: "y", len: "len", r: (d) => abs(d.len * d.b), nPetals: 9, fill: (d) => purples(d.a), cClr: "rgb(246, 226, 160)", strokeWidth: 0.7 }), // Orange flowers new Flower(flowers2, { x: "x", y: "y", len: "len", r: (d) => abs(d.len * d.b), nPetals: 5, petalW: 3, fill: (d) => oranges(d.a), cClr: "white", strokeWidth: 0.7 }) ] }); }38:T5bd,carAccessData = [ { borough: "City of London", access: 0.228 }, { borough: "Barking and Dagenham", access: 0.652 }, { borough: "Barnet", access: 0.701 }, { borough: "Bexley", access: 0.776 }, { borough: "Brent", access: 0.559 }, { borough: "Bromley", access: 0.771 }, { borough: "Camden", access: 0.364 }, { borough: "Croydon", access: 0.664 }, { borough: "Ealing", access: 0.632 }, { borough: "Enfield", access: 0.69 }, { borough: "Greenwich", access: 0.569 }, { borough: "Hammersmith and Fulham", access: 0.425 }, { borough: "Haringey", access: 0.473 }, { borough: "Harrow", access: 0.753 }, { borough: "Havering", access: 0.785 }, { borough: "Hillingdon", access: 0.777 }, { borough: "Hounslow", access: 0.672 }, { borough: "Islington", access: 0.331 }, { borough: "Kensington and Chelsea", access: 0.417 }, { borough: "Kingston upon Thames", access: 0.743 }, { borough: "Lambeth", access: 0.42 }, { borough: "Lewisham", access: 0.523 }, { borough: "Merton", access: 0.67 }, { borough: "Newham", access: 0.483 }, { borough: "Redbridge", access: 0.725 }, { borough: "Richmond upon Thames", access: 0.746 }, { borough: "Southwark", access: 0.397 }, { borough: "Sutton", access: 0.772 }, { borough: "Tower Hamlets", access: 0.336 }, { borough: "Waltham Forest", access: 0.579 }, { borough: "Wandsworth", access: 0.521 }, { borough: "Westminster", access: 0.338 }, { borough: "Hackney", access: 0.351 } ]39:[{"id":"2af09c994d85f69e429152d266c4aaf5d92e7eadf40cb757027dda4abd973225b7f89af8c2df0530fa676179c46623845c670895dd8b723e706f575f9dddb4b6","href":"https://static.observableusercontent.com/files/2af09c994d85f69e429152d266c4aaf5d92e7eadf40cb757027dda4abd973225b7f89af8c2df0530fa676179c46623845c670895dd8b723e706f575f9dddb4b6","name":"bikeHireODsJan2025.csv","type":"text/csv","lastModified":1743410457567.428,"size":1387294}] 2f:{"title":"Hello custom marks with Plot","cells":[{"id":0,"value":"# Hello custom marks with Plot","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Even though Plot provides [many types of mark](https://observablehq.com/@observablehq/plot-gallery), sometimes you want to exercise more creative control over the appearance of graphical symbols in your visualization work. On this page I explore some options, roughly in order of sophistication, for customising the way marks are drawn. Although Plot can be integrated with any SVG output, I try to emphasise approaches that allow custom marks to be used much as you would pre-existing ones. The goal is to explore the space between the convenient higher-level data driven specification of 'normal' Plot and the greater expressiveness offered by lower-level SVG and D3.\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## 1. Compound marks\n\nOne simple approach is to combine two or more existing marks, placing their construction inside a single function that may be called in place of its component marks. This relies on the fact that Plot's `marks` element can accept nested-arrays of marks. And in common with most of the approaches on this page, we can pass an `options` object as a parameter to be used in the same way as standard Plot marks.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Here's an example that creates a simple dot and whisker mark by combining a [dot mark](https://observablehq.com/plot/marks/dot) with a [link mark](https://observablehq.com/plot/marks/link). Note the use of the _options pattern_ with destructuring to define new default values for the size, line width and colour of the dot and whiskers. It introduces a new `w` channel (actually just a renaming of the `z` channel) that determines the width of the whiskers in data space.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"function dotAndWhisker(data, options = {}) {\n const {\n // Default values specific to this custom mark.\n r = 8,\n fill = \"white\",\n stroke = \"currentColor\",\n strokeWidth = 2,\n x,\n y,\n w = \"spread\",\n ...rest // Remaining standard options that can be passed to both dot and whisker\n } = options;\n\n const linkOptions = {\n ...rest,\n stroke,\n strokeWidth,\n x1: (d) => d.x - d.z / 2, // Left whisker\n x2: (d) => d.x + d.z / 2, // Right whisker\n y1: \"y\",\n y2: \"y\"\n };\n\n return [\n Plot.link(\n data.map((d) => ({ x: d[x], y: d[y], z: d[w] })),\n linkOptions\n ),\n Plot.dot(data, { ...options, r, fill, stroke, strokeWidth })\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"We can call the new `dotAndWhisker` mark just as we would any other kind of standard mark. The only difference is that we can additionally specify the data variable to be encoded with the new `w` channel (whisker width).","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"{\n const data = [\n { question: \"a\", score: 20, stdev: 8 },\n { question: \"b\", score: 80, stdev: 12 },\n { question: \"c\", score: 50, stdev: 24 },\n { question: \"d\", score: 70, stdev: 13 }\n ];\n\n return Plot.plot({\n height: 190,\n x: { domain: [0, 100] },\n y: { label: \"Question\" },\n marks: [dotAndWhisker(data, { x: \"score\", y: \"question\", w: \"stdev\" })]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"designNote(\n md`\n- You can compose your custom mark from existing marks.\n- You have a new set of default mark properties that would be tedious to specify for every implementation.\n`,\n {\n title: \"When to use compound marks:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2555,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"## 2. Simple custom dot symbols","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"The [dot mark](https://observablehq.com/plot/marks/dot) offers the possibility of customising the shape of the symbol that appears at the dot location. The first two rows below are the default symbols allocated in the symbol channel depending on whether the symbols have a fill colour specified. The `hexagon` symbol is an additional built-in shape (often used with the [hexbin transform](https://observablehq.com/plot/transforms/hexbin)).","pinned":false,"hidden":false,"mode":"md"},{"id":655,"value":"{\n const labels = [\n \"circle\",\n \"plus\",\n \"times\",\n \"triangle2\",\n \"asterisk\",\n \"square2\",\n \"diamond2\"\n ];\n\n return Plot.plot({\n margin: 30,\n x: { tickSize: 0, tickFormat: (d) => labels[d] },\n marks: [\n Plot.dotX(d3.range(0, 7), {\n r: 12,\n stroke: \"currentColor\",\n symbol: Plot.identity\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"{\n const labels = [\n \"circle\",\n \"cross\",\n \"diamond\",\n \"square\",\n \"star\",\n \"triangle\",\n \"wye\"\n ];\n\n return Plot.plot({\n margin: 30,\n x: { tickSize: 0, tickFormat: (d) => labels[d] },\n marks: [\n Plot.dotX(d3.range(0, 7), {\n r: 12,\n fill: \"rgb(91,131,149)\",\n symbol: Plot.identity\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"Plot.plot({\n width: 60,\n margin: 29,\n x: { tickSize: 0, tickFormat: (d) => \"hexagon\" },\n marks: [Plot.dotX([0], { r: 12, fill: \"rgb(91,131,149)\", symbol: \"hexagon\" })]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"But if these are not sufficient, you can specify your own symbol shapes by creating drawing functions. The drawing function should have two parameters: the first is the 'context' which gives access to a set of Canvas [turtle commands](https://observablehq.com/@d3/d3-path), and the second the scaled area in square pixel units determined by the normal data-driven scaling Plot performs when rendering marks.\n\nFor simple shapes, it should be possible to code the turtle commands (e.g. `moveTo`, `lineTo`) directly. Here's a simple example that draws a fan shape:","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"function fan(cxt, area) {\n const r = sqrt(area) / 2; // Define the shape's 'radius' based on the area parameter\n cxt.moveTo(0, r);\n cxt.lineTo(-r, 0);\n cxt.arc(0, 0, r, π, 0); // Semicircle of radius r from the '9 o'clock' (π radians) to '3 o'clock' (0) angle\n cxt.closePath();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"To use the new custom shape, provide the drawing function to Plot.dot's `symbol` naming it as `draw` :","pinned":false,"hidden":false,"mode":"md"},{"id":373,"value":"Plot.plot({\n height: 120,\n margin: 30,\n r: { domain: [0, 10], range: [0, 24] }, // Set symbol's radius to range up to 24 pixel units\n marks: [\n Plot.dot(\n d3.range(1, 11).map((d) => ({ x: d })),\n {\n x: \"x\",\n r: \"x\",\n fill: \"rgb(91,131,149)\",\n symbol: { draw: fan } // Object within which we specify the custom draw function\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"You can create as many custom point symbols as you need as well as mix them with built in symbols. By setting the `range` of the symbol channel, you can provide any arbitrary set of symbol definitions. Symbols will be matched to encoded data in natural order, cycling round if there are more data categories than symbol specifications. The example below mixes two custom symbols (`fan` and `tri`) with the built-in circle and square symbols:","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"function tri(cxt, area) {\n const r = sqrt(area / 2);\n const vertices = [π, (7 * π) / 3, (11 * π) / 3].map((a) => [\n r * cos(a + π / 6),\n r * sin(a + π / 6) - r / 4\n ]);\n cxt.moveTo(...vertices[0]);\n cxt.lineTo(...vertices[1]);\n cxt.lineTo(...vertices[2]);\n cxt.closePath();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"Plot.plot({\n height: 120,\n margin: 30,\n r: { domain: [0, 10], range: [0, 18] },\n symbol: {\n range: [\"circle\", { draw: tri }, \"square\", { draw: fan }]\n }, // Mix custom and built-in symbols\n marks: [\n Plot.dot(\n d3.range(1, 13).map((d) => ({ x: d })),\n { x: \"x\", r: \"x\", fill: \"rgb(91,131,149)\", symbol: \"x\" }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"designNote(\n md`\n- You wish to customise point symbols with shapes other than the built in symbol types (or their combination).\n- The shapes you wish to create a sufficiently simple that you can code the Canvas turtle commands directly.\n- You want the size of the custom shapes to be scaleable in proportion to some data variable via the \\`r\\` channel.\n`,\n { title: \"When to use simple custom dot symbols:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2557,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"## 3. Complex point-based shapes from SVG paths","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"For more complex point-based shapes, it may not be practical to code the sequence of Canvas turtle commands directly. More commonly, complex shapes are created as [SVG paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths) in external packages such as [inkscape](https://inkscape.org) or a dedicated [SVG path editor](https://yqnn.github.io/svg-path-editor/). The resulting `path` string can look a little complex and hard to decipher, but using Mike Bostock's [path-data](https://github.com/mbostock/path-data) package, you can programmatically parse the string in order to convert it into a sequence of turtle commands. I've created a simple function `toTurtle` do this in a single step. You can use this in your own pages with\n\n```javascript\nimport {toTurtle} from \"@jwolondon/hello-custom-marks-with-plot\"\n```\n\n(or simply copy the function and the `path-data` import into your own pages)","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"function toTurtle(svgPath, options = {}) {\n const { scaleFn = (area) => Math.sqrt(area) / 16 } = options;\n const type = { M: \"moveTo\", L: \"lineTo\", C: \"bezierCurveTo\", Z: \"closePath\" };\n const segs = PathData.parse(svgPath, { normalize: true });\n const cmds = segs.map(\n (s) => (ctx, len) => ctx[type[s.type]](...s.values.map((d) => d * len))\n );\n return (ctx, area) => cmds.forEach((fn) => fn(ctx, scaleFn(area)));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"Suppose you had an SVG path specifying the outline of a human figure (this path was taken from [Nicolas Lambert's **geoviz** package](https://github.com/riatelab/geoviz/blob/main/src/helpers/picto.js)):","pinned":false,"hidden":false,"mode":"md"},{"id":800,"value":"personPath = \"M 0 -9.5 A 2.4 2.5 0 0 0 -2.4 -7 A 2.4 2.5 0 0 0 0 -4.5 A 2.4 2.5 0 0 0 2.4 -7 A 2.4 2.5 0 0 0 0 -9.5 z M -2.8 -4.2 C -3.7 -4.2 -4.3 -3.6 -4.3 -2.7 L -4.3 1.8 C -4.3 2.6 -3.7 3.3 -2.8 3.3 L -2.8 3.3 L -2.8 8.7 C -2.8 9.2 -2.4 9.6 -1.9 9.6 L 1.9 9.6 C 2.4 9.6 2.8 9.2 2.8 8.7 L 2.8 3.3 L 2.8 3.3 C 3.7 3.3 4.3 2.6 4.3 1.8 L 4.3 -2.7 C 4.3 -3.6 3.7 -4.2 2.8 -4.2 L -2.8 -4.2 Z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"We convert it into a custom shape drawing function by calling `toTurtle`, providing the SVG path as input:","pinned":false,"hidden":false,"mode":"md"},{"id":1091,"value":"person = toTurtle(personPath)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1112,"value":"Now we can use `person` like any other custom symbol drawing function:","pinned":false,"hidden":false,"mode":"md"},{"id":1087,"value":"Plot.plot({\n r: { range: [1, 12] }, // Enlarge the default size of symbols a little so we can see the shape\n marks: [\n Plot.dot(\n d3.range(1, 11).map((d) => ({ x: d })),\n { x: \"x\", r: \"x\", fill: \"rgb(91,131,149)\", symbol: { draw: person } }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1117,"value":"One of consequences of using externally created SVG paths as the basis for symbol drawing is that we have no guarantee that the paths create shapes of a comparable size to those built into Plot. For this reason it is a good idea to ensure the custom drawing function scales the shape to use appropriate dimensions. This can be achieved by providing an optional `scaleFn` parameter to `toTurtle`'s `options` object. And one way to check what scaling is appropriate is to overlay a standard symbol such as `square` or `circle` for comparison.","pinned":false,"hidden":false,"mode":"md"},{"id":1166,"value":"Here is an example path describing a heart shape. It uses coordinates that are larger than the expected size so we need to provide a custom scaling function that reduces the magnitude of coordinates. In this example that scaling value is generated via the interactive range slider, but typically you'd hard code an appropriate value (around 1/200 in this instance).","pinned":false,"hidden":false,"mode":"md"},{"id":1138,"value":"heartPath = \"M90,-90c-32.4,-14.4 -73.7,0 -88.1,30.6c-14.3,-32.4 -57.4,-46.8 -88.0,-30.6c-34.1,16.2 -50.3,55.7 -23.4,104.2c19.8,34.2 54.0,59.4 111.5,106.1c59.3,-46.7 93.5,-71.9 111.5,-106.1c26.9,-46.7 10.7,-88.0 -23.4,-104.2z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"viewof scaleDown = Inputs.range([50, 400], {\n label: \"scaleDown\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"heart = toTurtle(heartPath, { scaleFn: (area) => Math.sqrt(area) / scaleDown })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"{\n const data = d3.range(1, 11).map((d) => ({ x: d }));\n return Plot.plot({\n height: 120,\n r: { range: [1, 12] }, // Enlarge the default size of all symbols so we can see the shape clearly\n marks: [\n Plot.dot(data, {\n x: \"x\",\n r: \"x\",\n fill: \"rgb(91,131,149)\",\n stroke: \"white\",\n symbol: { draw: heart }\n }),\n // Reference square for comparing custom size\n Plot.dot(data, { x: \"x\", r: \"x\", symbol: \"square\", stroke: \"firebrick\" })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"For a more useful example, here's an Isotype plot inspired by the design in [Only An Ocean Between, 1943](http://www.thomwhite.co.uk/?p=1303). _Population Live Stock_, p.13. It uses the same approach of converting SVG path strings into custom drawing functions:","pinned":false,"hidden":false,"mode":"md"},{"id":875,"value":"cowPath = \"M4 -2c0 0 0.9 -0.7 1.1 -0.8c0.1 -0.1 -0.1 0.5 -0.3 0.7c-0.2 0.2 1.1 1.1 1.1 1.2c0 0.2 -0.2 0.8 -0.4 0.7c-0.1 0 -0.8 -0.3 -1.3 -0.2c-0.5 0.1 -1.3 1.6 -1.5 2c-0.3 0.4 -0.6 0.4 -0.6 0.4c0 0.1 0.3 1.7 0.4 1.8c0.1 0.1 -0.4 0.1 -0.5 0c0 0 -0.6 -1.9 -0.6 -1.9c-0.1 0 -0.3 -0.1 -0.3 -0.1c0 0.1 -0.5 1.4 -0.4 1.6c0.1 0.2 0.1 0.3 0.1 0.3c0 0 -0.4 0 -0.4 0c0 0 -0.2 -0.1 -0.1 -0.3c0 -0.2 0.3 -1.7 0.3 -1.7c0 0 -2.8 -0.9 -2.9 -0.8c-0.2 0.1 -0.4 0.6 -0.4 1c0 0.4 0.5 1.9 0.5 1.9l-0.5 0l-0.6 -2l0 -0.6c0 0 -1 0.8 -1 1c0 0.2 -0.2 1.3 -0.2 1.3c0 0 0.3 0.3 0.2 0.3c0 0 -0.5 0 -0.5 0c0 0 -0.2 -0.2 -0.1 -0.4c0 -0.1 0.2 -1.6 0.2 -1.6c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 0 -2.7 -0.2 -2.7c-0.1 0 -0.4 2 -0.4 2c0 0 0 0.2 -0.2 0.5c-0.1 0.4 -0.2 1.1 -0.2 1.1c0 0 -0.2 -0.1 -0.2 -0.2c0 -0.1 -0.1 -0.7 0 -0.7c0.1 -0.1 0.3 -0.8 0.4 -1.4c0 -0.6 0.2 -1.3 0.4 -1.5c0.1 -0.2 0.6 -0.4 0.6 -0.4z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"pigPath = \"M2 -2c0 0 0.7 0 1.2 0.5c0.5 0.5 0.4 0.6 0.5 0.6c0.1 0 0.7 0 0.8 0.1c0.1 0 0.2 0.2 0.2 0.2c0 0 -0.6 0.2 -0.6 0.3c0 0.1 0.4 0.9 0.6 0.9c0.1 0 0.6 0 0.6 0.1c0 0.1 0 0.7 -0.1 0.7c-0.1 0 -1.2 0.4 -1.5 0.5c-0.3 0.1 -1.1 0.5 -1.1 0.7c-0.1 0.2 0.4 1.2 0.4 1.2l-0.4 0c0 0 -0.4 -0.8 -0.4 -0.9c0 -0.1 -0.1 -0.3 -0.1 -0.3l-0.2 0l-0.5 1.3l-0.4 0c0 0 -0.1 -0.4 0 -0.6c0.1 -0.1 0.3 -0.6 0.3 -0.7c0 0 -0.8 0 -1.5 -0.1c-0.7 -0.1 -1.2 -0.3 -1.2 -0.2c0 0.1 -0.4 0.6 -0.5 0.6c0 0 0.3 0.9 0.3 0.9l-0.4 0c0 0 -0.4 -0.5 -0.4 -0.6c0 -0.1 -0.2 -0.6 -0.2 -0.5c0 0 -0.4 0.4 -0.6 0.4c-0.2 0.1 -0.4 0.1 -0.4 0.1c0 0 -0.1 0.6 -0.1 0.6l-0.5 0l0 -1c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 -0.7 -1.2 -0.6 -1.4c0.1 -0.1 0.1 -1.1 0.1 -1.1c0 0 -0.2 0.1 -0.2 0.1c0 0 0 0.9 0 1c0 0.1 -0.2 0.3 -0.3 0.3c-0.1 0 0 -0.5 0 -0.9c0 -0.4 0 -0.4 0.2 -0.6c0.2 -0.2 0.6 -0.3 0.8 -0.8c0.3 -0.5 1 -0.6 1 -0.6z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"animals = [cowPath, pigPath, sheepPath].map((p) => ({\n draw: toTurtle(p, { scaleFn: (area) => sqrt(area) / 5 })\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1062,"value":"We can plot the faceted chart in the normal way setting the symbol range to be an array of all three custom symbols so they are allocated to the symbol channel representing livestock types:","pinned":false,"hidden":false,"mode":"md"},{"id":970,"value":"Plot.plot({\n height: 300,\n marginLeft: 120,\n marginRight: 40,\n x: { axis: null },\n y: { axis: null },\n color: { range: [\"rgb(194,81,64)\", \"rgb(93,93,93)\", \"rgb(91,131,149)\"] }, // Colours for the 3 animal types\n symbol: { range: animals }, // Symbol shapes for the three animal types\n fy: { label: null, tickPadding: 40, padding: 0.2 }, // space for facet tick labels and vertical facet gap\n marks: [\n Plot.dot(livestockData, {\n x: \"x\",\n y: \"livestock\",\n symbol: \"livestock\",\n r: 14,\n fy: \"country\",\n fill: \"livestock\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"designNote(\n md`\n- You have an SVG path specification you need to convert into Canvas turtle commands.\n- You wish to customise point symbols with shapes other than the built in symbol types (or their combination).\n- You want the size of the custom shapes to be scaleable in proportion to some data variable via the \\`r\\` channel.\n`,\n { title: \"When to use complex custom dot symbols:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"## 4. Customising linear marks with vectors","pinned":false,"hidden":false,"mode":"md"},{"id":1230,"value":"So much for point-based marks; what about linear ones? For this, we can customise the [vector mark](https://observablehq.com/plot/marks/vector). Like the `dot` mark, this one has the ability to customise its appearance with a `draw()` function. It also takes a Canvas _context_ as its first argument, and scaling parameter as its second. In this case though the scale coefficient represents the length of the vector rather than the mark area. \n\nHere's a simple example that displays a vector as a teardrop shape indicating direction rather than its default straight line with arrow head.","pinned":false,"hidden":false,"mode":"md"},{"id":1274,"value":"function teardrop(ctx, len) {\n ctx.moveTo(0, 0);\n ctx.quadraticCurveTo(len * 0.3, len * -0.1, 0, -len);\n ctx.quadraticCurveTo(len * -0.3, len * -0.1, 0, 0);\n ctx.closePath();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1399,"value":"Once defined, we can we assign it as a `draw` element in the `shape` option of the vector mark, in a similar way as assigning `symbol` to point-based marks:","pinned":false,"hidden":false,"mode":"md"},{"id":1235,"value":"Plot.plot({\n margin: 20,\n length: { range: [0, 28] },\n x: { axis: null },\n y: { axis: null },\n color: { range: [\"#9d4310\", \"#24837b\"] },\n marks: [\n Plot.vector(vData, {\n x: \"x\",\n y: \"y\",\n rotate: \"dir\",\n length: \"mag\",\n shape: { draw: teardrop }, // Use the custom draw function for vector marks\n fill: (d) => cos((π * d.dir) / 180) // Change colour according to vector direction\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"For more complex shapes, you could also convert an SVG path into turtle drawing function, just as for the point symbol case above.","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"designNote(\n md`\n- You wish to customise vector symbols with shapes other than the default linear shapes.\n- You want the length and direction of the custom shapes to be scaleable in proportion to some data variables via the \\`length\\` and \\`rotate\\` channels.\n`,\n { title: \"When to use customised vectors:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2550,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"## 5. CSS Polygon styling","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"Suppose we wanted to produce a simple bar chart showing counts of some categorical variable. Rather than use colour to distinguish categories, we could define a pattern using SVG's [pattern element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/pattern), store that pattern in an SVG [defs element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/defs) and then reference it when specifying Plot's fill.\n\nTo link to a custom SVG definitions element to be used by one or more marks, you can provide a function to return a `` element as one of Plot's marks. This can then be referenced in any of the other marks in the list:","pinned":false,"hidden":false,"mode":"md"},{"id":3223,"value":"{\n // Define the SVG definitions\n const svgDefs = () => htl.svg`\n \n \n \n `;\n\n return Plot.plot({\n marks: [\n svgDefs, // Reference the SVG defs in the marks list so other marks can use it.\n Plot.rectY(animalData, {\n x: \"animal\",\n y: \"count\",\n fill: \"url(#myFill)\", // The url needs to match one of the ids in .\n stroke: \"currentColor\"\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3232,"value":"This has the advantage of simplicity, especially if refactoring existing code with minimal changes.\n\nThe disadvantage is that the `` object is only accessible within the `marks` list, and sometimes we might wish to make use of it in other parts of the Plot specification. So an alternative is to embed the entire Plot inside an html block. This provides a way of creating functions for customising patterns via an `options` object similar to standard Plot marks:","pinned":false,"hidden":false,"mode":"md"},{"id":1437,"value":"function hachure(id, options = {}) {\n const {\n stroke = \"currentColor\",\n strokeWidth = 1,\n opacity = 1,\n spacing = 8,\n rotate = 45\n } = options;\n const size = 10;\n return `\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1575,"value":"Then we specify multiple patterns within SVG's `` element as an html literal followed by the Plot specification.. Setting the \"color\" range (which is what the fill textures are associated with) to be the collection of patterns allows us to create data-driven patterns","pinned":false,"hidden":false,"mode":"md"},{"id":1529,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1629,"value":"You can use a similar approach for ordinal data as long as the sequence of patterns has some perceptual ordinal characteristic. For example, here is a stipple pattern with a parameterisable dot density (via dot `spacing` and dot radius `r`):","pinned":false,"hidden":false,"mode":"md"},{"id":1631,"value":"function stipple(id, options = {}) {\n const {\n fill = \"currentColor\",\n stroke = \"none\",\n strokeWidth = 1,\n opacity = 1,\n spacing = 10,\n r = 2,\n rotate = 7\n } = options;\n\n const [w, h] = [spacing * 2, spacing * sqrt(3)];\n return `\n \n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1715,"value":"By varying the density for a sequence of patterns we can create an ordinal texture scheme:","pinned":false,"hidden":false,"mode":"md"},{"id":1751,"value":"stipplePatterns = [\n { id: \"stipple1\", options: { spacing: 10, r: 1.1 } },\n { id: \"stipple2\", options: { spacing: 8, r: 1.4 } },\n { id: \"stipple3\", options: { spacing: 6, r: 1.6 } },\n { id: \"stipple4\", options: { spacing: 4, r: 1.6 } },\n { id: \"stipple5\", options: { spacing: 3.1, r: 1.7 } },\n { id: \"stipple6\", options: { spacing: 3, r: 2 } }\n].map((d) => ({ ...d, options: { ...d.options, fill: \"rgb(91,131,149)\" } }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1633,"value":"{\n // Generate the SVG pattern definitions.\n const patterns = stipplePatterns\n .map(({ id, options }) => stipple(id, options))\n .join(\"\\n\");\n\n const data = stipplePatterns.map((_, i) => ({ x: i }));\n\n return html`\n ${Plot.plot({\n height: 120,\n margin: 50,\n color: { range: stipplePatterns.map(({ id }) => `url(#${id})`) },\n x: { axis: null },\n marks: [\n Plot.dot(data, {\n x: \"x\",\n fill: \"x\", // The fill texture will use the color range defined above\n r: 48,\n stroke: \"currentColor\"\n })\n ]\n })}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1756,"value":"We could use the same patterns in other designs that involve filled polgons. For example, the map below shows the proportion of households in London in 2021 who had access to a private car or van. Because textures are categorical, we use the [threshold scale](https://observablehq.com/plot/features/scales#scale-options) to transform the measurements of car access into ordinal categories before mapping them onto the `range` patterns. Note also how the legend will automatically pick up the textured fill patterns in place of colour.","pinned":false,"hidden":false,"mode":"md"},{"id":1758,"value":"Plot.plot({\n width: 640,\n height: 500,\n projection: {\n // Approximation of the OSGB map projection\n type: \"transverse-mercator\",\n rotate: [2, 0, 0],\n domain: { type: \"FeatureCollection\", features: londonBoroughData }\n },\n color: {\n type: \"threshold\", // We need to assign patterns to discrete categories\n domain: [0.3, 0.4, 0.5, 0.6, 0.7],\n range: stipplePatterns.map(({ id }) => `url(#${id})`), // Use patterns instead of colours\n legend: true,\n label: \"Households with access to a car\",\n tickFormat: (d) => `${d * 100}%`\n },\n marks: [\n // A copy of the patterns is needed to allow \"download as PNG / SVG\"\n () =>\n svg`${stipplePatterns.map(({ id, options }) =>\n stipple(id, options)\n )}`,\n Plot.geo(londonBoroughData, {\n fill: (d) => boroughAccess[d.id],\n stroke: \"black\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3219,"value":"For more on this type of approach, using sequences of patterns that are embeddable in Plot marks, see Thomas Ansart's (@tombor) [Motif.js](https://observablehq.com/@ateliercartographie/motif).","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"designNote(\n md`\n- You want to create a texture pattern in any mark that can have a fill colour associated with it.\n- You want to create texture patterns in any mark that can have a fill colour associated with a categorical or ordinal data variable.\n- You want to improve the accessiblity of your datavis design for people less able to discriminate colours.`,\n { title: \"When to use polygon styling:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"## 6. Extending the `Mark` class","pinned":false,"hidden":false,"mode":"md"},{"id":1991,"value":"To achieve greatest design freedom in the appearance of marks, you can create your own new mark by extending Plot's [Mark class](https://github.com/observablehq/plot/blob/main/src/mark.js). It can take advantage of the channels used in standard Plot marks when rendering your own SVG, either directly with SVG commands or via [D3](https://d3js.org). \n\nOverriding Plot.Mark's `render()` method allows the custom drawing to be implemented. The function receives a number of potentially useful parameters including the scaled data values (e.g. pixel locations and colour encodings). Not all parameters may be necessary to use, but they do offer the flexiblity of a variety of SVG drawing approaches such as passing the drawing context to D3, or creating SVG literals that work with the channel-encoded data.","pinned":false,"hidden":false,"mode":"md"},{"id":1993,"value":"To illustrate, here's a simple dot-like mark for displaying ellipses with two new channels: `rx` for the horizontal radius and `ry` for the vertical radius. Both these new channels use Plot's `r` scaling, but each is now independently data driven.","pinned":false,"hidden":false,"mode":"md"},{"id":1995,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2441,"value":"Once defined, we can use the mark just like any other by creating a `new` instance of it. Note that in this example, the scaled range of `rx` and `ry` is set by customising the `r` range (just as we might specify both stroke and fill custom colours via the `color` scale)","pinned":false,"hidden":false,"mode":"md"},{"id":1964,"value":"{\n const data = d3.range(0, π, 0.1).map((d) => ({ a: d, b: π * cos(d) }));\n return Plot.plot({\n r: { range: [0, 10] }, // Set both rx and ry radii to be between 0 and 10 pixels\n marks: [new Ellipse(data, { x: \"a\", y: \"b\", rx: \"a\", ry: \"b\" })]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2451,"value":"Here's a custom mark that doesn't create any new channels, but reuses the `x1`, `x2`, `y1` and `y2` channels to create a [directional flow curve](https://observablehq.com/@jwolondon/rampvis_idiom_directional_flow_curves) mark. It can be used in place of the [arrow mark](https://observablehq.com/plot/marks/arrow), showing direction not with an arrow head, but by curve asymmetry (flowing from the straighter to the curvier end).\n\nIt uses a similar approach to `fill` in the Ellipse mark to allow defaults, constants or data driven channels for specifying the stroke colour, opacity and width. Additionally it stores a `sweep` value, similar to the [arrow mark option](https://observablehq.com/plot/marks/arrow#arrow-options), to determine if the curve is to the left or right relative to the flow direction.","pinned":false,"hidden":false,"mode":"md"},{"id":2454,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2734,"value":"Here's an example of using the new `FlowCurve` mark to show origin-destination journeys recorded for the London Bike Hire scheme, noting how the curve asymmetry can be used to indicate flow direction without too much visual clutter.","pinned":false,"hidden":false,"mode":"md"},{"id":2751,"value":"viewof minJourneys = Inputs.range([10, 50], {\n label: \"Minimum number of journeys\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2754,"value":"Plot.plot({\n width: 900,\n height: 510,\n title: \"Journeys made on the London bike hire scheme, January 2025\",\n subtitle: `Lines indicate journey direction (travelling from straight to curved end). Line thickness represents number of journeys made. Lines coloured by the start 'village'.`,\n projection: {\n type: \"transverse-mercator\",\n rotate: [2, 0, 0],\n domain: bikehireBounds\n },\n color: { domain: villages }, // Fix the colour scheme\n opacity: { type: \"sqrt\", domain: [0, 100] }, // Fade out smaller flows\n marks: [\n Plot.geo(thamesGeodata, {\n x: \"longitude\",\n y: \"latitude\",\n fill: \"steelblue\",\n opacity: 0.5\n }),\n // Custom mark in place of Plot.arrow\n new FlowCurve(\n odData.filter((d) => d.numJourneys >= minJourneys),\n {\n x1: \"oLon\",\n y1: \"oLat\",\n x2: \"dLon\",\n y2: \"dLat\",\n strokeWidth: (d) => Math.pow(d.numJourneys, 1.5) / 800,\n opacity: \"numJourneys\",\n stroke: \"oVillage\"\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2808,"value":"As one final example, here is how we might make a data-driven flower mark based on two custom marks: one for the `Stem`, the other for the `Flower`.\n\nThe `Stem` has an `x` `y` location for its base, a vertical length channel in data space (`len`); can have its width `w` parameterised as a fraction of its length (default 0.04 [4%]); and its asymmetrical bend `asym` parameterised as a multiple of the stem's width (default 3).\n\nThe `Flower` uses similar positional channels and colour channels with the ability to specify the number of petals (`nPetals`), the channel for petal radius (`r`) and the width and length of the petals relative to the radius (`petalL` and `petalW`).","pinned":false,"hidden":false,"mode":"md"},{"id":2811,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2935,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3117,"value":"Here's an example using both marks to create a data-driven flowerbed:","pinned":false,"hidden":false,"mode":"md"},{"id":3185,"value":"viewof button = Inputs.button(\"Lay a new flowerbed\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2815,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"designNote(\n md`\n- When none of the other customisation approaches gives you sufficient creative control`,\n { title: \"When to use fully customised marks:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3215,"value":"---\n\n_**Thanks to @fil (Philippe Riviere) for some checking and feedback; @mbostock (Mike Bostock) for some useful suggestions; and @tombor (Thomas Ansart) for bringing Motif.js to my attention.**_","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"\n\n---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":2560,"value":"### A1. Data","pinned":false,"hidden":false,"mode":"md"},{"id":1265,"value":"_Simple vector field dataset:_","pinned":false,"hidden":false,"mode":"md"},{"id":1237,"value":"vData = Array.from({ length: 20 }).flatMap((_, y) =>\n Array.from({ length: 30 }, (_, x) => {\n const swirl = 3.5 * atan2(y, x) + hypot(x, y) / 2;\n const [dx, dy] = [cos(swirl), sin(swirl)];\n return { x, y, mag: 2 + dy * dx, dir: (180 * atan2(dy, dx)) / π };\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"_Sample data for the livestock example. This takes a simple table, converts it to Tidy format than counts the number of discrete items in each category:_","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"livestockData = T.tidy(\n [\n { country: \"Great Britain\", cattle: 3, pigs: 2, sheep: 10 },\n { country: \"United States\", cattle: 9, pigs: 6, sheep: 7 }\n ],\n T.pivotLonger({\n cols: [\"cattle\", \"pigs\", \"sheep\"],\n namesTo: \"livestock\",\n valuesTo: \"volume\"\n })\n).flatMap((d) =>\n Array.from({ length: d.volume }, (_, i) => ({ ...d, x: i + 1 }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"_London car access data:_","pinned":false,"hidden":false,"mode":"md"},{"id":1777,"value":"londonBoroughData = readData(\n \"londonBoroughs.json\",\n \"https://gicentre.github.io/data/geoTutorials/\"\n).then((d) => topojson.feature(d, \"boroughs\").features)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"boroughAccess = createLookup(carAccessData, { key: \"borough\", value: \"access\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2599,"value":"_Simple animal dataset for bar chart examples:_","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"animalData = [\n { animal: \"cat\", count: 25 },\n { animal: \"dog\", count: 19 },\n { animal: \"fish\", count: 4 },\n { animal: \"axolotl\", count: 15 },\n { animal: \"bumblebee\", count: 38 },\n { animal: \"echidna\", count: 9 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2737,"value":"_London bike hire origin-desintation data:_","pinned":false,"hidden":false,"mode":"md"},{"id":2739,"value":"odData = FileAttachment(\"bikeHireODsJan2025.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2758,"value":"villages = [\n ...new Set(odData.map((d) => d.oVillage.replace(\"_OLD\", \"\")).sort())\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2741,"value":"thamesGeodata = d3\n .json(\"https://gicentre.github.io/data/london/thamesLonLat.json\")\n .then((feats) => topojson.feature(feats, feats.objects.thames))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2746,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2744,"value":"bikehireBounds = new GeoJSON()\n .points([\n [-0.24, 51.45],\n [0.004, 51.55]\n ])\n .boundingRect()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3168,"value":"_Random flower data:_","pinned":false,"hidden":false,"mode":"md"},{"id":3170,"value":"flowers1 = {\n button; // Recompute when the button is pressed\n const gauss = () => abs(d3.randomNormal()());\n return d3.range(0, 250).map((d) => ({\n x: d,\n y: gauss(),\n len: abs(gauss()),\n a: gauss(),\n b: gauss()\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3173,"value":"flowers2 = {\n button; // Recompute when the button is pressed\n const gauss = () => abs(d3.randomNormal()());\n return d3.range(0, 50).map((d) => ({\n x: d * 5,\n y: gauss(),\n len: abs(gauss()),\n a: gauss(),\n b: gauss()\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"### A2. Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"_For parsing SVG path strings:_","pinned":false,"hidden":false,"mode":"md"},{"id":792,"value":"PathData = require(\"path-data@0.0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2575,"value":"_For data tidying:_","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"T = require(\"@tidyjs/tidy@2.5.1/dist/umd/tidy.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2586,"value":"_For reading and joining data tables:_","pinned":false,"hidden":false,"mode":"md"},{"id":1769,"value":"import { createLookup, readData } from \"@jwolondon/teaching-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"_Some symbols for making trig code a little more compact:_","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"π=Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":3023,"value":"𝜏 = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"cos = Math.cos","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"sin = Math.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"atan2 = Math.atan2","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"sqrt = Math.sqrt","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"hypot = Math.hypot","pinned":false,"hidden":false,"mode":"ojs"},{"id":2402,"value":"abs = Math.abs","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"### A3. Page styling","pinned":false,"hidden":false,"mode":"md"},{"id":1182,"value":"_For blue 'When to...' boxes:_","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"import { designNote } from \"@jwolondon/schema-teaching2025\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"import { loadFonts, setPageStyle } from \"@jwolondon/teaching-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"loadFonts()","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"setPageStyle()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}