Department of Computer Science, Virginia Tech
function drawAxis(
svg,
scale,
orient,
pos,
title = "",
tpos = null,
trot = null
) {
let [f, x, y, tx, ty, r] = {
top: [d3.axisTop, 0, pos, d3.sum(scale.range()) / 2, -30, 0],
bottom: [d3.axisBottom, 0, pos, d3.sum(scale.range()) / 2, 30, 0],
left: [d3.axisLeft, pos, 0, -30, d3.sum(scale.range()) / 2, 270],
right: [d3.axisRight, pos, 0, 30, d3.sum(scale.range()) / 2, 90]
}[orient];
//let [x,y] = orient == "left" || orient == "right" ? [pos,0] : [0,pos];
//let y = orient == "top" || orient == "bottom" ? pos[1] : 0;
if (tpos != null) [tx, ty] = tpos;
if (trot != null) r = trot;
let a = tpos != null ? "start" : "middle";
let label = null;
let g = svg
.append("g")
.attr("transform", `translate(${x}, ${y})`)
.call(f(scale));
if (title != "")
label = g
.append("text")
.style("fill", "black")
//.attr("x", tpos[0])
//.attr("y", tpos[1])
.attr("text-anchor", a)
.attr("transform", `translate(${tx},${ty}) rotate(${r})`)
.html(title);
g.update = function (scaleNew) {
g.call(f(scaleNew));
};
return [g, label];
}
{
let height = 400;
let margin = 50;
var element = html`
<svg width=${width} height=${height} style="border:1px solid black" > </svg>`;
var svg = d3.select(element);
let scale = d3
.scaleLinear()
.domain([0, 100])
.range([margin, height - margin]);
let [g, t] = drawAxis(
svg,
scale,
"bottom",
height - margin,
"Example X bottom"
);
drawAxis(svg, scale, "top", margin, "Example X top");
drawAxis(svg, scale, "left", margin, "Example Y left");
drawAxis(svg, scale, "right", height - margin, "Example Y right");
//g.style("font-size", "20");
//t.style("font-size", "40");
//g.update(scale.domain([0, 200]));
return element;
}
{
let height = 400;
let margin = 50;
var element = html`
<svg width=${width} height=${height} style="border:1px solid black" > </svg>`;
var svg = d3.select(element);
let scale = d3
.scaleLinear()
.domain([0, 100])
.range([margin, height - margin]);
drawAxis(
svg,
scale,
"bottom",
height - margin,
"Example X bottom",
[100, 40]
);
drawAxis(svg, scale, "top", margin, "Example X top", [100, -40]);
drawAxis(svg, scale, "left", margin, "Example Y left", [-40, 100]);
drawAxis(
svg,
scale,
"right",
height - margin,
"Example Y right",
[40, 100],
0
);
return element;
}
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.
