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??!!
Hi @sabbyiqbal, first of all, congratulations on the work with the D3 library
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.
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,
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.