Improve the User Experience of tagging large amount of image data

[dennyabrain]

Overview

The goal of this task is to explore a user friendly way to organize and tag large amount of image data into groups.

Background

This issue builds on the work we did with this visualization

Interactive UI can be accessed here - https://tattle.co.in/articles/covid-whatsapp-public-groups/t-sne/

We built a UI to show large amount of images in a 2D graph. This graph was built using React. The component's code can be seen here - https://github.com/tattle-made/website/blob/master/src/components/molecule/covid-whatsapp-tsne-map.jsx

Shortcomings

1. Use of SVG
   The current iteration in React uses SVG as the underlying technology for displaying the data. We found it to be not very performant when dealing with large amount of images.
2. a Read Only Visualization
   This graph allows you to preview all the images by hovering your mouse on them and highlight the groups or clusters the images fall under (eg Screenshots, Paper Documents etc). There's no support for editing the underlying data.

Proposed Improvement

1. We want to explore the use of HTML canvas to display this data
2. We want to make it possible to edit certain metadata associated with the image

Implementation Details

Assume that you are given a data about 2000 images in a JSON file. The JSON looks like this :

{
   "img_32ub23" : {
      "x" : 50,
      "y" : 30,
      "url" : "http://url-to-image-1"
   },
   "img_3ot592" : {
      "x" : 60,
      "y" : 90,
      "url" : "http://url-to-image-2"
   },

}

Use Javascript to draw a circle/point representing the image in a SVG or canvas.

We need to build the following user stories :

• As a user, I should be able to hover my mouse on the circle to preview the image from the URL.
• As a user, I should be able to drag and move the various circles on the canvas to visually move things together or apart
• As a user, I should be able to draw a region around multiple images to select more than one circle at a time and add a tag to them
• As a user, I should be able to see the new data after making edits in the developer console (using console.log())

Recommendations :

1. Use d3.js to help with click, drag, select, zoom and pan functions

Resources

• A general introduction to d3.js
• Specific section on doing interactive things using d3.js
• d3-drag, d3-zoom, d3-brush