Sample project to render a scatter plot of top 250 movies (rating vs user votes)

A sample full stack application that renders Scatterplot chart using D3.JS v7 and uses Python Flask v2 to fetch the data for rendering the chart. Sample demo can be found here.

Folder structure

• templates\index.html is required by Flask to serve the HTML page on hitting default API
• app.py is our Flask API file which will be executed to start the API server to serve the movies list
• imdb.json is our mock JSON data for storing the movie list.
• index.html serves our web page for displaying the chart
• script.js contains the JS for fetching the data and rendering the chart on web page
• style.css contains the basic styling for the web site
• README.md renders this file

Steps to add/bypass API call to fetch movies list

• Go to scripts.js file and modify line # 7 as follows:

  To add local API server support: d3.json("http://127.0.0.1:5000/imdb", {

  To bypass API server call and point to JSON file directly from UI: d3.json("https://lxminarayn.github.io/d3js-flask-fullstack-app/imdb.json", { and save the file.

• Note that for enabling demo in GitHub page, the repo points to the local imdb.json by default.

Steps to run the application in local machine

• Ensure to install Python , Flask library, NodeJS & Node http-server tool in your local machine.
• Clone / Download this repo to your local machine and open this repo folder
• Execute the app.py file from your Python terminal to start the API server
• If the server is successfully started, you should be able to hit http://127.0.0.1:5000/ and see the API welcome page load with details on the IMDB api as well
• Open VS Code/NodeJS command prompt from the current project root directory and execute http-server . -o
• This will start the HTTP server and serve the web page on http://127.0.0.1:8080 automatically and you should be able to see the chart displayed in the website
• If all goes well, there should not be any errors both in browser console and Python console.

Following are the features of the UI:

• Uses D3.JS v7 to render the chart
• The data range for both the axes are dynamically calculated based on the data received from backend.
• This keeps the code fairly resuable for any data range in future as well.
• Added simple transition animation while loading chart, for better UX.
• Formatted the Vote counts (Y axis tick labels) to show in unit of 1000s instead of full numbers, for better UX.
• Added basic responsiveness/adaptability to viewport (needs a page refresh after resizing browser to make it work)
• Added tooltip on hovering over data point to show additional data about that movie.
• Hits the backend Python Flask API server to fetch the movie list using GET API method

Following are the features of the backend API:

• Uses Python Flask v2 for implementing the API endpoint
• Enabled basic error handling by re-routing user to default endpoint , whenever any invalid endpoint is hit
• Reads a mock JSON file from local server itself and sends that back as JSON response to UI (To avoid saving any API keys in code/environment to access actual IMDB API)
• Supports GET API call for now and shows a html page on hitting default '/' endpoint with documentation for API.