Published
Edited
Jun 5, 2020
2 stars
md`# Rotated axis labels
https://bl.ocks.org/mbostock/4403522
`
d3 = require("d3@3")
container = DOM.element('d3-div')
rotation = {
let increasing = true;
let i = 0;
while (true) {
yield Promises.delay(40, i);
i = increasing ? i + 1 : i - 1;
if (i > 90) {
increasing = false;
} else if (i == 0) {
increasing = true;
}
}
}
{
d3.select(container)
.selectAll('svg')
.remove();
var margin = { top: 250, right: 40, bottom: 250, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time
.scale()
.domain([new Date(2012, 0, 1), new Date(2013, 0, 1)])
.range([0, width]);
var xAxis = d3.svg.axis().scale(x);
var svg = d3
.select(container)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", Math.abs(rotation - 90) / 5 + 10)
.attr("x", 15)
.attr("dy", ".5em")
.attr("transform", `rotate(${rotation})`)
.style("text-anchor", rotation < 30 ? "middle" : "start");
svg
.append("text")
.attr("y", -20)
.text(`${rotation}°`);
}
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.
