Need feedback on ugly data dashboard

Code Feedback
1

So I created this monster: https://sabahatpk.github.io/

I can see that it’s ugly and not ready for presentation to the wider world. But design and styling is really not my forte. I would appreciate help on identifying what looks bad, how you would make it better, and (preferably) what CSS style I need to be modifying??!!

Thank you in advance.

2

Hi @sabbyiqbal, first of all, congratulations on the work with the D3 library :slight_smile:
Those charts came out really nice.

Some things that you could improve are:

  • More space between the “About This Dashboard” and “About Me” links at the top of the page. You can do so by giving the .nav-item elements a margin-right property.
    If think that in screen larger than 768px, removing the float: left property to li elements in the .navbar-nav feels better. Also I would make them unstyled by giving the class “list-unsyled” to the ul element (but that’s my personal preference).
  • For the first 2 charts, I’d move the legend outside of the chart area.
  • For the province chart, you could add 2 event listeners to each chart area. When the mouse enters the area or moves inside it, you can highlight the corrisponding region with a different color, while when the mouse leaves the area you can set the color back to the default one. If I remember correctly the 2 events were mouseover/mousemove and mouseleave.
    Also here, I’d either move the text outside of the chart area or color it with a color that gives more contrast to the background.
  • Still for the province part of the page, when the size of the screen is small to extra-small, part of the map ends outside of the screen.
  • All the colors in the legend don’t match the ones in the charts, while they should. In the case of the first 2 charts, if you move the legend outside of the chart area, overlapping identical colors won’t not an issue anymore.

Happy coding! :slight_smile:

1 Like
3

Play with fonts, colors, font sizes. I made a quick mockup to give you some ideas.

charts

1 Like
4

Thanks @simonebogni and @owel ! You’ve given me a lot to try out!

And thank you for the encouragement @simonebogni! Toiling in obscurity can be so discouraging sometimes.

5

I made some of the updates you recommended. Check original site for updates.

It’s hard to move the chart title and legends outside of the chart b/c all are encapsulated by one constructor function which places all chart elements within one SVG. See here for code, if you’re curious and have any ideas: https://github.com/SabahatPK/SabahatPK.github.io

So instead I made the titles another color, which helps a little but is probably not enough.

The legend having a different color is a weird problem. I checked what hex code the color1 scale is spitting out and it is the same 2 colors each time…so not sure why legend is slightly darker for one of the data points.

Still trying to figure out how to create interactive maps. It’s been a steep learning curve, :cry:

One thing that made a BIG difference was adding the “card effect” for each section. I was very happy with the effect from that little change.

Thanks again!