# Time based x-axis with scaleTime and scaleBand

**URL:** <https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490>\
**Category:** Help\
**Created:** [October 23, 2019, 1:59pm UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490 "2019-10-23T13:59:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [October 23, 2019, 1:59pm UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490/1 "2019-10-23T13:59:10Z")

</div>

I would like to create a plot where the x-axis is time in days, and the date range in something that is user input. The plot will have two types of symbols - circles and bars to denote two different types of information.

In order to accomplish this I started using a `d3.scaleTime` scale, and while the circles were centered on the day, the bars were not (the left hand edge of the bar started on the day, rather than the bar being centered on the day).

After some looking around it seems like I needed to use `d3.scaleBand`, where the domain is a list of the days in the date range.

So I created a plot where the circles are plotted using the `d3.scaleTime` scale and the bars are plotted using the `d3.scaleBand` scale.

[This is the notebook](https://observablehq.com/d/f264a42374862e72) with my code so far, and where you can see that while the circles are centered on the days they occur on, the bars are not and in fact drift to the left.

Is there a way to accomplish what I want?

---

<div class="post-metadata">

**Author:** ![bchoatejr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bchoatejr/32/1617_2.png) [@bchoatejr](https://talk.observablehq.com/u/bchoatejr)\
**Post date:** [October 23, 2019, 5:46pm UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490/2 "2019-10-23T17:46:32Z")

</div>

This might work for you:

> **[Date scaleBand](https://observablehq.com/@bchoatejr/date-scaleband)**
>
> An Observable notebook by bchoatejr.

for the bars, offset the x position by half the bandscale

```
.attr('x', d => x(new Date(d[0]))-x_band.bandwidth()/2)
```

---

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [October 23, 2019, 6:56pm UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490/3 "2019-10-23T18:56:02Z")

</div>

That works nicely.

To make sure I understand, you locate the left edge of the bar by first locating the center with `x(new Date(d[0]))` and then shifting it over by half of the bar width, right?

---

<div class="post-metadata">

**Author:** ![bchoatejr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bchoatejr/32/1617_2.png) [@bchoatejr](https://talk.observablehq.com/u/bchoatejr)\
**Post date:** [October 24, 2019, 1:17am UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490/4 "2019-10-24T01:17:38Z")

</div>

Correct! Here are some other examples:

[https://observablehq.com/@fil/summer-heat](https://observablehq.com/@fil/summer-heat) (uses half bandwidth to offset labels)

You can also draw a line and set the width of the line to the band width:

> **[Candlestick Chart](https://observablehq.com/@d3/candlestick-chart)**
>
> An Observable notebook by D3.

---

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [October 24, 2019, 5:20pm UTC](https://talk.observablehq.com/t/time-based-x-axis-with-scaletime-and-scaleband/2490/5 "2019-10-24T17:20:27Z")

</div>

Great! Thanks for the other examples, it helps tremendously to look at these other examples and see what is possible.