Closed fstrub95 closed 6 years ago
@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?
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 .
If you like the current options, it should be ready to merge
@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.
done! I reimplemented the zoom button rather than using the default one (+ enlarge white box!)
In case that I cannot make it on time, this how we can add the circle:
(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>
Allow zoom and pan on tsne. This provide better vizualisation.
TODO: add white background on txt: