CSS and other design questions

I’m not sure if I should post this under Project Feedback or Programming Help but I think it’s a combination of the 2.

I managed to deploy the basics of my data viz idea:
https://data-driven-pakistan-data-stories.netlify.com/
Code: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs

But now I want to add those CSS and design touches that make it look polished and professional. I have a few ideas that I am not sure how to implement but am also looking for suggestions from others.

These are my ideas:

  1. Responsiveness: I was able to implement this overall but some headings are not behaving as they should and I don’t know why. The <h5> with text "How has poverty changed at the district level between 2004 and 2014? appears to be moving towards being right-justified as the screen gets smaller. And none of the <h6> card headings (Khyber Pakhtunkhwa etc) are responding at all even though it is included in a <div> that is responsive.

  2. What do I do with the overlapping labels? If I make height of svg bigger, the chart gets too long to be viewed comfortably. And I cannot simply use tick() to set the number of ticks I want to see due to the way I have set up the chart. This is more of a design question than a d3 question although if anyone has a technical fix, please let me know!

  3. Any other suggestions? (These can be on any aspect, i.e. design or coding structure etc).

Hi there sabbyiqbal,
When I’m adjusting the screen the overall responsiveness seems ok.
Everything on my screen in shrinking in sync.

The ‘H5’ you mention first seems to stay together as you resize, since you make use of the ‘vm’ property. Perhaps a better visual is to activate the ‘text-align: center’.

The ‘H6’s’ seems to be looking ok from what I can see. I can see them and they seem to adjust ok. I can apply centering to them and that works?

Item-2: Perhaps redesign to use tabs on Left side or across top to have each chart show up on the main screen. Maybe you could even design to have nav on L and 2 charts on main screen to do comparison?
I agree, it is a bit lengthy at this point still.

Item-3: You’ll finish by just designing charts and main page backgrounds to a more pleasing look with colors, etc.

Let me know if i’m too far off base here.
Nice work so far.

1 Like

You have an uneven margin on the h5. Remove the margin-left and use margin auto to center it margin: 50px auto 0 auto. I would also be careful when using vw for font size, the text will get too small on small screen sizes and needs some sort of min size implemented.

Edit: not sure what you mean about the h6, what is it you are expecting it to do? It just has a font size set in rem.

I don’t know enough about D3 to really help with the other stuff but surely there is some way to give some vertical spacing to the labels?

1 Like