<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0in;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
pre
        {mso-style-priority:99;
        mso-style-link:"HTML Preformatted Char";
        margin:0in;
        margin-bottom:.0001pt;
        font-size:10.0pt;
        font-family:"Courier New";
        color:black;}
span.HTMLPreformattedChar
        {mso-style-name:"HTML Preformatted Char";
        mso-style-priority:99;
        mso-style-link:"HTML Preformatted";
        font-family:"Courier New";
        color:black;}
.MsoChpDefault
        {mso-style-type:export-only;}
@page WordSection1
        {size:8.5in 11.0in;
        margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
        {page:WordSection1;}
--></style></head><body lang=EN-US link=blue vlink="#954F72"><div class=WordSection1><p class=MsoNormal>I am not familiar with the library except by seeing demos. I assume you can use a z-index to layer SVG over X3DOM.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I believe I’ve mixed SVG and canvas before.  Not successfully if I recall right.  The coordinate systems for canvas and SVG were too different, and I couldn’t draw lines in canvas that were zoomable that looked good.  Ultimately I went with straight X3DOM.  I can try integrating the d3-annoation library with my cross-sectioned earth in X3DOM and d3.js, if you want me to try.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Best to look at the demos and see what you think you can get out of it.  I have mixed D3.js with X3DOM, but not by using SVG elements or 2D canvas.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Really no clue, just thought we might be able to mix SVG/Canvas/XSeen.  Probably not.   That could be a problem for interoperability.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The library comes highly recommended from data visualization gurus, and is used in projects in Netflix, but if you can’t make it work, too bad. There’s another Netflix project which combines d3.js, d3-annotation, and react, namely Semiotic: <a href="https://medium.com/@Elijah_Meeks/introducing-semiotic-for-data-visualization-88dc3c6b6926">https://medium.com/@Elijah_Meeks/introducing-semiotic-for-data-visualization-88dc3c6b6926</a> specifically on that page, see the layers figure.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>John</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Sent from <a href="https://go.microsoft.com/fwlink/?LinkId=550986">Mail</a> for Windows 10</p><p class=MsoNormal><o:p> </o:p></p><div style='mso-element:para-border-div;border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal style='border:none;padding:0in'><b>From: </b><a href="mailto:Leonard.Daly@realism.com">Leonard Daly</a><br><b>Sent: </b>Tuesday, September 5, 2017 6:48 PM<br><b>To: </b><a href="mailto:x3d-public@web3d.org">x3d-public@web3d.org</a><br><b>Subject: </b>Re: [x3d-public] Labels in 3D</p></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal style='margin-bottom:12.0pt'>John,<br><br>Interesting. Do you have any idea how well this would work in 3D space? I'm not sure what would be necessary to capture from this library. The requirements (as I understood them) was to have HTML-like capabilities in the contents of the label (I used HTML so I wouldn't have to redevelop anything), a leader line of some sort, and attachment to a piece of 3D geometry. <br><br>What I gathered  from a quick read-through of the documentation is that the note is not HTML (but close), the subject is a portion of a D3 graph, and the connection has lots of options. Given the requirements, I think the only piece that offers includable options is the connector. If I am wrong, please point that out.<br><br>Leonard Daly<br><br><o:p></o:p></p><blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'><p class=MsoNormal>Might be nice to integrate the D3.js annotations library. <a href="http://d3-annotation.susielu.com/">http://d3-annotation.susielu.com/</a><o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>John<o:p></o:p></p><p class=MsoNormal>Sent from <a href="https://go.microsoft.com/fwlink/?LinkId=550986">Mail</a> for Windows 10<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b>From: </b><a href="mailto:Leonard.Daly@realism.com">Leonard Daly</a><br><b>Sent: </b>Tuesday, September 5, 2017 2:52 PM<br><b>To: </b><a href="mailto:x3d-public@web3d.org">X3D Public</a><br><b>Subject: </b>[x3d-public] Labels in 3D<o:p></o:p></p></div><p class=MsoNormal> <o:p></o:p></p><p>This is mostly for Nicholas and Vince who expressed an interest in labeling things in 3D where the labels had the capability of HTML to include various fonts, styles, text, graphics, links, etc.</p><p>I would like to know if these types of labels meet your needs or something else is needed.</p><p>This is using my testbed (XSeen). The example is at <a href="http://realism.com/XSEEN/test/labels.html">http://realism.com/XSEEN/test/labels.html</a>.</p><p>All labels are done in HTML. The lines connecting the label to the 3D object is done in 3D space. The labels retain their screen position as the camera is moved. There are three types of labels illustrated in the example -- fixed, relative, and draggable. </p><p>The fixed label is attached to the "monster" The label line tracks the local origin of the monster model. </p><p>The relative label maintains the initial relative screen position to the projection of the (local) origin of the object. The label moves as the object moves. This is particularly obvious when looking from the side.</p><p>The last label (draggable) is attached to the torus. The user may move the label to any position in the canvas (2D projection of the 3D space). The leader line maintains the connection from the label to the object. </p><p>There is preliminary documentation on the tag at <a href="http://tools.realism.com/specification/xseen/language-definition/user-interactions/label">http://tools.realism.com/specification/xseen/language-definition/user-interactions/label</a></p><p>Caveats: <br>1) The leader lines do not track well when the camera position is changing nor when a draggable label is being moved.<br>2) Things don't work as you would expect (or hope) for the stereo camera.</p><p> </p><p class=MsoNormal>-- <br><b><span style='font-size:13.5pt;color:#333366'>Leonard Daly</span></b><span style='color:#333366'><br>3D Systems & Cloud Consultant<br>LA ACM SIGGRAPH Chair<br>President, Daly Realism - <i>Creating the Future</i> </span><o:p></o:p></p><p class=MsoNormal><span style='color:black'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:black'><br><br><br><o:p></o:p></span></p><pre>_______________________________________________</pre><pre>x3d-public mailing list</pre><pre><a href="mailto:x3d-public@web3d.org">x3d-public@web3d.org</a></pre><pre><a href="http://web3d.org/mailman/listinfo/x3d-public_web3d.org">http://web3d.org/mailman/listinfo/x3d-public_web3d.org</a></pre></blockquote><p><o:p> </o:p></p><p class=MsoNormal><span style='color:black'>-- <br></span><b><span style='font-size:13.5pt;color:#333366'>Leonard Daly</span></b><span style='color:#333366'><br>3D Systems & Cloud Consultant<br>LA ACM SIGGRAPH Chair<br>President, Daly Realism - <i>Creating the Future</i> </span><span style='color:black'><o:p></o:p></span></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>