search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
17.11k stars 1.87k forks source link

Image Trace Not Displayed #6732

Closed ebel-magnin closed 1 year ago

ebel-magnin commented 1 year ago

script_js index_html Thanks for your interest in plotly.js!

The attached code does not render the image. I use Ubuntu 22.04

28raining commented 1 year ago

You can find examples of how to use images here https://plotly.com/javascript/images/

Please provide an example from Codepen if you have more issues. Keep an eye on your web console for errors

ebel-magnin commented 1 year ago

I am aware of these examples, but what a need is to display a mammogram as the main image trace. In Plotly for Python the function imshow() is used for this purpose. I need the equivalent of this function in Plotly JS. I have developed a breast cancer detection model in Tensorflow JS, which displays the mammogram. If the probability is 70% or more, I want to draw a box around the area where the model suspects cancer cells. With the Plotly zoom function the radiologist can zoom in on that area. This allows him or her to record the coordinates of area and then advice further screening that area with ultrasound or biopsy.

Looking forward to your answer.

Best regards,

Ebel Magnin

From: 28raining @.> Sent: Sunday, September 24, 2023 10:57 PM To: plotly/plotly.js @.> Cc: ebel-magnin @.>; Author @.> Subject: Re: [plotly/plotly.js] Image Trace Not Displayed (Issue #6732)

You can find examples of how to use images here https://plotly.com/javascript/images/

Please provide an example from Codepen if you have more issues. Keep an eye on your web console for errors

— Reply to this email directly, view it on GitHub https://github.com/plotly/plotly.js/issues/6732#issuecomment-1732866625 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AS2OI3QNEHW7WOIBPXM4AIDX4D6KNANCNFSM6AAAAAA5BYI3FE . You are receiving this because you authored the thread. https://github.com/notifications/beacon/AS2OI3SMLZPK6YBBADPFDX3X4D6KNA5CNFSM6AAAAAA5BYI3FGWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTHJFZEC.gif Message ID: @. @.> >

alexcjohnson commented 1 year ago

That page describes layout.images, which is meant for displaying non-data images like logos. You're trying to use the image trace type, which is https://plotly.com/javascript/reference/image/#image-source - and in particular this doesn't support display from a URL, it wants either a data:image URI or an MxNx(3 or 4) array. We don't have a reference page for doing this in JS, but in Python the lower-level interface looks like this: https://plotly.com/python/imshow/#passing-image-data-as-a-binary-string-to-goimage or https://plotly.com/python/imshow/#display-multichannel-image-data-with-goimage respectively.