2e:null 2f:["$","title",null,{"children":"Textbox Mark (HTML Text Mark) | boB Rudis | Observable"}] 34:T416,Plot.plot({ width: width, marks: [ Plot.dot( cars.filter((d) => d.cylinders == 8), { x: "economy (mpg)", y: "power (hp)" } ), new Textbox(oneCar, { x: (d) => d["economy (mpg)"] + 0.2, y: (d) => d["power (hp)"] + 6, text: (d) => `

The ${d.name}
has ${d.cylinders} cylinders, and
was made in '${d.year}.` }), new Textbox(hpCar, { x: (d) => d["economy (mpg)"] - 0.2, y: (d) => d["power (hp)"] + 6, text: (d) => `

The ${d.name}
has ${d.cylinders} cylinders, and
was made in '${d.year}.

` }) ] })35:T1ddc,Textbox = { const offset = 0; const reindex = Symbol("reindex"); const field = (name) => (d) => d[name]; const constant = (x) => () => x; const TypedArray = Object.getPrototypeOf(Uint8Array); const indexOf = { transform: range }; const identity = { transform: (d) => d }; function textBBox(x) { const d = document.createElement("div"); d.style.display = "inline-block"; d.innerHTML = x; document.body.appendChild(d); const box = d.getBoundingClientRect(); d.remove(); return { w: box.width, h: box.height }; } function create(name, { document }) { return d3.select(d3.creator(name).call(document.documentElement)); } function template(strings, ...parts) { let n = parts.length; // If any of the interpolated parameters are strings rather than functions, // bake them into the template to optimize performance during render. for (let j = 0, copy = true; j < n; ++j) { if (typeof parts[j] !== "function") { if (copy) { strings = strings.slice(); // copy before mutate copy = false; } strings.splice(j, 2, strings[j] + parts[j] + strings[j + 1]); parts.splice(j, 1); --j, --n; } } return (i) => { let s = strings[0]; for (let j = 0; j < n; ++j) { s += parts[j](i) + strings[j + 1]; } return s; }; } function applyAttr(selection, name, value) { if (value != null) selection.attr(name, value); } function maybeNumberChannel(value, defaultValue) { if (value === undefined) value = defaultValue; return value === null || typeof value === "number" ? [undefined, value] : [value, undefined]; } function numberChannel(source) { return source == null ? null : { transform: (data) => valueof(data, source, Float64Array), label: labelof(source) }; } function labelof(value, defaultValue) { return typeof value === "string" ? value : value && value.label !== undefined ? value.label : defaultValue; } function maybeTake(values, index) { return values != null && index ? take(values, index) : values; } function take(values, index) { return map(index, (i) => values[i], values.constructor); } function valueof(data, value, type) { const valueType = typeof value; return valueType === "string" ? maybeTypedMap(data, field(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]); } function map(values, f, type = Array) { return values == null ? values : values instanceof type ? values.map(f) : type.from(values, f); } function nonempty(x) { return x != null && `${x}` !== ""; } function coerceNumber(x) { return x == null ? NaN : Number(x); } function coerceNumbers(values) { return values instanceof TypedArray ? values : map(values, coerceNumber, Float64Array); } function floater(f) { return (d, i) => coerceNumber(f(d, i)); } function maybeTypedMap(data, f, type) { return map( data, type?.prototype instanceof TypedArray ? floater(f) : f, type ); } function arrayify(data) { return data == null || data instanceof Array || data instanceof TypedArray ? data : Array.from(data); } function maybeTypedArrayify(data, type) { return type === undefined ? arrayify(data) // preserve undefined type : data instanceof type ? data : type.prototype instanceof TypedArray && !(data instanceof TypedArray) ? type.from(data, coerceNumber) : type.from(data); } function keyword(input, name, allowed) { const i = `${input}`.toLowerCase(); if (!allowed.includes(i)) throw new Error(`invalid ${name}: ${input}`); return i; } function maybeKeyword(input, name, allowed) { if (input != null) return keyword(input, name, allowed); } function maybeAnchor(value, name) { return maybeKeyword(value, name, [ "middle", "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left" ]); } function maybeFrameAnchor(value = "middle") { return maybeAnchor(value, "frameAnchor"); } function isTextual(values) { for (const value of values) { if (value == null) continue; return typeof value !== "object" || value instanceof Date; } } function isIterable(value) { return value && typeof value[Symbol.iterator] === "function"; } function range(data) { const n = data.length; const r = new Uint32Array(n); for (let i = 0; i < n; ++i) r[i] = i; return r; } function applyTransform(selection, mark, { x, y }, tx = offset, ty = offset) { tx += mark.dx; ty += mark.dy; if (x?.bandwidth) tx += x.bandwidth() / 2; if (y?.bandwidth) ty += y.bandwidth() / 2; if (tx || ty) selection.attr("transform", `translate(${tx},${ty})`); } function applyFrameAnchor( { frameAnchor }, { width, height, marginTop, marginRight, marginBottom, marginLeft } ) { return [ /left$/.test(frameAnchor) ? marginLeft : /right$/.test(frameAnchor) ? width - marginRight : (marginLeft + width - marginRight) / 2, /^top/.test(frameAnchor) ? marginTop : /^bottom/.test(frameAnchor) ? height - marginBottom : (marginTop + height - marginBottom) / 2 ]; } class Textbox extends Plot.Mark { constructor(data, options = {}) { const { x, y, text = isIterable(data) && isTextual(data) ? identity : indexOf, frameAnchor, rotate } = options; const [vrotate, crotate] = maybeNumberChannel(rotate, 0); super( data, { x: { value: x, scale: "x", optional: true }, y: { value: y, scale: "y", optional: true }, rotate: { value: numberChannel(vrotate), optional: true }, text: { value: text, filter: nonempty, optional: true } }, options, Textbox.defaults ); this.rotate = crotate; this.frameAnchor = maybeFrameAnchor(frameAnchor); } render(index, scales, channels, dimensions, context) { const { x, y } = scales; const { x: X, y: Y, rotate: R, text: T } = channels; const { rotate } = this; const [cx, cy] = applyFrameAnchor(this, dimensions); return create("svg:g", context) .call(applyTransform, this, { x: X && x, y: Y && y }) .call((g) => { return g .selectAll() .data(index) .enter() .append("svg:foreignObject") .attr("width", (d, i) => textBBox(T[i]).w) .attr("height", (d, i) => textBBox(T[i]).h) .html((d, i) => T[i]) .attr( "transform", template`translate(${X ? (i) => X[i] : cx},${ Y ? (i) => Y[i] : cy })${ R ? (i) => ` rotate(${R[i]})` : rotate ? ` rotate(${rotate})` : `` }` ); }) .node(); } } return Textbox; }36:[] 32:{"id":"7206b9dd87e11c64","slug":"textbox-mark-html-text-mark","title":"Textbox Mark (HTML Text Mark)","thumbnail":"7dd415c4410b3ccfde086d83ead23bc4ec5c33222a9f9c287a55a176bbc3e410","access_level":"public","create_time":"$D2024-04-20T10:53:59.213Z","update_time":"$D2024-04-20T11:31:54.205Z","view_time":null,"first_public_time":"$D2024-04-20T11:19:40.679Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"0b35eed5f0115bfa","login":"hrbrmstr","name":"boB Rudis","avatar_url":"https://avatars-next.observableusercontent.com/a26fc528815774e5c1e5ba21faf0a748a105234dd4c0fad8293732ef66c00f82","tier":"starter_2024"},"version":73,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4193fbe2c8b30fd3","login":"hrbrmstr","name":"boB Rudis","avatar_url":"https://avatars-next.observableusercontent.com/a26fc528815774e5c1e5ba21faf0a748a105234dd4c0fad8293732ef66c00f82","tier":null}],"members":[{"type":"team","id":"0b35eed5f0115bfa","login":"hrbrmstr","name":"boB Rudis","avatar_url":"https://avatars-next.observableusercontent.com/a26fc528815774e5c1e5ba21faf0a748a105234dd4c0fad8293732ef66c00f82","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4193fbe2c8b30fd3","login":"hrbrmstr","name":"boB Rudis","avatar_url":"https://avatars-next.observableusercontent.com/a26fc528815774e5c1e5ba21faf0a748a105234dd4c0fad8293732ef66c00f82","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Textbox Mark (HTML Text Mark)","cells":[{"id":0,"value":"# Textbox Mark (HTML Text Mark)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"This is a stab at trying to make a Plot Mark that will let us use HTML vs plain text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"oneCar = cars.filter(\n (d) =>\n (d.cylinders == 8) & (d[\"economy (mpg)\"] > 22) & (d[\"economy (mpg)\"] < 23.9)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"hpCar = cars.filter((d) => d[\"power (hp)\"] == 230)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"