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

Community Help
1

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.

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.

any help would be greatly appreciated.

1 Like
2

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

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 for example. Also, unless you want a lot of interactivity in the final result, you could probably set the graphic up using Plot.

2 Likes
3

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). 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

1 Like
4

Glad to hear it helped!

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:

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

Yeah, it’s not a bad deal! :slight_smile:
I saw you gave my Greedy Graph Coloring notebook a like - thanks! I built that specifically to demonstrate an algorithm to my discrete math class.

1 Like
5

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.

2 Likes