🏠 back to Observable

Using custom time axis tick labels instead of timestamps.

Hi,

I would like to know if it is possible to produce such axes in Observable Plot as could be done in pure d3 like

const margin = {top: 20, right: 10, bottom: 20, left: 10};
const width = chartDiv.offsetWidth - margin.left - margin.right,
      height = chartDiv.offsetHeight - margin.top - margin.bottom;
const g = d3.select("#chart").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 + ")");

let xScale = d3.scaleTime()
               .domain([start, end])
               .range([0, width]);
let xAxisGenerator = d3.axisBottom(xScale)
                       .ticks(nTicks)
                       .tickValues(tickValues)
                       .tickFormat(textFromValue);
let xAxis =  g.append("g")
              .call(xAxisGenerator)
              .selectAll("text")
              .style("text-anchor", "start")
              .attr("dx", ".8em")
              .attr("dy", "-5px")
              .attr("transform", function(d) {
                return "rotate(90)"
              });

which produces the following image:

I have found this is very easy to do in d3 but not in higher level libraries. Can (how) this be done in Plot?

you might be able to use the ticks and tickFormat options of the x axis, like so:

https://observablehq.com/@d3/d3-releases-timeline

Hi Fil, this solution works. Thanks a lot!