Here we are using MDX with custom components represeting notebook cells with code, widgets, anything we can see in a normal WLJS Notebook.
Use Share menu button in WLJS Notebook application.
Now let's have a look at some example
Download original notebookAn example of built-in function for interactive plotting
ManipulatePlot[{ (*TB[*)Sum[(*|*)(*FB[*)((Sin[2π(3j - 1) x])(*,*)/(*,*)(3j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*), (*TB[*)Sum[(*|*)(*FB[*)((Sin[2π(2j - 1) x])(*,*)/(*,*)(2j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*) }, {x, 0,3}, {{n,4}, 1,7, 1}]
(*GB[*){{(*VB[*)(FrontEndRef["79213c8c-8ddf-49b8-816e-4e184884bda7"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKm1saGRonWyTrWqSkpOmaWCZZ6FoYmqXqmqQaWphYWJgkpSSaAwCA7xWQ"*)(*]VB*)(*|*),(*|*)(*VB[*)(EventObject[<|"Id" -> "6545b490-3d1e-451f-bbad-31d4d45dee47", "Initial" -> {4}, "View" -> "0f002cea-b6d7-4c0c-ac41-9f5e5cc742bf"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKG6QZGBglpybqJpmlmOuaJBsk6yYmmxjqWqaZppomJ5ubGCWlAQCOxhZT"*)(*]VB*)}}(*]GB*)
Some example with 2D/3D graphics
ListPlot[ Table[{k, PDF[BinomialDistribution[50, p], k]}, {p, {0.3, 0.5, 0.8}}, {k, 0, 50}], Filling -> Axis, PlotLegends -> {0.3, 0.5, 0.8}]
(*VB[*)(Legended[ToExpression[FrontEndRef["b5e1bc6c-b6c8-4f57-9bc5-1c131cf9418e"], InputForm], Placed[PointLegend[{Directive[PointSize[0.009166666666666668], RGBColor[0.24, 0.6, 0.8], AbsoluteThickness[2]], Directive[PointSize[0.009166666666666668], RGBColor[0.95, 0.627, 0.1425], AbsoluteThickness[2]], Directive[PointSize[0.009166666666666668], RGBColor[0.455, 0.7, 0.21], AbsoluteThickness[2]]}, {0.3, 0.5, 0.8}, LegendMarkers -> {{False, Automatic}, {False, Automatic}, {False, Automatic}}, Joined -> {False, False, False}, LabelStyle -> {}, LegendLayout -> "Column"], After, Identity]])(*,*)(*"1:eJy9U71LHEEUX01McmogirUSsMwVq97lLGS46HkkrBhdSSszs2+S4dYdmZlNPEvBf8BO23QpUlsHgmBhoYWVEFGEEBAs7TIfKudxRSAkr/gx7+37+L2PfU7EInsQBIF6auAdh08zQIXEWsj4sbFE8B6yZIx1W5deA7WEm2/WkXVZ26CBWSkyXcuS2hrQXGOSQjxqzKQEIaFlWiRlWilOsNLL4iShpWJIw/GQssmJsAI+8UMDi7kJe2IfgJP5LG0665LMwfN7ZOBtiikkzD5Vn9UFz7Sn6J1sSMSV9lrBwAyXQDX/CJ5u4TYq5usg97aWX1x/30De3RWvv5oWqZByd3jz18LuAZLjTs6Q3Nm28hP5RAMGqkSJNNew9IHTRgZKcdvN39dmTi6R/HJ1OEeenSM51Xv8eXXq23+oPWLbHj5BNyQukDxdH/paP93/w9q3G7iZ2xGSgZMfLQO8t3N3eH6Hc1g2QKq2VXa3aqrH3htOFbiWqrkWK1hz+m+8HD97bW/M6KDtxlrCO7zakthfJ8IE0lg3U2BB5w6da//dPCLcFLmOLQGznHwlc+mrTJsh2aW9TiDTXDd/A7lNAyc="*)(*]VB*)
Contour plot
ContourPlot[ Cos[x] + Cos[y], {x, 0, 4 Pi}, {y, 0, 4 Pi} ]
(*VB[*)(FrontEndRef["79848062-9ed4-4d9f-99ce-da161b7bb29e"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKm1tamFgYmBnpWqammOiapFim6VpaJqfqpiQamhkmmSclGVmmAgB8dhXA"*)(*]VB*)
Vector plot
VectorPlot[{x + y, y - x}, {x, -3, 3}, {y, -3, 3}]
(*VB[*)(FrontEndRef["01c519e7-714c-47d3-b48d-37a24c2b8c98"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKGxgmmxpapprrmhuaJOuamKcY6yaZWKToGpsnGpkkGyVZJFtaAAB51hVJ"*)(*]VB*)
3D Plots
Plot3D[Im[ArcSin[(x + I y)^4]], {x, -2, 2}, {y, -2, 2}, Mesh -> None, PlotStyle -> Directive[Yellow, Opacity[0.8]], ExclusionsStyle -> {None, Red} ]
(*VB[*)(FrontEndRef["9f2b29d9-fe70-49c7-817f-9d2b1ab93ede"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKW6YZJRlZpljqpqWaG+iaWCab61oYmqfpWqYYJRkmJlkap6akAgCHyBYc"*)(*]VB*)
It is not recommened to use for plotting, but still available for a user
Manipulate[Series[Sin[x], {x,0,n}], {n,1,10,1}]
(*GB[*){{(*VB[*)(EventObject[<|"Id" -> "aaddde26-0046-41f5-97ca-36a7eef39136", "Initial" -> {6}, "View" -> "daf4b997-86c4-49d5-b1f8-d0e910b90c83"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKpySmmSRZWprrWpglm+iaWKaY6iYZplnophikWhoaJFkaJFsYAwCLPhW1"*)(*]VB*)}(*||*),(*||*){(*VB[*)(FrontEndRef["0ae93ca6-ee89-493d-944b-8e625028cd88"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKGySmWhonJ5rppqZaWOqaWBqn6FqamCTpWqSaGZkaGFkkp1hYAACIcxWM"*)(*]VB*)}}(*]GB*)
Here is an example with Plot3D
Manipulate[ Plot3D[Sin[n x] Cos[n y], {x,-1,1}, {y,-1,1}] , {n, 1, 5, 1}]
(*GB[*){{(*VB[*)(EventObject[<|"Id" -> "20616582-e413-4b7c-8993-9a2d7d87c936", "Initial" -> {3}, "View" -> "b3f41d06-d0c9-4e51-b501-7a666df690f5"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJxmnmRimGJjpphgkW+qapJoa6iaZGhjqmieamZmlpJlZGqSZAgCDAhVy"*)(*]VB*)}(*||*),(*||*){(*VB[*)(FrontEndRef["8c42d608-c90a-4da4-ad61-4b2e24ee7aef"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKWySbGKWYGVjoJlsaJOqapCSa6CammBnqmiQZpRqZpKaaJ6amAQCFwhYs"*)(*]VB*)}}(*]GB*)
Here is a more complex example
Manipulate[ Row[{ "m", "==", MatrixForm[m], StreamPlot[Evaluate[m . {x, y}], {x, -1, 1}, {y, -1, 1}, StreamScale -> Large, ImageSize -> Small ] }], {{m, ((*GB[*){{1(*|*),(*|*)0}(*||*),(*||*){0(*|*),(*|*)2}}(*]GB*))}, { ((*GB[*){{1(*|*),(*|*)0}(*||*),(*||*){0(*|*),(*|*)2}}(*]GB*)) -> "Nodal source", ((*GB[*){{1(*|*),(*|*)1}(*||*),(*||*){0(*|*),(*|*)1}}(*]GB*)) -> "Degenerate source", ((*GB[*){{0(*|*),(*|*)1}(*||*),(*||*){-1(*|*),(*|*)1}}(*]GB*)) -> "Spiral source", ((*GB[*){{-1(*|*),(*|*)0}(*||*),(*||*){0(*|*),(*|*)-2}}(*]GB*)) -> "Nodal sink", ((*GB[*){{-1(*|*),(*|*)1}(*||*),(*||*){0(*|*),(*|*)-1}}(*]GB*)) -> "Degenerate sink", ((*GB[*){{0(*|*),(*|*)1}(*||*),(*||*){-1(*|*),(*|*)-1}}(*]GB*)) -> "Spiral sink", ((*GB[*){{0(*|*),(*|*)1}(*||*),(*||*){-1(*|*),(*|*)0}}(*]GB*)) -> "Center", ((*GB[*){{1(*|*),(*|*)0}(*||*),(*||*){0(*|*),(*|*)-2}}(*]GB*)) -> "Saddle"}}]
(*GB[*){{(*VB[*)(EventObject[<|"Id" -> "51b73d57-5a47-47a6-9d22-5f7bee807f28", "Initial" -> {{{1, 0}, {0, 2}}}, "View" -> "40f2f762-2e51-41d8-97d6-fc18c713a94f"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKmxikGaWZmxnpGqWaGuqaGKZY6Fqap5jppiUbWiSbGxonWpqkAQB6YhVQ"*)(*]VB*)}(*||*),(*||*){(*VB[*)(FrontEndRef["b0ef8392-778a-4a32-8216-7d32663b3f90"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJxmkplkYWxrpmptbJOqaJBob6VoYGZrpmqcYG5mZGScZp1kaAAB7XBTr"*)(*]VB*)}}(*]GB*)