[STORY] How has the Constitution of India changed over the years?

[dharashah410]

Ideation

• [x] Decide story pitch with domain experts
  • [x] Does the story idea add value?
  • [x] Is data available?

Prepare

• [ ] Data collection and cleaning
• [ ] Story insight
• [ ] Get story reviewed from domain experts (Is there even a story here?)

Plan

• [ ] Structure of the story
• [ ] Design the visualization
• [ ] Get story reviewed from domain experts (Is the story plan making sense?)

Execute

• [ ] Code the visualization
• [ ] Write the essay
• [ ] Get story reviewed from domain experts

Publish

• [ ] Prepare social media images
• [ ] Publish
  • [ ] Post on site
  • [ ] Post on Instagram
  • [ ] Post on Facebook
  • [ ] Post on Twitter

[dharashah410]

Timeline

• [x] Add tooltip on hover of each amendment
• [x] The brush selection has shifted after adding tooltip. It needs margin adjustments @GauravB159
• [x] Amendment tooltip on right side of the timeline is getting cut @GauravB159
• [x] On load last 2 amendments (latest ones 102 and 103) pre-selected on timeline, rest others dulled out @GauravB159
• [x] Remove unload scrolling effect and directly show last 2 amendment @GauravB159
• [x] Make timeline sync when navigating through left and right arrows @GauravB159
• [x] When 2 lines are selected using brush, dull out the other lines @GauravB159
• [x] Highlight the PM in circle based on brush selection. Dull out rest of the circles by making images as greyscale @GauravB159
• [x] Filter amendments based on brush selection @GauravB159

Track changes view

• [x] Add mini map besides each amendment @GauravB159
• [x] Can we just lazy load the amendments which are been selected rather than rendering all of them?

Table of contents

• [x] Add article title, part number and part title in the JSON
• [x] Change the dummy text with actual values for above 3 keys
• [x] Part titles should align with article numbers. Remove duplicate title names
• [x] Show article numbers in the table of content
• [x] Sort the articles number (alphanumeric sort)
• [x] Add tooltip on hover of each article
• [x] Add heatmap based on how many times the article has been changed
• [x] Show part title on left of article box instead of right
• [x] Add navigation arrows as carousel
• [x] Add up and down arrows in TOC. Hide scroll in the div
• [x] Click on up/down arrow of table of content should be in sync with the amendments of the constitution @GauravB159
• [x] On scroll of any 1 amendment, the rest should scroll @GauravB159

[dharashah410]

@GauravB159 We need to make following changes in Minimap

• [x] Make the red and green lines in the minimap clickable
• [x] Increase the height of red and green lines a bit so that it's clickable.
• [x] The minimap needs to go near border right of each container / where the scroll appears. Remove the minimap box that you have added.

[dharashah410]

Bugs @GauravB159

• [x] When I scroll to the bottom of the page and then select something on timeline, the page scrolls up
• [x] On click of up and down arrow, the down arrow stops working after I go up and down 2 times
• [x] The brush is not snapping. I am able to select more than 2 amendment.
• [x] The sync scroll is working for first block only. It should work for both the amendment blocks
• [x] Right now sync is one way ie TOC impacts amendment blocks. Make it work 2 way i.e TOC boxes get highlighted based on scrolling of amendment
• [x] Scrolling using TOC not synced up. To recreate: Click on 22 in TOC and check Original and Amendment 1. Click on 22 again.

[dharashah410]

@ishitachaudhary

1. Convert document to HTML using https://wordhtml.com/ tool
   • [ ] Remove all inline styles by selecting this button in the tool

• [ ] Replace all < with "<"
• [ ] Replace all > with ">"
• [ ] Replace all “ and ” with double quotes (")
• [ ] Remove all <strong> and </strong> tags
• [ ] Replace all <li> with <p> tags
• [ ] Remove all <ol> tags and add the number in start attribute in the <li> tag preceding it
• [ ] Add attribute data-scrollto="article-article_no" to all <p> tags where article number is mentioned
• [ ] Remove all blank spaces i.e  

2. Write down the process you are following to create the tags (which sites are you referring, creating back up tags etc) so that when new amendments are added in future other person can take it forward. Take a small screen capture video demonstrating the process.

[dharashah410]

• [x] Add single handle vertical slider (with scroll icon image for handle) on the left of the brick wall and remove up and down arrow navigation. The up/down interaction will now be shifted to dragging of slider @GauravB159
• [x] Show years in timeline based on width available. Rest of the years will be shown on navigation @GauravB159
• [x] Amendment 97 <span style=“font-size: 11px; color: gray;”>compared against Amendment 96
• [x] Move the < and > arrows to the sides of the timeline
• [x] Move the text parts to right side of the brick wall
• [x] Change normal text colour in the constitution as black
• [x] Increase size of PM’s picture similar to Mac OS’s Dock’s icon magnification (https://www.youtube.com/watch?v=liZuWpIwLEo see from minute 1)
• [x] Media Queries — if size drops then show only 1 amendment instead of 2
• [x] Media Queries — if size drops then compress timeline and show only the PMs who are currently selected
• [x] Test if the visualisation is touch compatible on iPad
• [x] Next we should implement this for mobile

[dharashah410]

Bugs:

• [x] When I quickly drag it downwards, the scroll happens but when I quickly drag it upwards, it doesnt scroll up. I think drag end event is not getting detected @GauravB159
• [x] On dragging circle, the up/down image position also changes
• [x] The slider line should not be seen on top of circle. It should always stay behind

[dharashah410]

• [x] Implement the algorithm 1yr = 10 px for timeline (irrespective of width available)@GauravB159
• [x] The sync scrolling on blocks stopped working. Scroll on one block is not scrolling other blocks, toc and slider @GauravB159
• [x] Scroll animation not working in Safari @GauravB159
• [x] Set the left position of the amendment block so that only last amendment is seen on load. (for mobile) @GauravB159
• [x] Slider does not move on click of TOC (both in desktop and mobile) @GauravB159
• [x] Touch on TOC box not working on mobile (all browsers)
• [x] Remove text "compared against"

[dharashah410]

Mobile issues

• [x] Highlight/ Select only 1 amendment line for mobile in timeline @GauravB159
• [x] Scrolling of block does not scroll slider and TOC (all browsers) @GauravB159
• [x] Show hide "overlay-div" on click of "menu-icon". Right now it just shows on click on icon but doesn't hide it back @GauravB159
• [x] Show TOC as overlay on mobile
• [x] Show TOC on deep press of the slider icon. Remove hamburger icon @GauravB159
• [x] Once the TOC comes as an overlay, the user can scroll scrolling through TOC via deep press and scroll @GauravB159
• [x] TOC disappears few seconds after the deep press on slider icon is released @GauravB159
• [x] Reduce height of the blocks to fit everything in one screenful @GauravB159

Desktop issues

• [x] Can you reduce space on right side of the svg-container? 2020 should touch the box (shared screenshot on slack) @GauravB159

[dharashah410]

• [x] When user deep presses on the scroll icon, the TOC will come on top of slider icon. @GauravB159
• [x] When I deep press and scroll (while the deep press is on), the TOC highlight will scroll and content in blocks will scroll accordingly. Here, TOC itself starts acting like a slider. @GauravB159
• [x] In mobile, when I navigate through left and right arrows, the blocks are not getting properly left scroll @GauravB159

[dharashah410]

Mobile view

• [x] In mobile, the scroll icon should be aligned with the block bottom. Right now it’s ending little bit up for the last article 35 @GauravB159
• [x] Add transition/ animation when TOC comes and goes on deep press. @GauravB159
• [x] Load entire viz with an overlay and call to action button at centre. @GauravB159
• [x] On click of CTA button, show entire viz in modal window with all interactivity. On click of back button, load the initial view with overlay and CTA button again @GauravB159
• [x] In mobile mode, is it possible I show PM photos in circle above the axis and lines below the axis. Basically, exchange the position of what it is right now just for mobile view. @GauravB159
• [x] Add labels(part titles) besides article box. Right now its display none. @GauravB159

---

Testing

• [ ] Test if it works on Microsoft Edge, Firefox, Safari, Chrome @GauravB159
• [ ] Test if it works on various devices and screen sizes (android and iPhone) @GauravB159

---

Content

• [ ] Add content for all amendments @GauravB159
• [ ] Integrate acts data along with the amendment

---

Later

• [ ] Handle scenario where 2 amendments were made on same date
• [ ] Can we add Voronoi for amendment tooltip?
• [ ] Mobile: scrolling of block lags and doesn't go fast

[dharashah410]

UI

• [ ] Add smokey effect on left hand side of the TOC in mobile mode
• [ ] On scroll of the TOC, scale the current TOC box. Eg: if size of box is 48px by 30px. It will become 70px by 45px and the font size of the article number in the box will increase

[dharashah410]

@GauravB159 Can you mark issues which are resolved?

Device: MacBook Air

Browser: Safari (Version 12)

• [x] Image of Morarji Desai not loading
• [x] Transition of timeline is not working

Browser: Firefox (Version 66.0.2)

• [x] White bar above Samhita title in header
• [x] Slider icon looks very sharp
• [x] Height of brush is larger than height of timeline
• [x] Transition of timeline is not working
• [x] Scroll of blocks is not smooth

Device: HP Laptop

Browser: Microsoft Edge

• [ ] Viz not loading at all, spread operator does not work in Microsoft Edge. We should transpile all code

Device: Asus ZenFone Max Pro M1 (Android)

Browser: Google Chrome

• [x] Modal is lightly visible on initial load

• [ ] Loading time is very slow

  Browser: Firefox

• [x] White bar above Samhita title