distortions/lib/annotation.js

Helpers for visualizing distortion in nonlinear dimensionality reduction.

export function annotation(svg, options, width, height, margin) {
    const defaults = {
        title: "",
        x: "",
        y: ""
    };
    const opts = { ...defaults, ...options };
    
    return {
        type: 'labs',
        options: opts,
        render: () => {
            // Set title
            if (opts.title) {
            svg.append("text")
                .attr("x", width / 2)
                .attr("y", margin.top / 2)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .text(opts.title);
            }
            
            // Set x-axis label
            if (opts.x) {
            svg.append("text")
                .attr("x", width / 2)
                .attr("y", height - margin.bottom / 3)
                .attr("text-anchor", "middle")
                .text(opts.x);
            }
            
            // Set y-axis label
            if (opts.y) {
            svg.append("text")
                .attr("transform", "rotate(-90)")
                .attr("x", -height / 2)
                .attr("y", margin.left / 3)
                .attr("text-anchor", "middle")
                .text(opts.y);
            }
        }
    }
}