oopsoverflow / datavis

An interactive website to visualise the impact of meat production and consumtion. Built using React.js, D3 and TailwindCSS.

DataVis

Running the project

To run a development server locally, follow the steps below: Feel free to use npm instead of yarn if you prefer or if you don't have yarn installed.

1. Clone the repo

git clone https://github.com/OopsOverflow/DataVis.git

2. Install the dependencies withing the project directory

yarn install

3. Run the project

yarn dev

Project structure

This project includes:

• D3 library for data visualisation
• Vite.js for bundling and hot-reloading all the changes from your text editor or IDE with SWC as the compiler (blazing fast)
• Typescript for type checking and better code completion and a better developer experience
• React for rendering the UI and adding interactivity
• Eslint and prettier configs for code linting and formatting
• GitHub action for linting and formatting on push
• Tailwind CSS for styling

Recommended VSCode extensions

If you are using VSCode, for a better developer experience, I recommend installing the following extensions in VSCode. They are by no means required, but they will make your life easier.

• TypeScript Intellisense!!!
• ESLint
• Prettier
• Vite
• PostCSS Language Support
• Tailwind CSS IntelliSense