priyansh18 / productive-weekday

A Visual Representation of github contribution to find out the most productive work weekday for a given user

Home Page:https://productive-weekday.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Productive-Weekday (Visit Now)

Idea :octocat:

To make those racing cars bar-chart of youtube that people make to earn money in excel or tabuleau,
but we are goiing to make it using code!!

made with react made with d3v5 made with cheerio made with express last-commit code-size

Peek a boo!:

Goal In Mind

1. Find the most productive week day of your github from the day a person joined the github.
2. My Dataset
  a. will be using cheerio to fetch the data of day wise contribution-count from the github page.
  b. Not using github api to fetch users data
3. Tech Stack
  a. React
  b. D3.js (v5)
  c. Dataset week wise

Run client

  cd client && yarn start

Run server

  cd visuald3server && npm run dev

Wanna Clone?

git clone {this repo}
cd client && yarn  && yarn start (one tab)
cd visuald3server && npm i && npm run dev(other tab)

STEPS:

  • Get the user data to get the joining date

    1. Get User info + scrapUrls
  1. Dates are something weird while fetching svg of user contribution for github main page
  • Generate the urls in an array to do scrapping later on over each url

    https://github.com/users/jugshaurya/contributions?from=`yyyy`-12-01&to=``yyyy``-12-31
    - this will give result from `yyyy-1`-12-31 to `yyyy`-12-31
    
    https://github.com/users/jugshaurya/contributions?from=`yyyy+i`-12-01&to=`yyyy+i`-12-31
    ... for i = 0 to i<=d
    
  1. generate the dataset from scrapUrls after step 2
  • Retrieve the rect tag elements and get date-count and data-date values
  • Create a dataset around it and return to front end
  • Done!
  1. Plot the Result as race bar graph to see the most productive Week Day
  • Generate fake data (done using src/utils/gerateRandomData.js) and then :
  • Plot Bar graph for one week first
  • plot the bar graph for every week every s number of seconds; s=1000
  • new weekly data will be containing the sum of counts of days from week-1 to week-z; where z is current week pltot number
  • Arrange the bars in descending order to arrange the max value bar at the top and min at the bottom
  • Smooth the y-position-change, count update, barwidth update.
  • Show labels day and count
  • Change Bar colors and modify the UI
  • show the week near the right bottom corner with date
  • show ticks on x and y axis/ Show Grid
  • Render Random Data for visuals
  • Show user info somewhere
  • Display the error toast(#issue2)

Deployment

  • add a now.json file
  • server
  • Add a bulid command and directory to deploy to netlify.

What is D3 ?

  • D3 stands for Data-Driven Documents and is widely used to create interactive data visualizations on the web.
  • The way most people use D3 with React is to use React to build the structure of the application, and to render traditional HTML elements, and then when it comes to the data visualization section, they pass a DOM container (typically an svg) over to D3 and use D3 to create and destroy and update elements. -D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

Inbetweening or tweening

  • is a key process in all types of animation, including computer animation. It is the process of generating intermediate frames between two images, called key frames, to give the appearance that the first image evolves smoothly into the second image.

Thank you

Server

https://productive-weekday-server.jugshaurya.now.sh

 - ReDeploy
    - make changes and check them if working via postman may be.
    - go to visulad3server folder &
    - now (@cli).

Client

https://productive-weekday.netlify.com/

 - ReDeploy
    - make changes and push to github.
    - make a PR to deploy branch to redeploy at netlify automatically.

About

A Visual Representation of github contribution to find out the most productive work weekday for a given user

https://productive-weekday.netlify.com/


Languages

Language:JavaScript 75.2%Language:CSS 22.3%Language:HTML 2.6%