This project demonstrates how to plot a scatter and line plot using D3.js on a movies dataset. The dataset contains information about movies such as the budget, revenue, and release year. The results are displayed on a web page using HTML and CSS.
To run this project, you will need to have Node.js installed on your machine. If you don't have it, you can download it from here.
Clone this repository to your local machine and navigate to the project directory.
Run the following command in your terminal to install the required dependencies:
- npm install
To start the development server, run the following command:
- npm start
This will open the project in your browser at http://localhost:1234. The HTML and CSS files define the layout and styles for the plots, which are generated and updated by D3.js.
The scatter plot is a visualization that represents the relationship between two variables. In this project, the scatter plot represents the relationship between the budget and revenue of the movies. The x-axis represents the budget and the y-axis represents the revenue. The scatter plot is interactive and includes features such as a tooltip that displays additional information when you hover over a data point and the ability to select items of the same color based on a click.
The line plot is a visualization that represents the change in a variable over time. In this project, the line plot represents the change in the average revenue of movies over time. The x-axis represents the year and the y-axis represents the average revenue. The line plot is also interactive and includes a tooltip that displays additional information when you hover over a data point.
To display the results of the scatter and line plots on a web page, we use HTML and CSS. The HTML file defines the structure of the web page, while the CSS file defines the styles. The HTML and CSS files work together to create a clean and visually appealing presentation of the plots.
This project is a great starting point for anyone who wants to learn how to create interactive scatter and line plots using D3.js and display the results on a web page using HTML and CSS. You can use this project as a foundation to build more complex visualizations.