Real Estate Optimization/Bugfixing

[prastut]

Right now we have 2 views in place for the viz. Real estate documentation can be found here: https://github.com/prastut/bubble-frontend/blob/master/docs/VIZ.MD#charts

For testing, sample URL's that you can use:

• The whole data: https://bubble.social/get-webview?match_id=0b808074-7aa8-11e7-949c-0669e02bb0da&team_id=0b808075-7aa8-11e7-949c-0669e02bb0da&name=arsenal

• The view with less data, helps to make quick changes to frontend and check: https://bubble.social/get-webview?match_id=0b808074-7aa8-11e7-949c-0669e02bb0da&team_id=0b808075-7aa8-11e7-949c-0669e02bb0da&name=arsenal&end_timestamp=1502026867

Replace https://bubble.social/ with localhost:8000/ :3

View 1: Webview

Right now the biggest problem is that D3 works with SVG elements which are not same as HTML elements eg: SVG has it's own coordinate system and DOM has it's own. So a y coordinate in SVG land is different than a top coordinate in HTML land.

https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/

Task 1

Make all elements be rendered by D3. Since 95% of the view is being rendered by D3, it makes no sense to render the rest of the page with HTML. Right now as you can see in the above image that our events timeline is being overlapped by the scatter+chart timeline and a whole lot of problems due to this mixup. Currently we render things like this:

• The title right now is being rendered by HTML: https://github.com/prastut/bubble-frontend/blob/master/views/bot-web-view.ejs#L27-L38
• The chart container is being defined after the nav bar.
  • Now the whole chart division as mentioned in the real estate documentation happens inside the chart container. I am explaning again for brevity. The title takes 20% of the page. The chart container takes 80% of the page. Inside the chart container the percentage are relative to the big chart container, ie if line chart is being said to take 60% it means 60% of the 80% of the page.

Work:

• [x] Remove the title and the nav bar code and let everything be handled by D3.
  • You would need to write appropriate code inside main.js.
  • The name param is already being passed in paramsobject to JS Global Namespace here. All you need to is use that and render the element into the screen.
  • As soon as you do this the relative concept (that I mention above, 60% of 80%) that is troubling us will dissolve and the full control of the view will be handled by D3. So there would be no fuckups like the overlap you are seeing at the moment. This will also be deleted then: https://github.com/prastut/bubble-frontend/blob/master/public/js/app/main.js#L61

Task 2

• [x] Fix real estate Y coordinate problems:
  • Overlap may not get fixed due even if you check the above point.
  • There is a lot of gap between:
    • The Heading and the Bar Chart.
    • The Bar Chart and the (Line Chart+ Scatter Chart combination).
  • Y coordinate get's handled by yPos function. So each element has an own Y Pos. Rather than hardcoding elements by placing them iteratively by hand (i.e hardcoding values like yPos(100)) you can use the getBoundingRect and use it's dimensions to render charts. Specifically the render flow would look like:
    • First the text get's rendered. Use it's getBoundingRect values to render the barchart beneath it.
    • Render the barchart. Use it's getBoundingRect values to render the scatterchart + linechart combo.
    • And so on.

View 2: Video Demo's

Task 1: Setup and getting used to:

• The videojs code can be found here: https://github.com/prastut/bubble-video. I have invited to the repo.
  • This repo is a just a wrapper which renders a webview. The webview is being rendered by this repo only i.e https://github.com/prastut/bubble-video/blob/master/index.html#L27-L28. As you can see it asks a webview from the main website only.
  • Clone && npm i && npm start.
• The video demo JS is being handled created by the same main.js file as well.

Semantics which separate the webview and the video demo view would be that there is no main big barchart inside the webview but there is a players chart which shows the top 2 trending players barchart. Please look at the images again and again to draw inferences.

• Specifically the height of the view is fixed (https://github.com/prastut/bubble-frontend/blob/master/public/js/app/main.js#L41) since we don't want it to render on the full video.
• The css files being called to setup video view are different. A lot of changes were required therefore I had no time to make a single file solution.
• Interactions for the view are being handled here: (https://github.com/prastut/bubble-frontend/blob/master/public/js/app/main.js#L156-L169).
• This handles the fadeOut and fadeIn interaction of the viz: https://github.com/prastut/bubble-frontend/blob/master/public/js/app/main.js#L156-L169

Work:

• [ ] The players chart are not being rendered. This API has to be called to get data for trending players. This is where players chart is being called. Fix it.

Task 2: Get the video demo online.

• [ ] This demo is not online. Either:
  • Integrate the view with the bubble-frontend repo and push it on server.
  • Create a new server which hosts the video demo.

The means don't matter. I just want the demo online.

[prastut]

@digi0ps @jeremyphilemon @Tanay2112 divide between yourself what work you are going to start. Ideally level of ownership if high produces the best results -> so take issues which are disparate in nature.

[digi0ps]

I will take up View 1 Task 1. So I have to remove the navBar's html and use D3 to render the title using text. Right?

[prastut]

That's correct.

On Aug 12, 2017 12:20, "Sriram" notifications@github.com wrote:

I will take up View 1 Task 1. So I have to remove the navBar's html and use D3 to render the title using text. Right?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/prastut/bubble-frontend/issues/41#issuecomment-321962023, or mute the thread https://github.com/notifications/unsubscribe-auth/AJzbBgx0SgMC8zYb3TTKZZPWeY96EVDqks5sXUszgaJpZM4O0YSE .