This is a small application that demonstrates how to create an interactive bar chart using D3.js and Next.js. The chart is rendered dynamically and allows users to visualize data in a visually appealing way.
- Fetches data from a mock API (JSON Server) and displays it in a bar chart.
- Utilizes D3.js to create scalable and interactive visualizations.
- Implements a responsive design that adjusts the chart layout based on the available screen space.
Follow these instructions to set up the project locally:
- Clone the repository:
git clone https://github.com/your-username/your-repo.git
- Navigate to the project directory:
cd your-repo
- Install the dependencies:
npm install
- Start JSON server:
npm run serve-json
(you can see the mock data on porthttp://localhost:4000
) - Start the development server:
npm run dev
- Open your browser and visit
http://localhost:3000
to see the interactive bar chart.
During development, the project uses JSON Server to mock the API and provide the data for the bar chart. The mock data is stored in a db.json
file. To start the JSON Server, run the following command:
npm run server
The mock API will be available at http://localhost:8000
.
The project follows the structure provided by Next.js:
├── public
│ └── data.json
├── src
│ ├── components
│ │ └── BarChart.js
│ ├── pages
│ │ └── index.js
│ └── package.json
└── next.config.js
- The
public
directory contains thedata.json
file, which serves as the static data file for the bar chart in production. For the developement enviroment it's configuered to use the filedb.json
at the root of the project. - The
src/app/components
directory contains theBarChart
component, which handles the rendering and interaction of the chart. - The
src/app
directory contains theindex.js
file, which renders theBarChart
component on the home page. - The
next.config.js
file is used to configure Next.js for specific requirements, such as adding custom webpack configurations.
The project relies on the following dependencies:
- Next.js: A framework for building server-rendered React applications.
- React: A JavaScript library for building user interfaces.
- D3.js: A powerful library for creating data visualizations.
- JSON Server: A simple mock API server for development purposes.
- Other dependencies (webpack, Babel, etc.) required for building and running a Next.js application.
This project is licensed under the MIT License. Feel free to use and modify the code as per your needs.
Contributions to this project are welcome! If you encounter any issues or have suggestions for improvement, please create a new issue or submit a pull request.
This project was inspired by the need for a simple and interactive bar chart using D3.js and Next.js. Special thanks to the open-source community for their valuable contributions.
If you have any questions or inquiries, please feel free to contact Daro.