Skip to main content

Integration of Plotly library

An API of plotly.js library is available from Wolfram Kernel, there is 1:1 correspondance between Javascript numbers, arrays and objects. Please see their API for all features.

Download original notebook

Basic charts​

When you call Plotly it acts as a contructor to a corresponsing object

plot = Plotly[<|
  "y"->RandomReal[{-1,1}, 10],
  "mode"->"lines"
|>]
(*VB[*)(FrontEndRef["7f561d72-f05e-45e0-99d7-bfc6b9537e40"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKm6eZmhmmmBvpphmYpuqamKYa6FpappjrJqUlmyVZmhqbp5oYAACBshWI"*)(*]VB*)

To add more traces on existing plot dynamically - call a dedicated method

Plotly`addTraces[plot, {<|"y"->RandomReal[{-1,1}, 10]|>}]

Using Plotly API on can also extend plots and animate them. Please see more examples here.

To plot multiple traces from the beginning supply arrays for x and y axes

trace := <|
	"y" -> RandomReal[{-1,1}, 10], 
	"type" -> "line" 
|>;

Plotly[{trace, trace, trace}]
(*VB[*)(FrontEndRef["419f4035-302b-41c7-bf38-dd576d759e2f"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKmxhappkYGJvqGhsYJemaGCab6yalGVvopqSYmpulmJtaphqlAQB12xVM"*)(*]VB*)

Scatter plots​

trace1 = <|
	"x" -> Range[0, 2Pi, 0.1], 
	"y" -> (Sin @ Range[0, 2Pi, 0.1]),
	"mode" -> "markers", 
	"type" -> "scatter" 
|>;

Plotly[trace1]
(*VB[*)(FrontEndRef["a964360b-ad1b-4a41-9984-50f0b3740e4f"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJ1qamRibGSTpJqYYJumaJJoY6lpaWpjomhqkGSQZm5sYpJqkAQB9TBU8"*)(*]VB*)

Bar plot​

trace = <| 
	"x" -> {"giraffes", "orangutans", "monkeys"}, 
	"y" -> {20, 14, 23}, "type" -> "bar" 
|>;

Plotly[trace] 
(*VB[*)(FrontEndRef["820714a9-04c7-4501-aa03-9c047e5e4e19"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKWxgZmBuaJFrqGpgkm+uamBoY6iYmGhjrWiYbmJinmqaapBpaAgBvfxTZ"*)(*]VB*)

Pie chart​

trace = <| 
	"values" -> {19, 26, 55}, 
	"labels" -> {"Residential", "Non-Residential", "Utility"}, 
	"type" -> "pie" 
|>;

Plotly[trace]
(*VB[*)(FrontEndRef["64656c6c-f588-41c4-bd85-1ae92ef6c6a3"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKm5mYmZolmyXrpplaWOiaGCab6CalWJjqGiamWhqlpgGlEo0BftwVtA=="*)(*]VB*)

Bubble chart​

data = <|
	"x" -> {1, 2, 3, 4}, 
	"y" -> {10, 11, 12, 13}, 
	"mode" -> "markers", 
	"marker" -> <| "size" -> {40, 60, 80, 100} |> 
|>;

Plotly[data]
(*VB[*)(FrontEndRef["42907789-a51e-4b48-bedf-cf7a7c4667a6"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKmxhZGpibW1jqJpoapuqaJJlY6CalpqTpJqeZJ5onm5iZmSeaAQB9uRW5"*)(*]VB*)

Heatmaps​

data = <|
	"z" -> Table[x y, {x,-10,10}, {y,-10,10}],
	"type" -> "heatmap"
|>;

Plotly[data]
(*VB[*)(FrontEndRef["320c93ff-597a-4890-bbc4-76ffc2bc5081"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKGxsZJFsap6XpmlqaJ+qaWFga6CYlJZvompulpSUbJSWbGlgYAgCCARWq"*)(*]VB*)

Contour plot​

data = Flatten[Table[{x,y,x y}, {x,-10,10}, {y,-10,10}],1] // Transpose;

data = <|
    "x" -> data[[1]],
    "y" -> data[[2]],
	"z" -> data[[3]],
	"type" -> "contour"
|>;

Plotly[data]
(*VB[*)(FrontEndRef["a42e52f9-eaa6-4f07-b815-0efb701a3feb"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJ5oYpZoapVnqpiYmmumapBmY6yZZGJrqGqSmJZkbGCYap6UmAQCK6hYp"*)(*]VB*)

Surface plot​

data = <|
	"z" -> Table[x y, {x,-10,10}, {y,-10,10}],
	"type" -> "surface"
|>;

Plotly[data]
(*VB[*)(FrontEndRef["948f1cac-da20-4607-9d58-750da6472509"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKW5pYpBkmJybrpiQaGeiamBmY61qmmFrompsapCSamZgbmRpYAgCC1xUa"*)(*]VB*)

WebGL accelerated Scatter plot​

data = RandomReal[{-1,1}, {2,10000}];

Plotly[<|
  "y" -> data[[2]],
  "x" -> data[[1]],
  "mode"-> "markers",
  "type"-> "scattergl"
|>]
(*VB[*)(FrontEndRef["e6ae0e0c-8470-4d67-a001-c6095636995e"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKp5olphqkGiTrWpiYG+iapJiZ6yYaGBjqJpsZWJqaGZtZWpqmAgCCyRUY"*)(*]VB*)

And many more!​

Please visit PlotlyJS website