Thanks @jerrysong1324! This looks like a great first start. Here are a couple of suggestions on possible ways of improving the UI:
I've noticed that some of the code is overflowing in the editor. I'm wondering if we could wrap the text or auto-indent the code in some ways (maybe via autopep8 or black) so that we don't have to scroll to edit the charts.
It would be great if we could keep a fixed-size div for the chart itself. That way the buttons won't move around as much when it is being rendered, or when the error shows up. It would also be helpful to show some type of loading button after clicking the Update button.
I still think that the two visualization editor and button are a bit confusing to a new user. One thing that might help is describing what the Visualization Editor and Style Editor does, in place of the current titles. We could also try to more explicitly tie together each of the buttons with the editor field, either by putting them more closely in proximity or via some colors. Let's brainstorm and revisit this once the first two UI changes are addressed.
TODO:
Overview
Add interaction to open visualizations in full view. https://github.com/lux-org/lux-widget/issues/45 Linked to https://github.com/lux-org/lux-widget/pull/80
Changes
Example Output
https://www.loom.com/share/1c38c3ae768c488ea9860ea1a766c015