Using custom time axis tick labels instead of timestamps.

[belmarca]

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?

[Fil]

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

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

[belmarca]

Hi Fil, this solution works. Thanks a lot!