Change points, switch to d3, animate timeline, matrix viz

[vincerubinetti]

• ditch visx because it was buggy, limited, and frustrating. switched to d3 and had significantly easier time.
• split /src into sub folders, move things around
• various css and code polish
• add randomness to api call to test various states/features
• redo timeline chart in d3, add animation, and add changepoints
• rework chart component in anticipation of future charts
• add "matrix" visualization animation for header and loading states
• redo title component. move from DOM text and web animation API to static SVG with filters. should be more performant, less distracting (with matrix background), simpler code, and more consistent across platform because not using non-standard webkit-text-stroke
• combine icons with palette
• more util funcs
• added tippy for tooltips

[netlify[bot]]

✔️ Deploy Preview for word-lapse ready!

🔨 Explore the source changes: 2543e451460362f976f6653572133c5b12c4cf1c

🔍 Inspect the deploy log: https://app.netlify.com/sites/word-lapse/deploys/61fd86121ad98a00085bf3d7

😎 Browse the preview: https://deploy-preview-12--word-lapse.netlify.app/

[falquaddoomi]

Looks good so far! I'm a little concerned that the search box is a bit too quick to query considering how long it's actually going to take and the server load it can cause. Maybe having them press a button to search, rather than firing off searches as they're typing, would make it more intentional?

[vincerubinetti]

Looks good so far! I'm a little concerned that the search box is a bit too quick to query considering how long it's actually going to take and the server load it can cause. Maybe having them press a button to search, rather than firing off searches as they're typing, would make it more intentional?

Note this comment:

I temporarily decreased the debounce so we could test it more quickly. If you type you get a 10% chance of error (so you can see the error message/status), then 25% chance of a long query (so you can see the loading animations).

[falquaddoomi]

Frankly, it's not just the debounce time that's a problem. The UI suddenly and dramatically changes when you start typing, without any animation to indicate that the box you were typing into in the center of the screen has now moved up to the right. At least if they pressed a button they'd have an idea that they were navigating to what appears to be a new page.

Just to clarify, I'm not asking for an animation, just perhaps a search button that they manually click.

[vincerubinetti]

In this case the debounce also determines when it goes out of "fullscreen mode", not just when the API is hit. So with the original intended 1s debounce, I think that will be enough time for the user to finish typing their single word to search.

It's a minor point, but I'd like to have an auto-search for this, to allow users to get results without any further (beyond typing in their word) action. Right now, pressing enter also instantly submits the form (for the benefit of fast typers I guess). I could add a button for that kind of instant submit as well, but I'd still want to keep the auto-search.

I've added back in the long debounce and a header animation.

[falquaddoomi]

That animation you added improves the experience substantially for me; apologies that I didn't realize that it was in earlier and just disabled temporarily. I defer to you on leaving the auto-search in.

[vincerubinetti]

If we see users are hesitating and making a lot of partial searches, like "supercalifragil", then we can consider increasing the debounce or removing the auto-search, for the benefit of UX and/or server load. But I'm hoping 1 second will be enough for most people.

[vincerubinetti]

@falquaddoomi @danich1 added tooltips to data points