Hello,
I’d like to ask you some advice. What are the solutions when we have too many values on the Y axis or on the X axis as in my graph below.
I know that bubble info is a possibility but I wanted to try something other than bubble info.
Another question: if, for example, I put bubble info in my graph with the name of each country. In concrete terms, what would be relevant to put on the X axis? Because the country info (X axis) is in my bubble info.
It’s hard to say for sure, since you haven’t shared a notebook, but it looks to me like your x data is not numeric. Try this, for example:
{
let data = d3.range(100).map((x) => [x.toString(), 0]);
return Plot.plot({
height: 100,
marks: [Plot.dot(data)]
});
}
The result looks like so:
If you remove the .toString() after the x, you’ll get more sensible tick marks.
Having said that, I’d expect to see the same yellow warning icon in your picture. Again, though, it’s so much easier to tell with full information.
Hello, thank you very much for your reply. I tried to insert your code but it doesn’t seem to work as it should. To give you a clearer idea, I’m sharing the link to my file below. The cells I’m having trouble with are between the headline "Advice when we have too many values on one of the axes" and “END”.
If I put numbers on the X axis instead of countries, do you think the graph will be legible? Would I need to add bubble info to make it readable? I’d just like to show on a graph the differences there can be in the number of certificates for an ISO standard (selected by the user).
Thank you so much for your time!
I see. From your original picture, I had guessed that you had numeric data that was just stored as strings so that the easy approach would be convert those strings to numbers. As it turns out, though, your x data is categorical and quite literally a bunch of strings corresponding to country names. Honestly, it’s not clear to me that a dot plot is likely to be appropriate in this case; you really need to think about the best way to represent and illustrate this data.
I faced a challenge similar to this sometime back. My solution was to sort the data by the numeric value and then display only the largest few in a bar plot. I also provided a slider that allowed the user to choose how many they viewed. The result is in this notebook:
Perhaps, something along these lines could help?
2 Likes
Greetings. I’m a novice, but I just figured out how to solve that problem for my own project. The issue was the original format of the data. What you might be facing is that the graph output is confused as to how to treat your data. Consider tweaking the underlying format of the data feeding your graph. Then, you might also need to reinforce the format for the axis.
1 Like
Hi, that’s great what you’ve done. I love it! I wanted to try to do the same thing as you for the histogram. However, I can’t display the abbreviated country names named ISO3 in my abbreviations file.
I’ve tried to make another version of the graph but this time I’ve only got one country with the ISO3 format displayed.
Could you help me target what I’m doing wrong in my code?
The graph is in the "Final graph 5" section on this link :** (I did a 2nd test below, but this time only an ISO3 is displayed)
@logic-based
Hello, thank you very much for your feedback.
I don’t understand what you mean by data format? I must admit I’m new to this platform too 
In my situation, I just have too much data on my X axis (190 countries) and I’m looking for a clever way to get a readable graph despite this.
You could:
- rotate your label by some degrees to utilize vertical space:
Axis mark | Observable Plot - increase the plot’s width with
Plot.plot({width: <bigger value>, ...<rest>})
However, these still aren’t going to help your use case much – 190 labels are just too much to cramp in limited width. It’s like you can’t print an entire book in one line.
An easier alternative might be placing countries at Y-axis, and let your chart grow vertically.
Thanks for your reply.
Yes, there are many values, which is why I want to display the countries as abbreviations, which is a column named ISO3 in my MasterFile. In addition, I want to use a range to display the ISO3s on the X axis, which is as follows (1st element of the page whose link I have paratagged) :
viewof num_countries_to_show = Inputs.range([5, 190], {
value: 5,
step: 1,
label: “Count:”
})
However, I wanted to fix my X-axis values problem first. I don’t want the full country names to be displayed on the X axis, but only on the info bubbles. So in the end I want to have the country name abbreviations “ISO3” on my X axis and the full country names in the “country” info bubbles.
You can specifically format axis labels, without affecting your tooltip on your data point by either:
Plot.plot({
x: {
tickFormat:
// replace with your own function to get abbriviation
function getAbbriviation(fullName) {
return fullName.slice(0, 3);
},
tickRotate: 45
},
}
...
)
Or modifying the axis as a mark:
Plot.plot({
...
marks: [
Plot.axisX({
tickFormat:
// replace with your own function to get abbriviation
function getAbbriviation(fullName) {
return fullName.slice(0, 3);
},
tickRotate: 45
}),
...
]})
1 Like
No problem. If you look at the raw data, the issue might be that the plot function is interpreting it incorrectly. For my challenge, I had data in percentages in the original table. The axis was mangled. But when I changed the underlying data to decimal (.12 instead of 12%), I broke through.
1 Like
also too, if the labels are not categorical, but numerical, you can change the scale or intervals between axis labels. So for example if the x axis labels went from 1 - 100, you could change the ticks from 1,2,3,4,5…etc to 0, 25, 75, 100.
1 Like
Thank you for your feedback !
