{
            "cells": [
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": null, "outputs": [],
           "source": ["#r \"nuget: Plotly.NET, 4.2.0\"\n",
"#r \"nuget: Plotly.NET.Interactive, 4.2.0\"\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["# Plotly.NET\n",
"\n",
"[![Binder](https://plotly.net/img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/plotly.net/gh-pages?urlpath=/tree/home/jovyan/index.ipynb)\u0026emsp;\n",
"[![Notebook](https://plotly.net/img/badge-notebook.svg)](https://plotly.net/index.ipynb)\n",
"\n",
"Plotly.NET provides functions for generating and rendering plotly.js charts in **.NET** programming languages 📈🚀.\n",
"\n",
"**This documentation page is almost exclusively for the core F# API of Plotly.NET.**\n",
"\n",
"It should be easy to translate them into C#. However, as work on the idiomatic C# API progresses, we will provide native C# docs as well.\n",
"\n",
"### Table of contents\n",
"\n",
"* [Installation](#Installation)\n",
"\n",
"  * [For applications and libraries](#For-applications-and-libraries)\n",
"  \n",
"  * [For scripting](#For-scripting)\n",
"  \n",
"  * [For dotnet interactive notebooks](#For-dotnet-interactive-notebooks)\n",
"  \n",
"\n",
"* [Overview](#Overview)\n",
"\n",
"  * [Basics](#Basics)\n",
"  \n",
"    * [Initializing a chart](#Initializing-a-chart)\n",
"    \n",
"    * [Styling a chart](#Styling-a-chart)\n",
"    \n",
"    * [Displaying a chart](#Displaying-a-chart)\n",
"    \n",
"  \n",
"  * [Comparison: Usage in F# and C#](#Comparison-Usage-in-F-and-C)\n",
"  \n",
"    * [Functional pipeline style in F#](#Functional-pipeline-style-in-F)\n",
"    \n",
"    * [Fluent interface style in C#](#Fluent-interface-style-in-C)\n",
"    \n",
"    * [Declarative style in F# using the underlying `DynamicObj`](#Declarative-style-in-F-using-the-underlying)\n",
"    \n",
"    * [Declarative style in C# using the underlying `DynamicObj`](#Declarative-style-in-C-using-the-underlying)\n",
"    \n",
"  \n",
"\n",
"* [Contributing and copyright](#Contributing-and-copyright)\n",
"\n",
"# Installation\n",
"\n",
"Plotly.NET consists of multiple packages. The two main ones are:\n",
"\n",
"* Plotly.NET [![](https://img.shields.io/nuget/vpre/Plotly.NET)](https://www.nuget.org/packages/Plotly.NET/), the core API written in F#.\n",
"\n",
"* Plotly.NET.CSharp [![](https://img.shields.io/nuget/vpre/Plotly.NET.CSharp)](https://www.nuget.org/packages/Plotly.NET.CSharp/), native C# bindings that make the usage of Plotly.NET more idiomatic from C#. This is work in progress. Missing charts and/or styling must be done via the core API.\n",
"\n",
"### For applications and libraries\n",
"\n",
"Plotly.NET packages are available on NuGet to plug into your favorite package manager.\n",
"\n",
"* dotnet CLI\n",
"  \n",
"\n",
"   ```shell\n",
"   dotnet add package Plotly.NET --version 4.2.0\n",
"   ```\n",
"  \n",
"\n",
"* paket CLI\n",
"  \n",
"\n",
"   ```shell\n",
"   paket add Plotly.NET --version 4.2.0\n",
"   ```\n",
"  \n",
"\n",
"* package manager\n",
"  \n",
"\n",
"   ```shell\n",
"   Install-Package Plotly.NET -Version 4.2.0\n",
"   ```\n",
"  \n",
"\n",
"  Or add the package reference directly to your `.*proj` file:\n",
"  \n",
"\n",
"   ```\n",
"   \u003cPackageReference Include=\"Plotly.NET\" Version=\"4.2.0\" /\u003e\n",
"   ```\n",
"  \n",
"\n",
"### For scripting\n",
"\n",
"You can include the package via an inline package reference:\n",
"\n",
"```\n",
"#r \"nuget: Plotly.NET, 4.2.0\"\n",
"```\n",
"\n",
"### For dotnet interactive notebooks\n",
"\n",
"You can use the same inline package reference as in scripts, but as an additional goodie\n",
"the interactive extensions for dotnet interactive have you covered for seamless chart rendering:\n",
"\n",
"```\n",
"#r \"nuget: Plotly.NET.Interactive, 4.2.0\"\n",
"```\n",
"\n",
"**Note**:\n",
"\n",
"Due to the currently fast development cycles of .NET Interactive, there might be increments in their versioning that render the current version of Plotly.NET.Interactive incompatible (example [here](https://github.com/plotly/Plotly.NET/issues/67)).\n",
"\n",
"If the interactive extension does not work, please file an issue and we will try to get it running again as soon as possible.\n",
"\n",
"A possible fix for this is the inclusion of Dotnet.Interactive preview package sources. To use these, add the following lines before referencing Plotly.NET.Interactive:\n",
"\n",
"```no-hl\n",
"#i \"nuget:https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet5/nuget/v3/index.json\"\n",
"#i \"nuget:https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-tools/nuget/v3/index.json\"\n",
"```\n",
"\n",
"# Overview\n",
"\n",
"## Basics\n",
"\n",
"The general, high-level API of Plotly.NET implements the following visualization flow:\n",
"\n",
"* **initialize** a `GenericChart` object from the data you want to visualize by using the respective `Chart.*` function, optionally setting some specific style parameters\n",
"\n",
"* further **style** the chart with fine-grained control, e.g. by setting axis titles, tick intervals, etc.\n",
"\n",
"* **display** (in the browser or as cell result in a notebook) or save the chart\n",
"\n",
"### Initializing a chart\n",
"\n",
"The `Chart` module contains a lot of functions named after the type of chart they will create, e.g.\n",
"`Chart.Point` will create a point chart, `Chart.Scatter3d` wil create a 3D scatter chart, and so on.\n",
"\n",
"The respective functions all contain specific arguments, but they all have in common that the first\n",
"mandatory arguments are the data to visualize.\n",
"\n",
"Example: The first two arguments of the `Chart.Point` function are the x and y data. You can therefore initialize a point chart like this:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 3, "outputs": [],
           "source": ["open Plotly.NET\n",
"let xData = [ 0. .. 10. ]\n",
"let yData = [ 0. .. 10. ]\n",
"let myFirstChart = Chart.Point(xData, yData)\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["### Styling a chart\n",
"\n",
"Styling functions are generally the `Chart.with*` naming convention. The following styling example does:\n",
"\n",
"* set the chart title via `Chart.withTitle`\n",
"\n",
"* set the x axis title and removes the gridline from the axis via `Chart.withXAxisStyle`\n",
"\n",
"* set the y axis title and removes the gridline from the axis via `Chart.withYAxisStyle`\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 4, "outputs": [],
           "source": ["let myFirstStyledChart =\n",
"    Chart.Point(xData, yData)\n",
"    |\u003e Chart.withTitle \"Hello world!\"\n",
"    |\u003e Chart.withXAxisStyle (\"xAxis\")\n",
"    |\u003e Chart.withYAxisStyle (\"yAxis\")\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["**Attention:** Styling functions mutate 😈 the input chart, therefore possibly affecting bindings to intermediary results.\n",
"We recommend creating a single chart for each workflow to prevent unexpected results.\n",
"\n",
"### Displaying a chart in the browser\n",
"\n",
"The `Chart.Show` function will open a browser window and render the input chart there. When working in a notebook context, after\n",
"[referencing Plotly.NET.Interactive](#For-dotnet-interactive-notebooks), the function is not necessary, just end the cell with the value of the chart.\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": null, "outputs": [],
           "source": ["myFirstChart |\u003e Chart.show\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["Should render this chart in your browser:\n",
"\n",
"\u003cdiv\u003e\u003cdiv id=\"fe3c313b-a69e-4539-a49d-e9163cddc4bc\"\u003e\u003c!-- Plotly chart will be drawn inside this DIV --\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003evar renderPlotly_fe3c313ba69e4539a49de9163cddc4bc = function() {\n",
"    var data = [{\"type\":\"scatter\",\"mode\":\"markers\",\"x\":[0.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],\"y\":[0.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],\"marker\":{},\"line\":{}}];\n",
"    var layout = {\"width\":600,\"height\":600,\"template\":{\"layout\":{\"title\":{\"x\":0.05},\"font\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"paper_bgcolor\":\"rgba(255, 255, 255, 1.0)\",\"plot_bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"autotypenumbers\":\"strict\",\"colorscale\":{\"diverging\":[[0.0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1.0,\"#276419\"]],\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}},\"geo\":{\"showland\":true,\"landcolor\":\"rgba(229, 236, 246, 1.0)\",\"showlakes\":true,\"lakecolor\":\"rgba(255, 255, 255, 1.0)\",\"subunitcolor\":\"rgba(255, 255, 255, 1.0)\",\"bgcolor\":\"rgba(255, 255, 255, 1.0)\"},\"mapbox\":{\"style\":\"light\"},\"polar\":{\"bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"radialaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"},\"angularaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"}},\"scene\":{\"xaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"yaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"zaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true}},\"ternary\":{\"aaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"baxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"caxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"bgcolor\":\"rgba(229, 236, 246, 1.0)\"},\"xaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":\"height+width+left+right+top+bottom\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"yaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":\"height+width+left+right+top+bottom\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"shapedefaults\":{\"line\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}},\"colorway\":[\"rgba(99, 110, 250, 1.0)\",\"rgba(239, 85, 59, 1.0)\",\"rgba(0, 204, 150, 1.0)\",\"rgba(171, 99, 250, 1.0)\",\"rgba(255, 161, 90, 1.0)\",\"rgba(25, 211, 243, 1.0)\",\"rgba(255, 102, 146, 1.0)\",\"rgba(182, 232, 128, 1.0)\",\"rgba(255, 151, 255, 1.0)\",\"rgba(254, 203, 82, 1.0)\"]},\"data\":{\"bar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"error_x\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"error_y\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"carpet\":[{\"aaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"},\"baxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"}}],\"choropleth\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contour\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contourcarpet\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}],\"heatmap\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmapgl\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"histogram2d\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"histogram2dcontour\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}],\"parcoords\":[{\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"pie\":[{\"automargin\":true}],\"scatter\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatter3d\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}},\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattercarpet\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattergeo\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattergl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattermapbox\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterpolar\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterpolargl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterternary\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"surface\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"rgba(235, 240, 248, 1.0)\"},\"line\":{\"color\":\"rgba(255, 255, 255, 1.0)\"}},\"header\":{\"fill\":{\"color\":\"rgba(200, 212, 227, 1.0)\"},\"line\":{\"color\":\"rgba(255, 255, 255, 1.0)\"}}}]}}};\n",
"    var config = {\"responsive\":true};\n",
"    Plotly.newPlot(\u0027fe3c313b-a69e-4539-a49d-e9163cddc4bc\u0027, data, layout, config);\n",
"};\n",
"renderPlotly_fe3c313ba69e4539a49de9163cddc4bc();\n",
"\u003c/script\u003e\u003c/div\u003e\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": null, "outputs": [],
           "source": ["myFirstStyledChart |\u003e Chart.show\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["And here is what happened after applying the styles from above:\n",
"\n",
"\u003cdiv\u003e\u003cdiv id=\"c1caed62-6734-4e95-a35a-ef7b603c76ae\"\u003e\u003c!-- Plotly chart will be drawn inside this DIV --\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003evar renderPlotly_c1caed6267344e95a35aef7b603c76ae = function() {\n",
"    var data = [{\"type\":\"scatter\",\"mode\":\"markers\",\"x\":[0.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],\"y\":[0.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],\"marker\":{},\"line\":{}}];\n",
"    var layout = {\"width\":600,\"height\":600,\"template\":{\"layout\":{\"title\":{\"x\":0.05},\"font\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"paper_bgcolor\":\"rgba(255, 255, 255, 1.0)\",\"plot_bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"autotypenumbers\":\"strict\",\"colorscale\":{\"diverging\":[[0.0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1.0,\"#276419\"]],\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}},\"geo\":{\"showland\":true,\"landcolor\":\"rgba(229, 236, 246, 1.0)\",\"showlakes\":true,\"lakecolor\":\"rgba(255, 255, 255, 1.0)\",\"subunitcolor\":\"rgba(255, 255, 255, 1.0)\",\"bgcolor\":\"rgba(255, 255, 255, 1.0)\"},\"mapbox\":{\"style\":\"light\"},\"polar\":{\"bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"radialaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"},\"angularaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"}},\"scene\":{\"xaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"yaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"zaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true}},\"ternary\":{\"aaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"baxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"caxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"bgcolor\":\"rgba(229, 236, 246, 1.0)\"},\"xaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":\"height+width+left+right+top+bottom\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"yaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":\"height+width+left+right+top+bottom\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"shapedefaults\":{\"line\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}},\"colorway\":[\"rgba(99, 110, 250, 1.0)\",\"rgba(239, 85, 59, 1.0)\",\"rgba(0, 204, 150, 1.0)\",\"rgba(171, 99, 250, 1.0)\",\"rgba(255, 161, 90, 1.0)\",\"rgba(25, 211, 243, 1.0)\",\"rgba(255, 102, 146, 1.0)\",\"rgba(182, 232, 128, 1.0)\",\"rgba(255, 151, 255, 1.0)\",\"rgba(254, 203, 82, 1.0)\"]},\"data\":{\"bar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"error_x\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"error_y\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"carpet\":[{\"aaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"},\"baxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"}}],\"choropleth\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contour\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contourcarpet\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}],\"heatmap\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmapgl\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"histogram2d\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"histogram2dcontour\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}],\"parcoords\":[{\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"pie\":[{\"automargin\":true}],\"scatter\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatter3d\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}},\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattercarpet\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattergeo\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattergl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scattermapbox\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterpolar\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterpolargl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"scatterternary\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"}}}],\"surface\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"rgba(235, 240, 248, 1.0)\"},\"line\":{\"color\":\"rgba(255, 255, 255, 1.0)\"}},\"header\":{\"fill\":{\"color\":\"rgba(200, 212, 227, 1.0)\"},\"line\":{\"color\":\"rgba(255, 255, 255, 1.0)\"}}}]}},\"title\":{\"text\":\"Hello world!\"},\"xaxis\":{\"title\":{\"text\":\"xAxis\"}},\"yaxis\":{\"title\":{\"text\":\"yAxis\"}}};\n",
"    var config = {\"responsive\":true};\n",
"    Plotly.newPlot(\u0027c1caed62-6734-4e95-a35a-ef7b603c76ae\u0027, data, layout, config);\n",
"};\n",
"renderPlotly_c1caed6267344e95a35aef7b603c76ae();\n",
"\u003c/script\u003e\u003c/div\u003e\n",
"\n",
"### Displaying a chart in a notebook cell output\n",
"\n",
"In a notebook context, you usually have (at least when running on a Jupyter server like Binder) no access to the browser on the machine where plotly runs on.\n",
"That\u0027s why you can render charts directly in the cell output. Just end the cell with the chart value:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 7, "outputs": [],
           "source": ["let xData\u0027 = [ 0. .. 10. ]\n",
"let yData\u0027 = [ 0. .. 10. ]\n",
"Chart.Point(xData\u0027, yData\u0027)\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["Here is the styled chart:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 8, "outputs": [],
           "source": ["Chart.Point(xData, yData)\n",
"|\u003e Chart.withTitle \"Hello world!\"\n",
"|\u003e Chart.withXAxisStyle (\"xAxis\")\n",
"|\u003e Chart.withYAxisStyle (\"yAxis\")\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["## Comparison: Usage in F# and C#\n",
"\n",
"One of the main design points of Plotly.NET is to provide support for multiple flavors of chart generation. Here are two examples in different styles and languages that create equivalent charts:\n",
"\n",
"### Functional pipeline style in F#:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 9, "outputs": [],
           "source": ["[ (1, 5); (2, 10) ]\n",
"|\u003e Chart.Point\n",
"|\u003e Chart.withTraceInfo (Name = \"Hello from F#\")\n",
"|\u003e Chart.withYAxisStyle (TitleText = \"xAxis\")\n",
"|\u003e Chart.withXAxisStyle (TitleText = \"yAxis\")\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["### Fluent interface style in C#:\n",
"\n",
"This example uses the high-level native C# bindings for Plotly.NET that are provided by the `Plotly.NET.CSharp` package.\n",
"\n",
"```csharp\n",
"using System;\n",
"using Plotly.NET.CSharp;\n",
"\n",
"Chart.Point\u003cdouble, double, string\u003e(\n",
"    x: new double[] { 1, 2 }, \n",
"    y: new double[] { 5, 10 }\n",
")\n",
".WithTraceInfo(\"Hello from C#\", ShowLegend: true)\n",
".WithXAxisStyle\u003cdouble, double, string\u003e(Title: Plotly.NET.Title.init(\"xAxis\"))\n",
".WithYAxisStyle\u003cdouble, double, string\u003e(Title: Plotly.NET.Title.init(\"yAxis\"))\n",
".Show();\n",
"```\n",
"\n",
"### Declarative style in F# using the underlying `DynamicObj`:\n",
"\n",
"This API is the most low-level and closest to the original plotly.js syntax. Make sure to spell dynamic members exactly as they are used in the plotly.js json schema.\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 10, "outputs": [],
           "source": ["open Plotly.NET.LayoutObjects\n",
"\n",
"let xAxis =\n",
"    let tmp = LinearAxis()\n",
"    tmp?title \u003c- \"xAxis\"\n",
"    tmp?showgrid \u003c- false\n",
"    tmp?showline \u003c- true\n",
"    tmp\n",
"\n",
"let yAxis =\n",
"    let tmp = LinearAxis()\n",
"    tmp?title \u003c- \"yAxis\"\n",
"    tmp?showgrid \u003c- false\n",
"    tmp?showline \u003c- true\n",
"    tmp\n",
"\n",
"let layout =\n",
"    let tmp = Layout()\n",
"    tmp?xaxis \u003c- xAxis\n",
"    tmp?yaxis \u003c- yAxis\n",
"    tmp?showlegend \u003c- true\n",
"    tmp\n",
"\n",
"let trace =\n",
"    let tmp = Trace(\"scatter\")\n",
"    tmp?x \u003c- [ 1; 2 ]\n",
"    tmp?y \u003c- [ 5; 10 ]\n",
"    tmp?mode \u003c- \"markers\"\n",
"    tmp?name \u003c- \"Hello from F#\"\n",
"    tmp\n",
"\n",
"GenericChart.ofTraceObject true trace |\u003e GenericChart.setLayout layout\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["### Declarative style in C# using the underlying `DynamicObj`:\n",
"\n",
"Note that this works only when using the Plotly.NET core API, as the C# bindings only target the high level API.\n",
"\n",
"```csharp\n",
"using System;\n",
"using Plotly.NET;\n",
"using Plotly.NET.LayoutObjects;\n",
"\n",
"double[] x = new double[] { 1, 2 };\n",
"double[] y = new double[] { 5, 10 };\n",
"\n",
"LinearAxis xAxis = new LinearAxis();\n",
"xAxis.SetValue(\"title\", \"xAxis\");\n",
"xAxis.SetValue(\"showgrid\", false);\n",
"xAxis.SetValue(\"showline\", true);\n",
"\n",
"LinearAxis yAxis = new LinearAxis();\n",
"yAxis.SetValue(\"title\", \"yAxis\");\n",
"yAxis.SetValue(\"showgrid\", false);\n",
"yAxis.SetValue(\"showline\", true);\n",
"\n",
"Layout layout = new Layout();\n",
"layout.SetValue(\"xaxis\", xAxis);\n",
"layout.SetValue(\"yaxis\", yAxis);\n",
"layout.SetValue(\"showlegend\", true);\n",
"\n",
"Trace trace = new Trace(\"scatter\");\n",
"trace.SetValue(\"x\", x);\n",
"trace.SetValue(\"y\", y);\n",
"trace.SetValue(\"mode\", \"markers\");\n",
"trace.SetValue(\"name\", \"Hello from C#\");\n",
"\n",
"GenericChart\n",
"    .ofTraceObject(true, trace)\n",
"    .WithLayout(layout)\n",
"    .Show();\n",
"```\n",
"\n",
"# Contributing and copyright\n",
"\n",
"The project is hosted on [GitHub](https://github.com/plotly/Plotly.NET) where you can [report issues](https://github.com/plotly/Plotly.NET/issues), fork\n",
"the project and submit pull requests. If you\u0027re adding a new public API, please also\n",
"consider adding [samples](https://github.com/plotly/Plotly.NET/tree/dev/docs) that can be turned into a documentation. You might\n",
"also want to read the [library design notes](https://github.com/plotly/Plotly.NET/blob/dev/README.md) to understand how it works.\n",
"\n",
"The library is available under the OSI-approved MIT license which allows modification and\n",
"redistribution for both commercial and non-commercial purposes. For more information, see the\n",
"[License file](https://github.com/plotly/Plotly.NET/blob/dev/LICENSE) in the GitHub repository.\n",
"\n"]
          }],
            "metadata": {
            "kernelspec": {"display_name": ".NET (F#)", "language": "F#", "name": ".net-fsharp"},
            "langauge_info": {
        "file_extension": ".fs",
        "mimetype": "text/x-fsharp",
        "name": "C#",
        "pygments_lexer": "fsharp",
        "version": "4.5"
        }
        },
            "nbformat": 4,
            "nbformat_minor": 1
        }