I wanted to explore using D3 for the first time. The API I decided to use was Yahoo finance through the yahoofinance2 npm package. This package has to be run on a Node server, so rather than creating a separate Node server, I opted to use Remix for that all-in-one experience.
Demo: https://charter-remix.vercel.app
![chartshot](https://private-user-images.githubusercontent.com/16279091/352140220-7d61ce4d-dcdf-4934-8bd9-344a571fc468.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyNzY1OTAsIm5iZiI6MTcyNTI3NjI5MCwicGF0aCI6Ii8xNjI3OTA5MS8zNTIxNDAyMjAtN2Q2MWNlNGQtZGNkZi00OTM0LThiZDktMzQ0YTU3MWZjNDY4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAyVDExMjQ1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVmNjhiY2M1NDE2NmM3MGQzZGFiOTkxMjg4ZTVkZDYxOWRmNjNjZmNkYjM5NDRhMTgyZGFlZTViYTYyNzVjYmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ijv5BA8SeH1vtbLzaYbQ06DmlYaJ_p6UEvqUC85Pr8E)
- Remix / React
- D3
- Selecting time periods should indicate which is currently selected
- Currently just made for the desktop browser - next up is to make this responsive for mobile devices
- Add some error boundaries
- Add transition animations between charts
- Add cross-hairs to track cursor position on the chart
Run the dev server:
npm run dev
First, build your app for production: `
npm run build
Then run the app in production mode:
npm start
Now you'll need to pick a host to deploy it to.
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of npm run build
build/server
build/client
This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.