# lollipop chart: getting the dots to display on the x-axis.

**URL:** <https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214>\
**Category:** Help\
**Created:** [October 28, 2022, 6:03pm UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214 "2022-10-28T18:03:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![haileyhoyat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/haileyhoyat/32/7099_2.png) [@haileyhoyat](https://talk.observablehq.com/u/haileyhoyat)\
**Post date:** [October 28, 2022, 6:03pm UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214/1 "2022-10-28T18:03:32Z")

</div>

hello, im hails and im making my first observable notebook (still in the drafting phase).

**im making a lollipop chart with multiple points on each line. i need the top tick marks (x-axis) to go from 0 to 100, and the dots to be plotted appropriately on that x-axis. all of my data points are integers from 0 to 100 (no floating points and no percentages).**

this is my x() and xAxis() functions. i think it’s correct to make the ticks for from 0 to 100.

> **[Senate Ages Dot Plot](https://observablehq.com/d/991130d512a0bf46#x)**
>
> Age of sitting senators y axis space between each year entry margin stuff

But then the lollipops are not displaying correctly (the dots are all on the left side).  
I think it has something to do with “creating the line” and “creating the dots” functions in first code block here.

> **[Senate Ages Dot Plot](https://observablehq.com/d/991130d512a0bf46#chart)**
>
> Age of sitting senators y axis space between each year entry margin stuff

any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 29, 2022, 1:42am UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214/2 "2022-10-29T01:42:17Z")

</div>

I think this might be about what you’re looking for:

> **[Senate Ages Dot Plot](https://observablehq.com/d/cd3f1061e6ec8c6e)**
>
> Age of sitting senators y axis space between each year entry margin stuff

If so, you were really close. The one issue was in the definition of ‘cx’. I sent you a suggestion to change it to:

```
  .attr('cx', function(d) {
    let k = d[0];
    return x(d[1][k])
  })

```

I guess the structure of the data is just a bit tricky. I think there are a few things in the notebook that are more complicated than they need to be. The data could be read in much more easily using the [`FileAttachement` interface](https://observablehq.com/@observablehq/file-attachments) for example. Also, unless you want a lot of interactivity in the final result, you could probably set the graphic up using [Plot](https://observablehq.com/@observablehq/plot).

---

<div class="post-metadata">

**Author:** ![haileyhoyat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/haileyhoyat/32/7099_2.png) [@haileyhoyat](https://talk.observablehq.com/u/haileyhoyat)\
**Post date:** [October 29, 2022, 4:44am UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214/3 "2022-10-29T04:44:01Z")

</div>

hi! thank you so much for the help - very useful, i appreciate it. yes, so i was able to merge your suggestion. seeing the dots now. definitely going to check out those other techniques you mentioned. i think the lesson is there are no shortcuts, im gonna have to really learn d3 properly.

also, slightly parallel, in the meantime i was able to somewhat accomplish my goal of vizualizing ages of current senators here ([Ages of Currently Sitting Senators](https://thetanyagallery.com/senate-ages-2022/index.html)). eventually i will do more advanced vizualizations.

p.s. that’s so awesome that you’re a math professor - good for you. i sort of tapped out at discrete mathematics. @mcmcclur

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 29, 2022, 1:31pm UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214/4 "2022-10-29T13:31:59Z")

</div>

Glad to hear it helped!

> [@haileyhoyat](#):
>
> i think the lesson is there are no shortcuts, im gonna have to really learn d3 properly.

Learning D3 is definitely worthwhile and also a bit of a commitment. Even if your objective is ultimately to get good with D3, there’s no harm in learning Observable Plot as well; there’s a lot of connections and overlap between the two. Here’s how I might generate figures like the ones you’ve got using Plot:

> **[Ages of US Senators](https://observablehq.com/d/8233a2779e28c692)**
>
> With Plot A response to this forum post Not sure exactly what the data represents here; as there's only 90 data points, I guess it's not all US Senators. Nonetheless, it generates figures somewhat like those referred to in the post. A dot and line...

Note that I did reference D3 (as `d3`), Arquero (as `aq`), and vanilla Javascript to do a bit of data manipulation.

> [@haileyhoyat](#):
>
> that’s so awesome that you’re a math professor - good for you. i sort of tapped out at discrete mathematics

Yeah, it’s not a bad deal! 🙂  
I saw you gave my [Greedy Graph Coloring notebook](https://observablehq.com/d/7e4ff32b58dd500f) a like - thanks! I built that specifically to demonstrate an algorithm to my discrete math class.

---

<div class="post-metadata">

**Author:** ![haileyhoyat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/haileyhoyat/32/7099_2.png) [@haileyhoyat](https://talk.observablehq.com/u/haileyhoyat)\
**Post date:** [November 2, 2022, 5:39pm UTC](https://talk.observablehq.com/t/lollipop-chart-getting-the-dots-to-display-on-the-x-axis/7214/5 "2022-11-02T17:39:34Z")

</div>

Hi @mcmcclur

I was able to make my first observable notebook here looking at senator ages. Thank you for your generous guidance - I greatly appreciate it.

> **[Comparison of Senator Ages ('92, '02, '12, '22)](https://observablehq.com/d/ad7c540ff9da6784)**
>
> According to USAFacts, as of 2021, 16% of the U.S. population is aged 65 and over. Today 56% of the U.S. senate is 65 and over. In 1992 there were (16) senators who were aged 70 and over. Today there are (35). In 1992 there was one single senator...