dvs-soti-2021

Challenge (Data Visualization Society)

Development

• Install pnpm (if necessary).
• pnpm install.
• pnpm dev.

References

• Efficient Code Analyzing and Formatting (for React) with ESLint, Prettier and VSCode — 2020 Edition blog post by Sebastian Weber.
• How to Format Code on Save in VS Code with ESlint blog post by Aleksandr Hovhannisyan.
• Building a Vue3 Typescript Environment with Vite blog post by Tomoki Miyauci.
• Vite + React + Typescript + Eslint + Prettier boilerplate by The Sword Breaker.
• Drag Behavior: drag bars in a bar chart Block by Alessandra Sozzi.
• A Visual Guide to React Rendering - It Always Re-renders blog post by Alex Sidorenko.
• Percentage point and Percentage Wikipedia pages.

Notes

• Vite:
  • esbuild: fast JavaScript bundler.
  • ESM: ECMAScript Modules.
  • Development server + build command powered by Rollup.
  • React template.
  • npx vite --help.
  • JSON files can be directly imported (more info here).
  • pnpm create vite dvs-soti-2021 -- --template react or pnpm create vite -- --template react. pnpm install.
• pnpm install -D eslint prettier eslint-config-prettier.
• pnpm install -D eslint-plugin-prettier.
• pnpm install -D eslint-plugin-react eslint-plugin-react-hooks.
• pnpm install -D eslint-plugin-jsx-a11y.
• pnpm install -D eslint-plugin-import.
• pnpm eslint --init.
• pnpm eslint --print-config .eslintrc.json > .eslintrc.allconfig.json.
• pnpm install @mantine/hooks @mantine/core.
• pnpm install phosphor-react.
• pnpm install -D eslint-plugin-lodash (repo).Support ESLint 8.x (open) issue.
• Online tools:
  • Omatsuri.
  • Themera.
  • Palx.
  • Smart Swatch.
• pnpm install @visx/group @visx/axis d3-scale d3-format d3-array.
• pnpm install @visx/drag.
• pnpm install @visx/text.
• pnpm install @visx/grid.
• Packages:
  • react-indiana-drag-scroll.
  • Capsize.
  • Floating UI (ex-Popper).
  • Tippy.js for React.
  • kbar. Documentation. Blog post.
  • dragscroll.
• pnpm up kbar.
• pnpm.overrides documentation.
• Demo (macOS):
  • Kap.
  • Gifski.