zoom tsne

[fstrub95]

Allow zoom and pan on tsne. This provide better vizualisation.

TODO: add white background on txt:

• move the ordering of svg element after applying svgPanZoom (as it put the graph on the front)
• use defs https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg

[vdumoulin]

@fstrub95 thanks! There is a TODO in your description about the white background on text, should I wait for you to implement that before I review your PR, or do you wish to make a separate PR for that?

[fstrub95]

I will update the pull request today after work (There is some overlap between the text and the tsne plots while zooming, and I dot not lik it :) ). I created the branch if you were curious to test it before

On Thu, Jun 28, 2018 at 2:01 PM, vdumoulin notifications@github.com wrote:

@fstrub95 https://github.com/fstrub95 thanks! There is a TODO in your description about the white background on text, should I wait for you to implement that before I review your PR, or do you wish to make a separate PR for that?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vdumoulin/distill-film/pull/216#issuecomment-401026413, or mute the thread https://github.com/notifications/unsubscribe-auth/AMvzhNrfuVrkdBeCN1jeZmxqmtsoKmUfks5uBNO9gaJpZM4U6krl .

[fstrub95]

If you like the current options, it should be ready to merge

[vdumoulin]

@fstrub95 I really like the functionality, but on my end the figure looks like this:

The zoom and reset buttons for the visual reasoning plot overlap with the legend; is there a way to fine-tune the placement?

Also, the reset button doesn't exactly reset to the state we get with a fresh webpage load:

One last point: the white rectangle for the left subplot's legend should be made tall enough to cover all labels.

[fstrub95]

done! I reimplemented the zoom button rather than using the default one (+ enlarge white box!)

[fstrub95]

In case that I cannot make it on time, this how we can add the circle:

• add the circle in the
• find the good initial x/y coordinate

(I could not install npm on my professional computer:( )

This should be the new version of the tsne.svg. The script will then automatically rescale/move the circle. To find the good XXXX, run the html in the browser, right-click inspect element (circle), change the XXX coordinate online, update the file

<svg width="444" height="400" xmlns="http://www.w3.org/2000/svg" id="clevr-plot-svg">
  <g id="clevr-plot" style="z-index: -1;">
    <rect x="10" y="100" width="250" height="250" style="fill: none;"/>
  </g>
  <rect width="444" height="70" style="fill:white" />
  <rect width="150" height="360" style="fill:white" transform="translate(285, 0)"/>
  <text x="10" y="10" dy="1em" class="figure-text">
    <tspan>
      t-SNE projection of the FiLM parameters associated with
    </tspan>
    <tspan x="10" dy="1.5em">
      questions from the CLEVR validation set, color-coded by
    </tspan>
    <tspan x="10" dy="1.5em">
      question type.
    </tspan>
  </text>
  <g transform="translate(300, 110)" id="clevr-legend"></g>
  <image x="285" y="70" height="27" width="27" xlink:href="images/pointer.svg"/>
   <image x="15" y="370" height="27" width="27" xlink:href="images/zoom.png"/ id="clevr-zoom" style="cursor: pointer;">
 </svg> 

 <svg width="444" height="400" xmlns="http://www.w3.org/2000/svg" id="style-transfer-plot-svg">
  <g id="style-transfer-plot" style="z-index: -1;">
    <rect x="0" y="100" width="250" height="250" style="fill: none;"/>

    <circle cx="XXXXXX" cy="XXXXXX" r="20" style="stroke-width: 4px; fill: none;" class="figure-element"/>

  </g>
  <rect width="444" height="70" style="fill:white" />
  <rect width="150" height="270" style="fill:white" transform="translate(285, 0)"/>
  <text x="0" y="10" dy="1em" class="figure-text">
    <tspan>
      t-SNE projection of the FiLM parameters associated with
    </tspan>
    <tspan x="0" dy="1.5em">
      style images from the Painter by Numbers test set, color-
    </tspan>
    <tspan x="0" dy="1.5em">
      coded by artist name.
    </tspan>
  </text>
  <g transform="translate(300, 110)" id="style-transfer-legend"></g>
  <image x="285" y="70" height="27" width="27" xlink:href="images/pointer.svg"/>
  <image x="15" y="370" height="27" width="27" xlink:href="images/zoom.png" id="style-zoom" style="cursor: pointer;"/>
</svg>