Multi-Chart Svelte Example

Proof of concept multi-chart data tool using The Office data. Visualizations based on this Observable notebook

TODO

Backburner

• translate() doesn't work on iphone for axis labels
• dynamic import where scripts are html/md files stored in public/
• can the tooltip contain a store? tooltip.hoveredData could be scoped to just that tooltip
  • backup would just be a global variable and the same as the selectedChar;
• GH CI/CD - build/deploy in the cloud on push (is it expensive?)
• check out skeleton UI (uses tailwind CSS)
• use tooltip as action ie: use:tooltip and this video

Completed

• rename repo
• comment some more
• GA
• highlight the entire paragraph (acrossElements flag is not working in mark.js) - solve was to remove use of ^ character as it was causing issues
• character below nodes
• Tooltip add semantics bc you haven’t seen posneg yet on mobile
• Xaxis too close on small screen
• tooltip for network should be static in top left
• on input change for transcript, highlight the name
• put dropdown and button side-by-side
• button to reset highlighting
• check out multi-hover (hover on one, another chart lights up)
• move/zoom force?
• fix card title padding (too big on bottom...)
• created relative path (base: "./") in vite.config.js
• add an interaction for the bar charts
• sveltify the force directed graph
• use iconify for UI
• convert margin to function that accepts w/h and multiples by percentage
• make SVG render "svelty"
• make transitions "svelty"
• UI framework (MUI for now)
  • gutter for rows once they go to a new line
• favicon