News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Oct 29, 2022
9 stars
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 10)
.style("overflow", "visible");
const arrow = arrow9()
.id("my-arrow-9")
.attr("fill", "blue")
.attr("stroke", "blue");
svg.call(arrow);
svg.append("polyline")
.attr("marker-end", `url(#${arrow.id()})`)
.attr("points", [[5, 0], [56, 0]])
.attr("stroke", arrow.attr("stroke")) // arrow.attr can also be used as a getter
.attr("stroke-width", 1);
svg.call(svg => txt(svg, "Arrow 9"));
return svg.node();
}
function arrow9() {
let attrs = {
fill: "black",
stroke: "black"
};
let id = "d3-arrow-1";
let scale = 1;
function arrow(context){
draw(
context,
attrs,
id,
scale,
18,
6,
`M 1 1 L ${18 * scale} ${6 * scale} L 1 ${11 * scale} Z`
);
}
arrow.id = function(string){ return arguments.length ? (id = string, arrow) : id; }
arrow.scale = function(number){ return arguments.length ? (scale = number, arrow) : scale; }
arrow.attr = function(key, value){ return arguments.length === 2 ? (attrs[key] = value, arrow) : attrs[key]; }
return arrow;
}
FileAttachment("arrows.png").image()
txt = (svg, text) => {
svg.append("text")
.attr("x", 68)
.attr("y", 5)
.style("font-family", "sans-serif")
.style("font-size", 11)
.style("fill", "darkblue")
.text(text);
}
function draw(context, attrs, id, scale, refX, refY, d){
let defs = context.select("defs");
if (defs.empty()) {
defs = context.append("defs");
}
const path = defs.append("marker")
.attr("id", id)
.attr("refX", refX * scale)
.attr("refY", refY * scale)
.attr("markerWidth", refX + 2 * scale)
.attr("markerHeight", refY * 2 * scale)
.attr("markerUnits", "userSpaceOnUse")
.attr("orient", "auto-start-reverse")
.append("path")
.attr("d", d);
iterate(attrs, path);
}
iterate = (attrs, path) => {
const keys = Object.keys(attrs), l = keys.length;
for (let i = 0; i < l; i++){
const key = keys[i];
path.attr(key, attrs[key]);
}
}
import { toc } from "@harrystevens/toc";
d3 = require("d3-selection@1", "d3-arrow@0.0.23");
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.
