# Positionning text depending on increase or decrease of population in bar chart

**URL:** <https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294>\
**Category:** Help\
**Created:** [February 28, 2022, 7:25pm UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294 "2022-02-28T19:25:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![zdez](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zdez](https://talk.observablehq.com/u/zdez)\
**Post date:** [February 28, 2022, 7:25pm UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294/1 "2022-02-28T19:25:12Z")

</div>

Hi everyone,

Pretty new to javascript, d3, and observable, but bear with me. Coming from a GIS/scientific computing background. Starting to love d3 to create beautiful graphs with a lot less effort. ObservableHQ notebooks seem really familiar coming from Jupyter notebooks.

I am working on creating some bar plots of the 2021 Census data. In the last graph of the published notebook [here](https://observablehq.com/@f4cd9cf9f3644d10/montreal-census-exploration), I am trying to get the `dx` to depend on `d`. More precisely, for negative population variations, I would like the text to appear on the right of the bar and, for positive population variations, on the left.

The syntax `dx: d => getTextPosition(d.variation_population_2021_2016, 10)` is not working. Is it because `d` is not accessible for this specific tag. No specific error message is raised and I have not been able to find similar issues or mentions in the documentation.

Thanks,

Zac

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 28, 2022, 8:29pm UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294/2 "2022-02-28T20:29:54Z")

</div>

At present dx is a constant, not available as a channel. What you might want to do in this case is to use two marks, with a filter for positive/negative values:

```nohighlight
    Plot.text(
      economicRegionData, {x: "variation_population_2021_2016", y: "cmaname",
                           filter: d => d.variation_population_2021_2016 >= 0,
                           text: d => (d.variation_population_2021_2016*100).toFixed(1), 
                           textAnchor: "start",
                           dx: 5,
                           fontSize: 11
                          }
    ),
    Plot.text(
      economicRegionData, {x: "variation_population_2021_2016", y: "cmaname",
                           filter: d => d.variation_population_2021_2016 < 0,
                           text: d => (d.variation_population_2021_2016*100).toFixed(1), 
                           textAnchor: "end",
                           dx: -5,
                           fontSize: 11
                          }
    ),
```

---

<div class="post-metadata">

**Author:** ![zdez](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zdez](https://talk.observablehq.com/u/zdez)\
**Post date:** [February 28, 2022, 8:52pm UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294/3 "2022-02-28T20:52:17Z")

</div>

> [@Fil](#):
>
> ```auto
> Plot.text(
> economicRegionData, {x: "variation_population_2021_2016", y: "cmaname",
> filter: d => d.variation_population_2021_2016 < 0,
> text: d => (d.variation_population_2021_2016*100).toFixed(1), 
> textAnchor: "end",
> dx: -5,
> fontSize: 11
> }
> 
> ```

Exactly what I needed! thanks

---

<div class="post-metadata">

**Author:** ![zdez](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zdez](https://talk.observablehq.com/u/zdez)\
**Post date:** [February 28, 2022, 10:00pm UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294/4 "2022-02-28T22:00:46Z")

</div>

It could be another question of itself, but it still relates to the labels. In the republished notebook, the maximum negative values actually overlap the place names. I’ve been scrambling everywhere to find how to add some white space to the text or change the position of the axis to no avail. Do you have an idea @Fil of how I could work this out?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 1, 2022, 7:57am UTC](https://talk.observablehq.com/t/positionning-text-depending-on-increase-or-decrease-of-population-in-bar-chart/6294/5 "2022-03-01T07:57:27Z")

</div>

you could use an inset for the x scale, for example:

x: { insetLeft: 25, … }