Support plotting to Smith Charts

[kiranshila]

Hey everyone!

I think adding support to plot to Smith Charts would be extremely beneficial to everyone working in RF/Microwave engineering.

It basically is a modified polar plot with a Mobius transform mapping complex numbers onto a polar plane.

There are several implementations across a few plotting backends: PGFPlots has it in LaTeX, PySmithChart and Matplotlib have it in Python, it's native in MATLAB, and InspectDR has it in Julia. But none of them implement interactability as well as the leading CAD software which utilizes Smith Charts in design work.

I think Plotly is perfect for this as it can provide a true cross-platform interactive means by which to visualize complex data for radio engineers.

I am more than happy to do a PR, I just need some guidance on how to start working on what is effectively a new axis type.

[joshuaprewitt]

I agree that it would be really useful to have a smith chart, which can be used when analyzing RF waveforms.

https://cds.cern.ch/record/1417989/files/p95.pdf

[rfriedma]

I would also like to see smith charts in plotly. I use plotly successfully for displaying engineering data and it would be great to provide a consistent experience to my users for this visualization as well.

[etpinard]

Merged into https://github.com/plotly/plotly.js/issues/2221 - until this gets more traction.

[lstuemke]

I have implemented Smith Charts using Plotly for my own personal use. I would love to help add this feature to Plotly if possible. Here are some screenshots of what I've done.

One with increased resolution:

[kiranshila]

@lstuemke - Awesome!!! @Gloamglozer and I are working on a PR. Would you like to join? This would be an excellent addition to Plotly and you seem to have a lot of the groundwork figured out.

[lstuemke]

Yeah absolutely, I'll help out any way I can.

[jensb]

+1

I'd love to have this as well.

[samuel-schuepbach]

Were you able to add this to plotly? This feature would be extremely helpful for us as well. Thanks

[Gloamglozer]

Luke, jensb, and Samuel,

So far I've just sketched out the attributes of a smith datatype as per

the core developers advice. Still waiting on their feedback

Check out 'smith_api.md' in the root of the project here https://github.com/Gloamglozer/plotly.js/tree/smith

If you guys are interested in being in the loop with the plot.ly guys, just send me your emails and i'll get you guys in on the email chain so you can see their thoughts.

-- Eric

On Wed, Apr 15, 2020 at 10:44 AM Samuel Schüpbach notifications@github.com wrote:

Were you able to add this to plotly? This feature would be extremely helpful for us as well. Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plotly/plotly.js/issues/4074#issuecomment-614082369, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZA25JK7JUJGIZ4L3T5523RMXB4LANCNFSM4IGEGMWA .

-- --Eric Valentino

[lstuemke]

@Gloamglozer , I would like to help out with this but not sure the best way to send you my email. I don't really want to post it here. Suggestions?

[lstuemke]

In the meantime, if you just want to visualize your data you can always plot your mag/angle data using Plotly's Polar Charts. They won't have the Smith gridlines, but it could be a useful workaround before Smith is released.

[Gloamglozer]

I don't really have a pressing need for them right now, I just think it would be cool to include them. I'm thinking of maybe using them in a website down the road.

Concerning communication, maybe we can communicate with those guys over GitHub, i know it has that KanBan function now, not sure if there's a good chat function. There was talk of a Slack channel, it would be cool to have some sort of project tracking with whatever we use.

I'll try and revive the issue with them after i'm off work today.

For now, here is the content of Nicholas Krutchen's email to me from a while back:

---

Hi folks! (moving Jack to bcc, adding Étienne even though he's on vacation)

I'm glad you're excited to contribute! This seems like a fun and challenging problem indeed! Probably the best place to start would be a call with someone on our Plotly.js team, and our tech-lead is on holiday until the 27th, so it might be best to wait until he's back to kick things off. I'm also cc'ing Alex, who has more experience than me in adding new subplot types, in case he wants to chime in.

In terms of high-level guidance, I would say that you should be thinking along the lines of adding two things to the library: a subplot type and a trace type.

1. First of all a new subplot type called "smith", similar to how we have a subplot type called "polar", so this means a set of objects in the layout part of the schema to control and configure the subplot. This will be the most challenging part, as you'll also need to design and implement all of the interactions in terms of what happens when the user clicks and drags in the plot: the zooming and panning interactions etc.
2. In tandem with that, you'll need a new kind of trace called "scattersmith", similar to how we have "scatterpolar", which will draw itself onto a given smith-type subplot. This means you'll be able to have, say, 2 smith subplots in a figure, with each of them having 2 scattersmith traces on them, for a total of 4 traces i.e. 4 legend items.

If you can start studying how scatterpolar traces and polar subplots interact, you'll get a sense of what's involved. We have a few different types of subplots, each of which has a scatter-like trace that targets it, and there is a lot of reuse across these components, which is both a blessing and a curse: you get a lot for free, but you need to really grok how things fit together.

I would recommend that once you've had a chance to study the polar/scatterpolar pairing, you could write up a short proposal for what the schema of attributes would look like for these new objects which we could discuss on the call. I.e. once this is implemented, what would end up in this page https://plot.ly/javascript/reference/, similar to the scatterpolar https://plot.ly/javascript/reference/#scatterpolar and polar https://plot.ly/javascript/reference/#layout-polar sections? This is usually how we like to start major new projects: by designing the external API first (usually keeping it as similar as possible to pre-existing elements) and then seeing what can be reused and what net-new code needs writing. This API proposal usually ends up guiding the test plan, as we'll want to have tests for most or all of the API.

In terms of the workflow for contributing, a good starting point is our contributing guide, https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md and Mojtaba can maybe walk you through some pull requests that added new trace-types https://github.com/plotly/plotly.js/pull/2954 (which we do reasonably often, we have about 40 now) and a new subplot-type https://github.com/plotly/plotly.js/pull/2200 (which is quite rare, as we only have a handful) to give you a sense of what's needed here.

Cheers, Nicolas

On Wed, Apr 15, 2020 at 11:23 AM Luke Stuemke notifications@github.com wrote:

In the meantime, if you just want to visualize your data you can always plot your mag/angle data using Plotly's Polar Charts https://plotly.com/javascript/polar-chart/. They won't have the Smith gridlines, but it could be a useful workaround before Smith is released.

[image: image] https://user-images.githubusercontent.com/49922901/79354954-13b1ab00-7f0b-11ea-9aa8-19e824e4cebf.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plotly/plotly.js/issues/4074#issuecomment-614105151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZA25IDF6EKHKQV5W2OEITRMXGOZANCNFSM4IGEGMWA .

-- --Eric Valentino

[samuel-schuepbach]

We are currently using plotly plots quite extensively in our application and are planning to use some sort of smith chart feature in the near future. So it would be perfect if we could use a plotly smith chart as well.

Keep me up to date if I can help you contributing in some way.

As for the communication, a slack channel might atually be quite useful.

Thank you for the updates.

[Gloamglozer]

Cool! I will make sure you are in the conversation, we’ll take opinions on how to collaborate in a Github issue maybe. Seeming like it makes sense to consolidate effort as much as possible

On Wed, Apr 15, 2020 at 12:10 PM Samuel Schüpbach notifications@github.com wrote:

We are currently using plotly plots quite extensively in our application and are planning to use some sort of smith chart feature in the near future. So it would be perfect if we could use a plotly smith chart as well.

Keep me up to date if I can help you contributing in some way.

As for the communication, a slack channel might atually be quite useful.

Thank you for the updates.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plotly/plotly.js/issues/4074#issuecomment-614132718, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZA25MYUHJ2EOSWZ2Z6JBDRMXMA5ANCNFSM4IGEGMWA .

-- --Eric Valentino

[Gloamglozer]

@lstuemke @rfriedma @samuel-schuepbach @jensb @kiranshila @ilPesce41 @nicolaskruchten

Made a slack for discussion of this here: https://join.slack.com/t/plotly-js-smith/shared_invite/zt-dlpgredf-L1hhcbnxOQZp0ZmVyiA1_A

Thinking we can just track progress using GithubProjects here: https://github.com/Gloamglozer/plotly.js/projects/1

As initially suggested by @nicolaskruchten the next step is to sketch out the API for the new smith plot type. We should all have a look and agree on the setup of the API, then have a call with the plotly guys to make sure it looks good to them too and make sure what we're proposing will work well with everything else.

After the API is done division of work will be a lot easier and we will all have the big picture in mind

[nicolaskruchten]

Hi @Gloamglozer, I'm sorry I haven't been able to respond to your email yet. I will try to get to it this week and get this train moving again!

[ajundi]

I have implemented Smith Charts using Plotly for my own personal use. I would love to help add this feature to Plotly if possible. Here are some screenshots of what I've done.

One with increased resolution:

Hi Luke, Would it be possible to add this to plotly or post the source code in your repo so I can use it? I don't know how to create something like this. Thanks :)

[jensb]

This looks beautiful. I'd give it +j\infinity stars to be included.

[lstuemke]

This totally fell off my radar @jensb. Let me get back in touch with @Gloamglozer and see where we're at.

Edit: I'm not sure how to get in contact with any of you. Don't particularly want to post my email address here. @kiranshila, @Gloamglozer, do you have a method of communication setup for this project?

[vik-s]

Hey, was the smith chart ever incorporated into plotly?

[Gloamglozer]

No, it looks like @ajundi had a good start. Adding smith charts was a big ambitious for me not knowing JS (coming from C and Python), suggest he makes a fork and PR, you can mention me in that fork

On Tue, Nov 10, 2020 at 9:01 AM Vikram Sekar notifications@github.com wrote:

Hey, was the smith chart ever incorporated into plotly?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plotly/plotly.js/issues/4074#issuecomment-724720384, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZA25KDEWHLI7PHIKVRCXTSPFBT3ANCNFSM4IGEGMWA .

-- --Eric Valentino

[nicolaskruchten]

@ajundi that looks really amazing! If you want to submit a pull request so we can see how you did it, we'd be happy to review it and work towards getting it incorporated into Plotly!

cc @alexcjohnson check this out!

[lstuemke]

@nicolaskruchten - Hi Nicolas, it looks like @ajundi was just referencing my post to ask me a question. Anyway, I'd love to help get this incorporated into Plotly.

[nicolaskruchten]

@lstuemke right, my mistake, sorry! Either way, if we can get this into a PR we'd love to help.

[vik-s]

Exciting! I would love to see this in plotly. My lack of JS know-how may not help development, but if I can help in testing in python, please let me know. I'm writing a streamlit app to plot RF sparameter data, and plotly would be a prime plotting tool. Smith charts would be awesome obviously!

[mcdevitts]

Hey all. What's the status here? I'd also love to help out here. I plot s-parameters a lot, and I would love to have an interactive smith chart.

[nicolaskruchten]

@lstuemke we're starting to work on this issue and I'm wondering if you're able and willing to share the code to the partial implementation you've got? :)

[jackparmer]

There's a WIP PR here for anyone who would like to help review:

https://github.com/plotly/plotly.js/pull/5615

Hoping to have this in the June release of Plotly.js and Plotly.py.

[0xCoto]

@Gloamglozer @lstuemke @rfriedma @samuel-schuepbach @jensb @kiranshila @ilPesce41 @nicolaskruchten

Hi all, any updates on the Smith chart implementation? I see a Python example here, but I haven't found anything for JS yet. 😕

[archmoj]

@0xCoto Implemented in #5956. Please see examples in https://github.com/plotly/plotly.js/pull/5956/files under test/image mocks & baselines.

[lstuemke]

@Gloamglozer @lstuemke @rfriedma @samuel-schuepbach @jensb @kiranshila @ilPesce41 @nicolaskruchten

Hi all, any updates on the Smith chart implementation? I see a Python example here, but I haven't found anything for JS yet. 😕

Here is a link to some of the documentation: https://plotly.com/javascript/reference/scattersmith/

Hope this helps!

[0xCoto]

@archmoj @lstuemke Thank you both! I did find the reference, but I'm having a hard time reproducing e.g. when using smith_basic.json, I get this result:

I assume I'm probably making some beginner mistake though

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myChart"></div>

  <script>
    var data = [
      {
        type: "scattersmith",
        real: [0, 0, 1, 1, 2, 5, 10],
        imag: [0, 1, 0, -2, -2, -5, -10],
        mode: "lines+markers",
        marker: {
          size: 20,
          opacity: 0.5
        }
      }
    ];

    var layout = {
      showlegend: false,
      paper_bgcolor: "lightgray",
      margin: {
        t: 40,
        b: 40,
        r: 40,
        l: 40
      },
      width: 800,
      height: 800,
      smith: {
        realaxis: {
          tickvals: [0.2, 0.4, 0.6, 0.8, 1, 1.5, 2, 3, 4, 5, 10, 20]
        }
      }
    };

    Plotly.newPlot("myChart", data, layout);
  </script>
</body>
</html>

[lstuemke]

Looks like you are using a version of plotly that doesn't have scattersmith implemented yet. Change your plotly reference to something like the following:

[0xCoto]

That fixed it, thanks!

[Will-Focus]

@lstuemke , In the samples you posted from your Smith Chart implementation it looks like the density of the gridlines changes in different regions of the chart. Is this still possible in the latest release? I'm looking to generate a Smith Chart similar to this:

The hover text in the samples also shows values as both impedance and normalized impedance. It looks as though the current release expects values to be normalized impedances. Is there a way to use impedances instead?

Thanks

[lstuemke]

@Will-Focus, Those screenshots were from before Smith was added to Plotly, which I made by hiding the gridlines in a plot and then manually adding a TON of traces in lieu of a grid (as a temporary workaround since it wasn't yet implemented in Plotly).

I ended up not contributing any code, so I cannot speak to what is officially supported. If you'd like, you can message me privately and I can share the Smith gridline math which allows for regions with varying grid density.

Thanks!