First page edits

[PadmanabhanAshwin]

Issue list:

MR:

• [x] Independent heading div between bar-plot and number animation for text.
• [x] Heading name and styling.
• [x] Buttons at the top to switch slides.
• [x] Stroke styling.
• [x] Animate div changes

AP

• [ ] Forced-directed chart: other fields.
• Identify fields <--> find data for fields. @meenurajapandian : Help appreciated.
• Consolidate data sources in code.
• Front-end changes to include added fields.
• [x] Dropdown styling.
• [x] Animate counting
• [x] Speeding up transition in forced-directed graph.
• [x] Rounding-up for proportion < 1%.

Unassigned:

• [x] Force directed chart: title center and circle centers don't align properly.

[meenurajapandian]

What is stroke styling?

[meenurajapandian]

Also, dropdown styling is near impossible the way it is set up. Apparently it is OSS dependent and not a HTML/CSS thing that can be edited. However, the select option itself can be rebuilt to something like this. This will need D3 changes too.

Ref: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

[PadmanabhanAshwin]

What is stroke styling?

Strokes (boundary colors) for the bar plot and the forced directed graph.

[meenurajapandian]

https://www.w3schools.com/howto/howto_custom_select.asp Correct link for custom drop down

[PadmanabhanAshwin]

Also, dropdown styling is near impossible the way it is set up. Apparently it is OSS dependent and not a HTML/CSS thing that can be edited. However, the select option itself can be rebuilt to something like this. This will need D3 changes too.

Ref: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

I think it is indeed possible to create drop-downs with pure CSS (check link and point 6 here). Alternatively, why can't we bootstrap some style?

[meenurajapandian]

The first link is related to dropdown options and not really select. Don't know how d3 can handle the change. The second link doesn't have much changed except for background (after converting to pure css). I mainly want to remove the shadow for the dropdown list which this does not.

[PadmanabhanAshwin]

Can we think of doing something that does not require JS? Is there a workaround for the shadow? What about bootstrap?

[meenurajapandian]

Stroke color for bar charts is hard to see. Bar plot just looks darker. Zoomed In with stroke color Zoomed Out with stroke color Zoomed Out without stroke color

[PadmanabhanAshwin]

Noob question: Do we want the bar to look lighter? In that case can't we use a lighter stroke color?

[meenurajapandian]

The idea is even if you use a lighter stroke color, you can only eventually see the stoke color. It doesn't really show up as outlines to bars because of the size of each rectangle and the size of the bar plot as a whole.

[PadmanabhanAshwin]

Got it. Possibly, stroke-width could be reduced. Will leave it to your consideration.

[meenurajapandian]

I think it is already at 1px. Can it go smaller than that?