infographiq.js fixes - Githubissues

cstories-app / cstories-app.github.io

Community driven story building app to inform offshore energy planning

https://cstories.integral-corp.com/

MIT License

2 stars 0 forks source link

infographiq.js fixes #2

Closed bbest closed 1 year ago

bbest commented 1 year ago

https://cstories.app/infographics/info1.html

Deal with a bunch of issues:

[x] labels on hover way off
[x] missing yellow highlight of icon
[x] ...

Wishlist (later):

[ ] make icons selectable within entire convex hull of points, a la observablehq.com/@d3/d3-polygonhull (old d3.geom.hull() for new d3.polygonHull(points))

References

See: README - infographics - Google Docs

geocoug commented 1 year ago

Vector highlighting not working as expected: issue

Debugging steps done so far with infographiq.js:

Verify element_highlight_add() created a vector clone of selected icon with unique element ID
Vector clone CSS/opacity is toggled appropriately on handleMouseOver() and handleMouseOut()
Vector clone z-index is not set behind svg element

Potential fixes to investigate:

Make SVG rectangular with transparent background?

geocoug commented 1 year ago

Clear modal content on modal close in infographiq.js. Currently, modal content is only overwritten when another SVG icon is clicked causing content from the previously clicked icon to appear in the modal before showing new content.

bbest commented 1 year ago

Perhaps the difference w/ cetacean icons disappearing vs other infographics not has to do with using Inkscape vs Illustrator. Some tips are here:

Inkscape - Chapter 3 Creating an Infographiq image | Guide to Infographiq

bbest commented 1 year ago

Minor notes:

Have to manually copy edited *.svg files into the _site/* folder.
Thickness of yellow hover is a bit different b/n icons.