🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 165 (from laksa082)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa165.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://plotly.com/javascript/\')), getAhrefsUnparsedNoserviceFromURL(\'https://plotly.com/javascript/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/plotly.com\/javascript\/","crawl_time":1776464075,"first_indexed_time":1585166865,"http_code":200,"src_unparsed":"com,plotly!\/javascript\/ s443","src_root_hash":"13020579380339811765","history_drop_reason":null,"meta_title":"Plotly javascript graphing library in JavaScript","meta_descriptions":["A"],"attrs_boilerpipe_text":"Plotly Studio: Transform any dataset into an interactive data application in minutes with AI.\nTry Plotly Studio now.\nRead more about plotly.js features\nSophisticated chart types\nplotly.js\nabstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.\nd3.json('https:\/\/plotly.com\/~DanielCarrera\/13.json', function(figure){\n                  var trace = {\n                    x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z,\n                    type: 'contour', autocolorscale: false,\n                    colorscale: [[0,\"rgb(  0,  0,  0)\"],[0.3,\"rgb(230,  0,  0)\"],[0.6,\"rgb(255,210,  0)\"],[1,\"rgb(255,255,255)\"]],\n                    reversescale: true, zmax: 2.5, zmin: -2.5\n                  };\n                  var layout = {\n                    title: {\n                      text: 'turbulence simulation'\n                  },\n                    xaxis: {\n                      title: {\n                          text: 'radial direction'\n                      },\n                      showline: true,\n                      mirror: 'allticks',\n                      ticks: 'inside'\n                    },\n                    yaxis: {\n                        title: {\n                            text: 'vertical direction'\n                        },\n                        showline: true,\n                        mirror: 'allticks',\n                        ticks: 'inside'\n                    },\n                    margin: {l: 40, b: 40, t: 60},\n                    annotations: [{\n                      showarrow: false,\n                      text: 'Credit:\nDaniel Carrera\n',\n                      x: 0, y: 0, xref: 'paper', yref: 'paper'\n                    }]\n                  }\n                  Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false});\n                });\nFully customizable\nplotly.js\ncharts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.\nd3.csv('https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/wind_speed_laurel_nebraska.csv', function(rows){\n                    var trace = {\n                      type: 'scatter',                    \/\/ set the chart type\n                      mode: 'lines',                      \/\/ connect points with lines\n                      x: rows.map(function(row){          \/\/ set the x-data\n                        return row['Time'];\n                      }),\n                      y: rows.map(function(row){          \/\/ set the x-data\n                        return row['10 Min Sampled Avg'];\n                      }),\n                      line: {                             \/\/ set the width of the line.\n                        width: 1\n                      },\n                      error_y: {\n                        array: rows.map(function(row){    \/\/ set the height of the error bars\n                          return row['10 Min Std Dev'];\n                        }),\n                        thickness: 0.5,                   \/\/ set the thickness of the error bars\n                        width: 0\n                      }\n                    };\n\n                    var layout = {\n                      yaxis: {\n                        title: {\n                          text: \"Wind Speed\"\n                        }\n                      },       \/\/ set the y axis title\n                      xaxis: {\n                        showgrid: false,                  \/\/ remove the x-axis grid lines\n                        tickformat: \"%B, %Y\"              \/\/ customize the date format to \"month, day\"\n                      },\n                      margin: {                           \/\/ update the left, bottom, right, top margin\n                        l: 40, b: 10, r: 10, t: 20\n                      }\n                    };\n\n                    Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});\n                });\nHigh performance\nThis chart was drawn with the\nplotly.js\nchart type\nscattergl\n.\nscattergl\ncharts render an order of magnitude faster than their SVG counterparts.\nUniversal\nBy abstracting charts to a declarative JSON structure,\nplotly.js\nis used as a browser-based charting library for\nPython\n,\nR\n,\nMATLAB\n.\nConfiguration Options\nView Tutorial\nResponsive \/ Fluid Layouts\nView Tutorial\nuirevision in Plotly.react\nView Tutorial\nReact Plotly.js\nView Tutorial\nAnalytical Apps with Dash\nView Tutorial\nScatter Plots\nView Tutorial\nLine Charts\nView Tutorial\nBar Charts\nView Tutorial\nPie Charts\nView Tutorial\nBubble Charts\nView Tutorial\nError Bars\nView Tutorial\nBox Plots\nView Tutorial\nHistograms\nView Tutorial\n2d Density Plots\nView Tutorial\nContinuous Error Bars\nView Tutorial\nContour Plots\nView Tutorial\nHeatmaps\nView Tutorial\nTernary Plots\nView Tutorial\nParallel Coordinates Plot\nView Tutorial\nLog Plots\nView Tutorial\nWaterfall Charts\nView Tutorial\nIndicators\nView Tutorial\nCandlestick Charts\nView Tutorial\nFunnel and Funnelarea Charts\nView Tutorial\nTime Series\nView Tutorial\nMigrate to Maplibre\nView Tutorial\nTile Map Layers\nView Tutorial\nTile Density Heatmap\nView Tutorial\nChoropleth Tile Map\nView Tutorial\nLines on Maps\nView Tutorial\n3D Scatter Plots\nView Tutorial\nRibbon Plots\nView Tutorial\n3D Surface Plots\nView Tutorial\n3D Mesh Plots\nView Tutorial\n3D Line Plots\nView Tutorial\nSubplots\nView Tutorial\nInset Plots\nView Tutorial\n3D Subplots\nView Tutorial\nMixed Subplots\nView Tutorial\nTable Subplots\nView Tutorial\nClick Events\nView Tutorial\nHover Events\nView Tutorial\nZoom Events\nView Tutorial\nDisable Zoom Events\nView Tutorial\nDropdown Events\nView Tutorial\nButton Events\nView Tutorial\nSlider Events\nView Tutorial\nLasso Selection\nView Tutorial\nRange Slider and Selector\nView Tutorial\nAnimations\nView Tutorial\nAdding Sliders to Animations\nView Tutorial\nFilled-Area Animation\nView Tutorial\nMap Animation\nView Tutorial","attrs_markdown":"- [Download Studio](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=header)\n- [Studio and Cloud Pricing](https:\/\/plotly.com\/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header)\n- [Dash Enterprise Pricing](https:\/\/plotly.com\/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header)\n\n[![](https:\/\/plotly.com\/all_static\/images\/graphing_library_dark.svg)](https:\/\/plotly.com\/) [![](https:\/\/plotly.com\/all_static\/images\/graphing_library.svg)](https:\/\/plotly.com\/graphing-libraries\/)\n\n- [Javascript (v3.4.0)]()\n  - [Python (v6.6.0)](https:\/\/plotly.com\/python\/)\n  - [R](https:\/\/plotly.com\/r\/)\n  - [Julia](https:\/\/plotly.com\/julia\/)\n  - [Javascript (v3.4.0)](https:\/\/plotly.com\/javascript\/)\n  - [ggplot2](https:\/\/plotly.com\/ggplot2\/)\n  - [MATLAB](https:\/\/plotly.com\/matlab\/)\n  - [F\\#](https:\/\/plotly.com\/fsharp\/)\n- [Download Studio](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=header)\n- [Studio and Cloud Pricing](https:\/\/plotly.com\/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header)\n- [Dash Enterprise Pricing](https:\/\/plotly.com\/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header)\n\n[![](https:\/\/plotly.com\/all_static\/images\/graphing_library.svg)](https:\/\/plotly.com\/graphing-libraries\/)\n\nQuick Reference\n\n- [Getting Started](https:\/\/plotly.com\/javascript\/getting-started)\n- [Is Plotly Free?](https:\/\/plotly.com\/javascript\/is-plotly-free)\n- [Figure Reference](https:\/\/plotly.com\/javascript\/reference\/index\/)\n- [Function Reference](https:\/\/plotly.com\/javascript\/plotlyjs-function-reference\/)\n- [Event Reference](https:\/\/plotly.com\/javascript\/plotlyjs-events)\n- [Configuration Options](https:\/\/plotly.com\/javascript\/configuration-options\/)\n- [GitHub](https:\/\/github.com\/plotly\/plotly.js\/)\n- [community.plotly.com](http:\/\/community.plotly.com\/)\n\nExamples\n\n- [Fundamentals](https:\/\/plotly.com\/javascript\/plotly-fundamentals\/)\n- [Basic Charts](https:\/\/plotly.com\/javascript\/basic-charts\/)\n- [Statistical Charts](https:\/\/plotly.com\/javascript\/statistical-charts\/)\n- [Scientific Charts](https:\/\/plotly.com\/javascript\/scientific-charts\/)\n- [Financial Charts](https:\/\/plotly.com\/javascript\/financial-charts\/)\n- [Maps](https:\/\/plotly.com\/javascript\/maps\/)\n- [3D Charts](https:\/\/plotly.com\/javascript\/3d-charts\/)\n- [Subplots](https:\/\/plotly.com\/javascript\/subplot-charts\/)\n- [Chart Events](https:\/\/plotly.com\/javascript\/#chart-events)\n- [Animations](https:\/\/plotly.com\/javascript\/#animations)\n\n[![Sign up for the upcoming webinar: Getting Started with Plotly Studio](https:\/\/images.prismic.io\/plotly-marketing-website-2\/ac1DPpGXnQHGZLKZ_getting-started-with-plotly-studio-april-23.jpg?auto=format,compress)](https:\/\/plotly.com\/getting-started-with-studio\/?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=getting-started-with-plotly-studio-23apr2026&utm_content=sidebar)\n\n# Plotly JavaScript Open Source Graphing Library\nBuilt on top of [d3.js](https:\/\/d3js.org\/) and [stack.gl](https:\/\/github.com\/stackgl), Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.   \nplotly.js is [free and open source](https:\/\/plotly.com\/javascript\/is-plotly-free) and you can [view the source, report issues or contribute on GitHub](https:\/\/github.com\/plotly\/plotly.js).\n\nPlotly Studio: Transform any dataset into an interactive data application in minutes with AI. [Try Plotly Studio now.](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=sidebar)\n\nRead more about plotly.js features\n\nSophisticated chart types\n\n`plotly.js` abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.\n\n[![](https:\/\/images.plot.ly\/plotly-documentation\/images\/turbulence-simulation.jpg)](https:\/\/plotly.com\/~mdtusz\/72.embed)\n```\nd3.json('https:\/\/plotly.com\/~DanielCarrera\/13.json', function(figure){\n                  var trace = {\n                    x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z,\n                    type: 'contour', autocolorscale: false,\n                    colorscale: [[0,\"rgb(  0,  0,  0)\"],[0.3,\"rgb(230,  0,  0)\"],[0.6,\"rgb(255,210,  0)\"],[1,\"rgb(255,255,255)\"]],\n                    reversescale: true, zmax: 2.5, zmin: -2.5\n                  };\n                  var layout = {\n                    title: {\n                      text: 'turbulence simulation'\n                  },\n                    xaxis: {\n                      title: {\n                          text: 'radial direction'\n                      },\n                      showline: true,\n                      mirror: 'allticks',\n                      ticks: 'inside'\n                    },\n                    yaxis: {\n                        title: {\n                            text: 'vertical direction'\n                        },\n                        showline: true,\n                        mirror: 'allticks',\n                        ticks: 'inside'\n                    },\n                    margin: {l: 40, b: 40, t: 60},\n                    annotations: [{\n                      showarrow: false,\n                      text: 'Credit: Daniel Carrera',\n                      x: 0, y: 0, xref: 'paper', yref: 'paper'\n                    }]\n                  }\n                  Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false});\n                });\n```\nFully customizable\n\n`plotly.js` charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.\n\n[view all of the available attributes](https:\/\/plotly.com\/javascript\/reference)\n```\nd3.csv('https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/wind_speed_laurel_nebraska.csv', function(rows){\n                    var trace = {\n                      type: 'scatter',                    \/\/ set the chart type\n                      mode: 'lines',                      \/\/ connect points with lines\n                      x: rows.map(function(row){          \/\/ set the x-data\n                        return row['Time'];\n                      }),\n                      y: rows.map(function(row){          \/\/ set the x-data\n                        return row['10 Min Sampled Avg'];\n                      }),\n                      line: {                             \/\/ set the width of the line.\n                        width: 1\n                      },\n                      error_y: {\n                        array: rows.map(function(row){    \/\/ set the height of the error bars\n                          return row['10 Min Std Dev'];\n                        }),\n                        thickness: 0.5,                   \/\/ set the thickness of the error bars\n                        width: 0\n                      }\n                    };\n\n                    var layout = {\n                      yaxis: {\n                        title: {\n                          text: \"Wind Speed\"\n                        }\n                      },       \/\/ set the y axis title\n                      xaxis: {\n                        showgrid: false,                  \/\/ remove the x-axis grid lines\n                        tickformat: \"%B, %Y\"              \/\/ customize the date format to \"month, day\"\n                      },\n                      margin: {                           \/\/ update the left, bottom, right, top margin\n                        l: 40, b: 10, r: 10, t: 20\n                      }\n                    };\n\n                    Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});\n                });\n```\nHigh performance\n\nMost plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.  \n  \n `plotly.js` uses [stack.gl](http:\/\/stack.gl\/) for high performance 2D and 3D charting.\n\n[![](https:\/\/images.plot.ly\/plotly-documentation\/images\/hue-value-vs.jpg)](https:\/\/plotly.com\/~chris\/17389.embed)\n\nThis chart was drawn with the `plotly.js` chart type `scattergl`. `scattergl` charts render an order of magnitude faster than their SVG counterparts.\n\n[![](https:\/\/images.plot.ly\/plotly-documentation\/images\/surface-plot.jpg)](https:\/\/plotly.com\/~chriddyp\/1780.embed)\n\nAll 3D charts in `plotly.js` are rendered with WebGL, leveraging the power of the GPU for fast interactivity. [view the interactive version](https:\/\/plotly.com\/~chris\/17389.embed)\n\nUniversal\n\nBy abstracting charts to a declarative JSON structure, `plotly.js` is used as a browser-based charting library for [Python](https:\/\/plotly.com\/python\/), [R](https:\/\/plotly.com\/r\/), [MATLAB](https:\/\/plotly.com\/matlab\/).\n\n[Fundamentals](https:\/\/plotly.com\/javascript\/#fundamentals) [More Fundamentals »](https:\/\/plotly.com\/javascript\/plotly-fundamentals)\n\n- [Configuration Options View Tutorial ![Configuration Options](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/modebar-icons.png)](https:\/\/plotly.com\/javascript\/configuration-options\/)\n- [Responsive \/ Fluid Layouts View Tutorial ![Responsive \/ Fluid Layouts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/fluid-layout.gif)](https:\/\/plotly.com\/javascript\/responsive-fluid-layout\/)\n- [uirevision in Plotly.react View Tutorial ![uirevision in Plotly.react](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/uirevision.gif)](https:\/\/plotly.com\/javascript\/uirevision\/)\n- [React Plotly.js View Tutorial ![React Plotly.js](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/react.png)](https:\/\/plotly.com\/javascript\/react\/)\n- [Analytical Apps with Dash View Tutorial ![Analytical Apps with Dash](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/dash_apps.png)](https:\/\/dash.plotly.com\/?\/)\n\n[Basic Charts](https:\/\/plotly.com\/javascript\/#basic-charts) [More Basic Charts »](https:\/\/plotly.com\/javascript\/basic-charts\/)\n\n- [Scatter Plots View Tutorial ![Scatter Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/line-and-scatter.jpg)](https:\/\/plotly.com\/javascript\/line-and-scatter\/)\n- [Line Charts View Tutorial ![Line Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/line-plots.jpg)](https:\/\/plotly.com\/javascript\/line-charts\/)\n- [Bar Charts View Tutorial ![Bar Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/bar.jpg)](https:\/\/plotly.com\/javascript\/bar-charts\/)\n- [Pie Charts View Tutorial ![Pie Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/pie-chart.jpg)](https:\/\/plotly.com\/javascript\/pie-charts\/)\n- [Bubble Charts View Tutorial ![Bubble Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/bubble.jpg)](https:\/\/plotly.com\/javascript\/bubble-charts\/)\n\n[Statistical Charts](https:\/\/plotly.com\/javascript\/#statistical-charts) [More Statistical Charts »](https:\/\/plotly.com\/javascript\/statistical-charts\/)\n\n- [Error Bars View Tutorial ![Error Bars](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/error-bar.jpg)](https:\/\/plotly.com\/javascript\/error-bars\/)\n- [Box Plots View Tutorial ![Box Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/box.jpg)](https:\/\/plotly.com\/javascript\/box-plots\/)\n- [Histograms View Tutorial ![Histograms](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/histogram.jpg)](https:\/\/plotly.com\/javascript\/histograms\/)\n- [2d Density Plots View Tutorial ![2d Density Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/2d-density-plot.jpg)](https:\/\/plotly.com\/javascript\/2d-density-plots\/)\n- [Continuous Error Bars View Tutorial ![Continuous Error Bars](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/error-cont.jpg)](https:\/\/plotly.com\/javascript\/continuous-error-bars\/)\n\n[Scientific Charts](https:\/\/plotly.com\/javascript\/#scientific-charts) [More Scientific Charts »](https:\/\/plotly.com\/javascript\/scientific-charts\/)\n\n- [Contour Plots View Tutorial ![Contour Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/contour.jpg)](https:\/\/plotly.com\/javascript\/contour-plots\/)\n- [Heatmaps View Tutorial ![Heatmaps](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/heatmap.jpg)](https:\/\/plotly.com\/javascript\/heatmaps\/)\n- [Ternary Plots View Tutorial ![Ternary Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/ternary-plot.jpg)](https:\/\/plotly.com\/javascript\/ternary-plots\/)\n- [Parallel Coordinates Plot View Tutorial ![Parallel Coordinates Plot](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/parcoords.jpg)](https:\/\/plotly.com\/javascript\/parallel-coordinates-plot\/)\n- [Log Plots View Tutorial ![Log Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/log.jpg)](https:\/\/plotly.com\/javascript\/log-plot\/)\n\n[Financial Charts](https:\/\/plotly.com\/javascript\/#financial-charts) [More Financial Charts »](https:\/\/plotly.com\/javascript\/financial-charts\/)\n\n- [Waterfall Charts View Tutorial ![Waterfall Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/waterfall-charts.jpg)](https:\/\/plotly.com\/javascript\/waterfall-charts\/)\n- [Indicators View Tutorial ![Indicators](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/indicator.jpg)](https:\/\/plotly.com\/javascript\/indicator\/)\n- [Candlestick Charts View Tutorial ![Candlestick Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/candlestick.jpg)](https:\/\/plotly.com\/javascript\/candlestick-charts\/)\n- [Funnel and Funnelarea Charts View Tutorial ![Funnel and Funnelarea Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/funnel.jpg)](https:\/\/plotly.com\/javascript\/funnel-charts\/)\n- [Time Series View Tutorial ![Time Series](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/time-series.jpg)](https:\/\/plotly.com\/javascript\/time-series\/)\n\n[Maps](https:\/\/plotly.com\/javascript\/#maps) [More Maps »](https:\/\/plotly.com\/javascript\/maps\/)\n\n- [Migrate to Maplibre View Tutorial ![Migrate to Maplibre](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/area.jpg)](https:\/\/plotly.com\/javascript\/maplibre-migration\/)\n- [Tile Map Layers View Tutorial ![Tile Map Layers](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-layers.png)](https:\/\/plotly.com\/javascript\/tile-map-layers\/)\n- [Tile Density Heatmap View Tutorial ![Tile Density Heatmap](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-density.png)](https:\/\/plotly.com\/javascript\/tile-density-heatmaps\/)\n- [Choropleth Tile Map View Tutorial ![Choropleth Tile Map](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-choropleth.png)](https:\/\/plotly.com\/javascript\/tile-county-choropleth\/)\n- [Lines on Maps View Tutorial ![Lines on Maps](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/flight-paths.jpg)](https:\/\/plotly.com\/javascript\/lines-on-maps\/)\n\n[3D Charts](https:\/\/plotly.com\/javascript\/#3d-charts) [More 3D Charts »](https:\/\/plotly.com\/javascript\/3d-charts\/)\n\n- [3D Scatter Plots View Tutorial ![3D Scatter Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-scatter.jpg)](https:\/\/plotly.com\/javascript\/3d-scatter-plots\/)\n- [Ribbon Plots View Tutorial ![Ribbon Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/ribbon-plot.jpg)](https:\/\/plotly.com\/javascript\/ribbon-plots\/)\n- [3D Surface Plots View Tutorial ![3D Surface Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-surface.jpg)](https:\/\/plotly.com\/javascript\/3d-surface-plots\/)\n- [3D Mesh Plots View Tutorial ![3D Mesh Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-mesh.jpg)](https:\/\/plotly.com\/javascript\/3d-mesh\/)\n- [3D Line Plots View Tutorial ![3D Line Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-line.jpg)](https:\/\/plotly.com\/javascript\/3d-line-plots\/)\n\n[Subplots](https:\/\/plotly.com\/javascript\/#subplot-charts) [More Subplots »](https:\/\/plotly.com\/javascript\/subplot-charts\/)\n\n- [Subplots View Tutorial ![Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/subplots.jpg)](https:\/\/plotly.com\/javascript\/subplots\/)\n- [Inset Plots View Tutorial ![Inset Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/insets.jpg)](https:\/\/plotly.com\/javascript\/insets\/)\n- [3D Subplots View Tutorial ![3D Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-subplots.jpg)](https:\/\/plotly.com\/javascript\/3d-subplots\/)\n- [Mixed Subplots View Tutorial ![Mixed Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mixed_subplot.JPG)](https:\/\/plotly.com\/javascript\/mixed-subplots\/)\n- [Table Subplots View Tutorial ![Table Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/table_subplots.jpg)](https:\/\/plotly.com\/javascript\/table-subplots\/)\n\n[Custom Chart Events](https:\/\/plotly.com\/javascript\/#custom-chart-events)\n\n- [Click Events View Tutorial ![Click Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/click.jpg)](https:\/\/plotly.com\/javascript\/click-events\/)\n- [Hover Events View Tutorial ![Hover Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/hover.jpg)](https:\/\/plotly.com\/javascript\/hover-events\/)\n- [Zoom Events View Tutorial ![Zoom Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/zoom.jpg)](https:\/\/plotly.com\/javascript\/zoom-events\/)\n- [Disable Zoom Events View Tutorial ![Disable Zoom Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/zoom.jpg)](https:\/\/plotly.com\/javascript\/disable-zoom\/)\n\n[Add Custom Controls](https:\/\/plotly.com\/javascript\/#controls) [More Controls »](https:\/\/plotly.com\/javascript\/controls\/)\n\n- [Dropdown Events View Tutorial ![Dropdown Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/dropdown.jpg)](https:\/\/plotly.com\/javascript\/dropdowns\/)\n- [Button Events View Tutorial ![Button Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/custom-buttons.jpg)](https:\/\/plotly.com\/javascript\/custom-buttons\/)\n- [Slider Events View Tutorial ![Slider Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/slider-component.jpg)](https:\/\/plotly.com\/javascript\/sliders\/)\n- [Lasso Selection View Tutorial ![Lasso Selection](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/lasso.jpg)](https:\/\/plotly.com\/javascript\/lasso-selection\/)\n- [Range Slider and Selector View Tutorial ![Range Slider and Selector](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/sliders.jpg)](https:\/\/plotly.com\/javascript\/range-slider\/)\n\n[Animations](https:\/\/plotly.com\/javascript\/#animations)\n\n- [Animations View Tutorial ![Animations](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/animations.gif)](https:\/\/plotly.com\/javascript\/animations\/)\n- [Adding Sliders to Animations View Tutorial ![Adding Sliders to Animations](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/gapminder_animation.gif)](https:\/\/plotly.com\/javascript\/gapminder-example\/)\n- [Filled-Area Animation View Tutorial ![Filled-Area Animation](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/apple_stock_animation.gif)](https:\/\/plotly.com\/javascript\/filled-area-animation\/)\n- [Map Animation View Tutorial ![Map Animation](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/map-animation.gif)](https:\/\/plotly.com\/javascript\/map-animations\/)\n\n[![](https:\/\/plotly.com\/all_static\/images\/plotly-studio.png)](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_content=javascript_footer)\n\n- ###### JOIN OUR MAILING LIST\n  - Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more\\!\n    [Subscribe](https:\/\/plotly.com\/newsletter\/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n- ###### Products\n  - [Plotly Studio](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=footer)\n  - [Plotly Cloud](https:\/\/plotly.com\/cloud?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=footer)\n  - [Dash Enterprise](https:\/\/plotly.com\/dash\/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n  - [New Releases →](https:\/\/plotly.com\/whats-new\/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n- ###### Pricing\n  - [Studio and Cloud Pricing](https:\/\/plotly.com\/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n  - [Dash Enterprise Pricing](https:\/\/plotly.com\/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n- ###### About Us\n  - [Careers](https:\/\/plotly.com\/careers?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n  - [Resources](https:\/\/plotly.com\/resources\/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n  - [Blog](https:\/\/plotly.com\/blog\/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer)\n- ###### Support\n  - [Community Support](https:\/\/community.plot.ly\/)\n  - [Documentation](https:\/\/plotly.com\/graphing-libraries)\n\nCopyright © 2026 Plotly. All rights reserved.\n\n[Terms of Service](https:\/\/community.plotly.com\/tos)\n\n[Privacy Policy](https:\/\/plotly.com\/privacy\/)\n\n×","attrs_readable_markdown":"Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. [Try Plotly Studio now.](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=sidebar)\n\nRead more about plotly.js features\n\nSophisticated chart types\n\n`plotly.js` abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.\n\n[![](https:\/\/images.plot.ly\/plotly-documentation\/images\/turbulence-simulation.jpg)](https:\/\/plotly.com\/~mdtusz\/72.embed)\n```\nd3.json('https:\/\/plotly.com\/~DanielCarrera\/13.json', function(figure){\n                  var trace = {\n                    x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z,\n                    type: 'contour', autocolorscale: false,\n                    colorscale: [[0,\"rgb(  0,  0,  0)\"],[0.3,\"rgb(230,  0,  0)\"],[0.6,\"rgb(255,210,  0)\"],[1,\"rgb(255,255,255)\"]],\n                    reversescale: true, zmax: 2.5, zmin: -2.5\n                  };\n                  var layout = {\n                    title: {\n                      text: 'turbulence simulation'\n                  },\n                    xaxis: {\n                      title: {\n                          text: 'radial direction'\n                      },\n                      showline: true,\n                      mirror: 'allticks',\n                      ticks: 'inside'\n                    },\n                    yaxis: {\n                        title: {\n                            text: 'vertical direction'\n                        },\n                        showline: true,\n                        mirror: 'allticks',\n                        ticks: 'inside'\n                    },\n                    margin: {l: 40, b: 40, t: 60},\n                    annotations: [{\n                      showarrow: false,\n                      text: 'Credit: Daniel Carrera',\n                      x: 0, y: 0, xref: 'paper', yref: 'paper'\n                    }]\n                  }\n                  Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false});\n                });\n```\nFully customizable\n\n`plotly.js` charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.\n```\nd3.csv('https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/wind_speed_laurel_nebraska.csv', function(rows){\n                    var trace = {\n                      type: 'scatter',                    \/\/ set the chart type\n                      mode: 'lines',                      \/\/ connect points with lines\n                      x: rows.map(function(row){          \/\/ set the x-data\n                        return row['Time'];\n                      }),\n                      y: rows.map(function(row){          \/\/ set the x-data\n                        return row['10 Min Sampled Avg'];\n                      }),\n                      line: {                             \/\/ set the width of the line.\n                        width: 1\n                      },\n                      error_y: {\n                        array: rows.map(function(row){    \/\/ set the height of the error bars\n                          return row['10 Min Std Dev'];\n                        }),\n                        thickness: 0.5,                   \/\/ set the thickness of the error bars\n                        width: 0\n                      }\n                    };\n\n                    var layout = {\n                      yaxis: {\n                        title: {\n                          text: \"Wind Speed\"\n                        }\n                      },       \/\/ set the y axis title\n                      xaxis: {\n                        showgrid: false,                  \/\/ remove the x-axis grid lines\n                        tickformat: \"%B, %Y\"              \/\/ customize the date format to \"month, day\"\n                      },\n                      margin: {                           \/\/ update the left, bottom, right, top margin\n                        l: 40, b: 10, r: 10, t: 20\n                      }\n                    };\n\n                    Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});\n                });\n```\nHigh performance\n\n[![](https:\/\/images.plot.ly\/plotly-documentation\/images\/hue-value-vs.jpg)](https:\/\/plotly.com\/~chris\/17389.embed)\n\nThis chart was drawn with the `plotly.js` chart type `scattergl`. `scattergl` charts render an order of magnitude faster than their SVG counterparts.\n\nUniversal\n\nBy abstracting charts to a declarative JSON structure, `plotly.js` is used as a browser-based charting library for [Python](https:\/\/plotly.com\/python\/), [R](https:\/\/plotly.com\/r\/), [MATLAB](https:\/\/plotly.com\/matlab\/).\n\n- [Configuration Options View Tutorial ![Configuration Options](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/modebar-icons.png)](https:\/\/plotly.com\/javascript\/configuration-options\/)\n- [Responsive \/ Fluid Layouts View Tutorial ![Responsive \/ Fluid Layouts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/fluid-layout.gif)](https:\/\/plotly.com\/javascript\/responsive-fluid-layout\/)\n- [uirevision in Plotly.react View Tutorial ![uirevision in Plotly.react](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/uirevision.gif)](https:\/\/plotly.com\/javascript\/uirevision\/)\n- [React Plotly.js View Tutorial ![React Plotly.js](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/react.png)](https:\/\/plotly.com\/javascript\/react\/)\n- [Analytical Apps with Dash View Tutorial ![Analytical Apps with Dash](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/dash_apps.png)](https:\/\/dash.plotly.com\/?\/)\n\n- [Scatter Plots View Tutorial ![Scatter Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/line-and-scatter.jpg)](https:\/\/plotly.com\/javascript\/line-and-scatter\/)\n- [Line Charts View Tutorial ![Line Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/line-plots.jpg)](https:\/\/plotly.com\/javascript\/line-charts\/)\n- [Bar Charts View Tutorial ![Bar Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/bar.jpg)](https:\/\/plotly.com\/javascript\/bar-charts\/)\n- [Pie Charts View Tutorial ![Pie Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/pie-chart.jpg)](https:\/\/plotly.com\/javascript\/pie-charts\/)\n- [Bubble Charts View Tutorial ![Bubble Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/bubble.jpg)](https:\/\/plotly.com\/javascript\/bubble-charts\/)\n\n- [Error Bars View Tutorial ![Error Bars](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/error-bar.jpg)](https:\/\/plotly.com\/javascript\/error-bars\/)\n- [Box Plots View Tutorial ![Box Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/box.jpg)](https:\/\/plotly.com\/javascript\/box-plots\/)\n- [Histograms View Tutorial ![Histograms](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/histogram.jpg)](https:\/\/plotly.com\/javascript\/histograms\/)\n- [2d Density Plots View Tutorial ![2d Density Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/2d-density-plot.jpg)](https:\/\/plotly.com\/javascript\/2d-density-plots\/)\n- [Continuous Error Bars View Tutorial ![Continuous Error Bars](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/error-cont.jpg)](https:\/\/plotly.com\/javascript\/continuous-error-bars\/)\n\n- [Contour Plots View Tutorial ![Contour Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/contour.jpg)](https:\/\/plotly.com\/javascript\/contour-plots\/)\n- [Heatmaps View Tutorial ![Heatmaps](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/heatmap.jpg)](https:\/\/plotly.com\/javascript\/heatmaps\/)\n- [Ternary Plots View Tutorial ![Ternary Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/ternary-plot.jpg)](https:\/\/plotly.com\/javascript\/ternary-plots\/)\n- [Parallel Coordinates Plot View Tutorial ![Parallel Coordinates Plot](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/parcoords.jpg)](https:\/\/plotly.com\/javascript\/parallel-coordinates-plot\/)\n- [Log Plots View Tutorial ![Log Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/log.jpg)](https:\/\/plotly.com\/javascript\/log-plot\/)\n\n- [Waterfall Charts View Tutorial ![Waterfall Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/waterfall-charts.jpg)](https:\/\/plotly.com\/javascript\/waterfall-charts\/)\n- [Indicators View Tutorial ![Indicators](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/indicator.jpg)](https:\/\/plotly.com\/javascript\/indicator\/)\n- [Candlestick Charts View Tutorial ![Candlestick Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/candlestick.jpg)](https:\/\/plotly.com\/javascript\/candlestick-charts\/)\n- [Funnel and Funnelarea Charts View Tutorial ![Funnel and Funnelarea Charts](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/funnel.jpg)](https:\/\/plotly.com\/javascript\/funnel-charts\/)\n- [Time Series View Tutorial ![Time Series](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/time-series.jpg)](https:\/\/plotly.com\/javascript\/time-series\/)\n\n- [Migrate to Maplibre View Tutorial ![Migrate to Maplibre](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/area.jpg)](https:\/\/plotly.com\/javascript\/maplibre-migration\/)\n- [Tile Map Layers View Tutorial ![Tile Map Layers](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-layers.png)](https:\/\/plotly.com\/javascript\/tile-map-layers\/)\n- [Tile Density Heatmap View Tutorial ![Tile Density Heatmap](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-density.png)](https:\/\/plotly.com\/javascript\/tile-density-heatmaps\/)\n- [Choropleth Tile Map View Tutorial ![Choropleth Tile Map](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mapbox-choropleth.png)](https:\/\/plotly.com\/javascript\/tile-county-choropleth\/)\n- [Lines on Maps View Tutorial ![Lines on Maps](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/flight-paths.jpg)](https:\/\/plotly.com\/javascript\/lines-on-maps\/)\n\n- [3D Scatter Plots View Tutorial ![3D Scatter Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-scatter.jpg)](https:\/\/plotly.com\/javascript\/3d-scatter-plots\/)\n- [Ribbon Plots View Tutorial ![Ribbon Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/ribbon-plot.jpg)](https:\/\/plotly.com\/javascript\/ribbon-plots\/)\n- [3D Surface Plots View Tutorial ![3D Surface Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-surface.jpg)](https:\/\/plotly.com\/javascript\/3d-surface-plots\/)\n- [3D Mesh Plots View Tutorial ![3D Mesh Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-mesh.jpg)](https:\/\/plotly.com\/javascript\/3d-mesh\/)\n- [3D Line Plots View Tutorial ![3D Line Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-line.jpg)](https:\/\/plotly.com\/javascript\/3d-line-plots\/)\n\n- [Subplots View Tutorial ![Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/subplots.jpg)](https:\/\/plotly.com\/javascript\/subplots\/)\n- [Inset Plots View Tutorial ![Inset Plots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/insets.jpg)](https:\/\/plotly.com\/javascript\/insets\/)\n- [3D Subplots View Tutorial ![3D Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/3d-subplots.jpg)](https:\/\/plotly.com\/javascript\/3d-subplots\/)\n- [Mixed Subplots View Tutorial ![Mixed Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/mixed_subplot.JPG)](https:\/\/plotly.com\/javascript\/mixed-subplots\/)\n- [Table Subplots View Tutorial ![Table Subplots](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/table_subplots.jpg)](https:\/\/plotly.com\/javascript\/table-subplots\/)\n\n- [Click Events View Tutorial ![Click Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/click.jpg)](https:\/\/plotly.com\/javascript\/click-events\/)\n- [Hover Events View Tutorial ![Hover Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/hover.jpg)](https:\/\/plotly.com\/javascript\/hover-events\/)\n- [Zoom Events View Tutorial ![Zoom Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/zoom.jpg)](https:\/\/plotly.com\/javascript\/zoom-events\/)\n- [Disable Zoom Events View Tutorial ![Disable Zoom Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/zoom.jpg)](https:\/\/plotly.com\/javascript\/disable-zoom\/)\n\n- [Dropdown Events View Tutorial ![Dropdown Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/dropdown.jpg)](https:\/\/plotly.com\/javascript\/dropdowns\/)\n- [Button Events View Tutorial ![Button Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/custom-buttons.jpg)](https:\/\/plotly.com\/javascript\/custom-buttons\/)\n- [Slider Events View Tutorial ![Slider Events](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/slider-component.jpg)](https:\/\/plotly.com\/javascript\/sliders\/)\n- [Lasso Selection View Tutorial ![Lasso Selection](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/lasso.jpg)](https:\/\/plotly.com\/javascript\/lasso-selection\/)\n- [Range Slider and Selector View Tutorial ![Range Slider and Selector](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/sliders.jpg)](https:\/\/plotly.com\/javascript\/range-slider\/)\n\n- [Animations View Tutorial ![Animations](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/animations.gif)](https:\/\/plotly.com\/javascript\/animations\/)\n- [Adding Sliders to Animations View Tutorial ![Adding Sliders to Animations](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/gapminder_animation.gif)](https:\/\/plotly.com\/javascript\/gapminder-example\/)\n- [Filled-Area Animation View Tutorial ![Filled-Area Animation](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/apple_stock_animation.gif)](https:\/\/plotly.com\/javascript\/filled-area-animation\/)\n- [Map Animation View Tutorial ![Map Animation](https:\/\/images.plot.ly\/plotly-documentation\/thumbnail\/map-animation.gif)](https:\/\/plotly.com\/javascript\/map-animations\/)\n\n[![](https:\/\/plotly.com\/all_static\/images\/plotly-studio.png)](https:\/\/plotly.com\/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_content=javascript_footer)","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

5 hours ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://plotly.com/javascript/
Last Crawled	2026-04-17 22:14:35 (5 hours ago)
First Indexed	2020-03-25 20:07:45 (6 years ago)
HTTP Status Code	200
Meta Title	Plotly javascript graphing library in JavaScript
Meta Description	A
Meta Canonical	null
Boilerpipe Text	Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now. Read more about plotly.js features Sophisticated chart types plotly.js abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB. d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){ var trace = { x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]], reversescale: true, zmax: 2.5, zmin: -2.5 }; var layout = { title: { text: 'turbulence simulation' }, xaxis: { title: { text: 'radial direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, yaxis: { title: { text: 'vertical direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, margin: {l: 40, b: 40, t: 60}, annotations: [{ showarrow: false, text: 'Credit: Daniel Carrera ', x: 0, y: 0, xref: 'paper', yref: 'paper' }] } Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false}); }); Fully customizable plotly.js charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes. d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){ var trace = { type: 'scatter', // set the chart type mode: 'lines', // connect points with lines x: rows.map(function(row){ // set the x-data return row['Time']; }), y: rows.map(function(row){ // set the x-data return row['10 Min Sampled Avg']; }), line: { // set the width of the line. width: 1 }, error_y: { array: rows.map(function(row){ // set the height of the error bars return row['10 Min Std Dev']; }), thickness: 0.5, // set the thickness of the error bars width: 0 } }; var layout = { yaxis: { title: { text: "Wind Speed" } }, // set the y axis title xaxis: { showgrid: false, // remove the x-axis grid lines tickformat: "%B, %Y" // customize the date format to "month, day" }, margin: { // update the left, bottom, right, top margin l: 40, b: 10, r: 10, t: 20 } }; Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false}); }); High performance This chart was drawn with the plotly.js chart type scattergl . scattergl charts render an order of magnitude faster than their SVG counterparts. Universal By abstracting charts to a declarative JSON structure, plotly.js is used as a browser-based charting library for Python , R , MATLAB . Configuration Options View Tutorial Responsive / Fluid Layouts View Tutorial uirevision in Plotly.react View Tutorial React Plotly.js View Tutorial Analytical Apps with Dash View Tutorial Scatter Plots View Tutorial Line Charts View Tutorial Bar Charts View Tutorial Pie Charts View Tutorial Bubble Charts View Tutorial Error Bars View Tutorial Box Plots View Tutorial Histograms View Tutorial 2d Density Plots View Tutorial Continuous Error Bars View Tutorial Contour Plots View Tutorial Heatmaps View Tutorial Ternary Plots View Tutorial Parallel Coordinates Plot View Tutorial Log Plots View Tutorial Waterfall Charts View Tutorial Indicators View Tutorial Candlestick Charts View Tutorial Funnel and Funnelarea Charts View Tutorial Time Series View Tutorial Migrate to Maplibre View Tutorial Tile Map Layers View Tutorial Tile Density Heatmap View Tutorial Choropleth Tile Map View Tutorial Lines on Maps View Tutorial 3D Scatter Plots View Tutorial Ribbon Plots View Tutorial 3D Surface Plots View Tutorial 3D Mesh Plots View Tutorial 3D Line Plots View Tutorial Subplots View Tutorial Inset Plots View Tutorial 3D Subplots View Tutorial Mixed Subplots View Tutorial Table Subplots View Tutorial Click Events View Tutorial Hover Events View Tutorial Zoom Events View Tutorial Disable Zoom Events View Tutorial Dropdown Events View Tutorial Button Events View Tutorial Slider Events View Tutorial Lasso Selection View Tutorial Range Slider and Selector View Tutorial Animations View Tutorial Adding Sliders to Animations View Tutorial Filled-Area Animation View Tutorial Map Animation View Tutorial
Markdown	- [Download Studio](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=header) - [Studio and Cloud Pricing](https://plotly.com/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header) - [Dash Enterprise Pricing](https://plotly.com/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header) [![](https://plotly.com/all_static/images/graphing_library_dark.svg)](https://plotly.com/) [![](https://plotly.com/all_static/images/graphing_library.svg)](https://plotly.com/graphing-libraries/) - [Javascript (v3.4.0)]() - [Python (v6.6.0)](https://plotly.com/python/) - [R](https://plotly.com/r/) - [Julia](https://plotly.com/julia/) - [Javascript (v3.4.0)](https://plotly.com/javascript/) - [ggplot2](https://plotly.com/ggplot2/) - [MATLAB](https://plotly.com/matlab/) - [F\#](https://plotly.com/fsharp/) - [Download Studio](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=header) - [Studio and Cloud Pricing](https://plotly.com/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header) - [Dash Enterprise Pricing](https://plotly.com/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=header) [![](https://plotly.com/all_static/images/graphing_library.svg)](https://plotly.com/graphing-libraries/) Quick Reference - [Getting Started](https://plotly.com/javascript/getting-started) - [Is Plotly Free?](https://plotly.com/javascript/is-plotly-free) - [Figure Reference](https://plotly.com/javascript/reference/index/) - [Function Reference](https://plotly.com/javascript/plotlyjs-function-reference/) - [Event Reference](https://plotly.com/javascript/plotlyjs-events) - [Configuration Options](https://plotly.com/javascript/configuration-options/) - [GitHub](https://github.com/plotly/plotly.js/) - [community.plotly.com](http://community.plotly.com/) Examples - [Fundamentals](https://plotly.com/javascript/plotly-fundamentals/) - [Basic Charts](https://plotly.com/javascript/basic-charts/) - [Statistical Charts](https://plotly.com/javascript/statistical-charts/) - [Scientific Charts](https://plotly.com/javascript/scientific-charts/) - [Financial Charts](https://plotly.com/javascript/financial-charts/) - [Maps](https://plotly.com/javascript/maps/) - [3D Charts](https://plotly.com/javascript/3d-charts/) - [Subplots](https://plotly.com/javascript/subplot-charts/) - [Chart Events](https://plotly.com/javascript/#chart-events) - [Animations](https://plotly.com/javascript/#animations) [![Sign up for the upcoming webinar: Getting Started with Plotly Studio](https://images.prismic.io/plotly-marketing-website-2/ac1DPpGXnQHGZLKZ_getting-started-with-plotly-studio-april-23.jpg?auto=format,compress)](https://plotly.com/getting-started-with-studio/?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=getting-started-with-plotly-studio-23apr2026&utm_content=sidebar) # Plotly JavaScript Open Source Graphing Library Built on top of [d3.js](https://d3js.org/) and [stack.gl](https://github.com/stackgl), Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. plotly.js is [free and open source](https://plotly.com/javascript/is-plotly-free) and you can [view the source, report issues or contribute on GitHub](https://github.com/plotly/plotly.js). Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. [Try Plotly Studio now.](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=sidebar) Read more about plotly.js features Sophisticated chart types `plotly.js` abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB. [![](https://images.plot.ly/plotly-documentation/images/turbulence-simulation.jpg)](https://plotly.com/~mdtusz/72.embed) ``` d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){ var trace = { x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]], reversescale: true, zmax: 2.5, zmin: -2.5 }; var layout = { title: { text: 'turbulence simulation' }, xaxis: { title: { text: 'radial direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, yaxis: { title: { text: 'vertical direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, margin: {l: 40, b: 40, t: 60}, annotations: [{ showarrow: false, text: 'Credit: Daniel Carrera', x: 0, y: 0, xref: 'paper', yref: 'paper' }] } Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false}); }); ``` Fully customizable `plotly.js` charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes. [view all of the available attributes](https://plotly.com/javascript/reference) ``` d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){ var trace = { type: 'scatter', // set the chart type mode: 'lines', // connect points with lines x: rows.map(function(row){ // set the x-data return row['Time']; }), y: rows.map(function(row){ // set the x-data return row['10 Min Sampled Avg']; }), line: { // set the width of the line. width: 1 }, error_y: { array: rows.map(function(row){ // set the height of the error bars return row['10 Min Std Dev']; }), thickness: 0.5, // set the thickness of the error bars width: 0 } }; var layout = { yaxis: { title: { text: "Wind Speed" } }, // set the y axis title xaxis: { showgrid: false, // remove the x-axis grid lines tickformat: "%B, %Y" // customize the date format to "month, day" }, margin: { // update the left, bottom, right, top margin l: 40, b: 10, r: 10, t: 20 } }; Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false}); }); ``` High performance Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM. `plotly.js` uses [stack.gl](http://stack.gl/) for high performance 2D and 3D charting. [![](https://images.plot.ly/plotly-documentation/images/hue-value-vs.jpg)](https://plotly.com/~chris/17389.embed) This chart was drawn with the `plotly.js` chart type `scattergl`. `scattergl` charts render an order of magnitude faster than their SVG counterparts. [![](https://images.plot.ly/plotly-documentation/images/surface-plot.jpg)](https://plotly.com/~chriddyp/1780.embed) All 3D charts in `plotly.js` are rendered with WebGL, leveraging the power of the GPU for fast interactivity. [view the interactive version](https://plotly.com/~chris/17389.embed) Universal By abstracting charts to a declarative JSON structure, `plotly.js` is used as a browser-based charting library for [Python](https://plotly.com/python/), [R](https://plotly.com/r/), [MATLAB](https://plotly.com/matlab/). [Fundamentals](https://plotly.com/javascript/#fundamentals) [More Fundamentals »](https://plotly.com/javascript/plotly-fundamentals) - [Configuration Options View Tutorial ![Configuration Options](https://images.plot.ly/plotly-documentation/thumbnail/modebar-icons.png)](https://plotly.com/javascript/configuration-options/) - [Responsive / Fluid Layouts View Tutorial ![Responsive / Fluid Layouts](https://images.plot.ly/plotly-documentation/thumbnail/fluid-layout.gif)](https://plotly.com/javascript/responsive-fluid-layout/) - [uirevision in Plotly.react View Tutorial ![uirevision in Plotly.react](https://images.plot.ly/plotly-documentation/thumbnail/uirevision.gif)](https://plotly.com/javascript/uirevision/) - [React Plotly.js View Tutorial ![React Plotly.js](https://images.plot.ly/plotly-documentation/thumbnail/react.png)](https://plotly.com/javascript/react/) - [Analytical Apps with Dash View Tutorial ![Analytical Apps with Dash](https://images.plot.ly/plotly-documentation/thumbnail/dash_apps.png)](https://dash.plotly.com/?/) [Basic Charts](https://plotly.com/javascript/#basic-charts) [More Basic Charts »](https://plotly.com/javascript/basic-charts/) - [Scatter Plots View Tutorial ![Scatter Plots](https://images.plot.ly/plotly-documentation/thumbnail/line-and-scatter.jpg)](https://plotly.com/javascript/line-and-scatter/) - [Line Charts View Tutorial ![Line Charts](https://images.plot.ly/plotly-documentation/thumbnail/line-plots.jpg)](https://plotly.com/javascript/line-charts/) - [Bar Charts View Tutorial ![Bar Charts](https://images.plot.ly/plotly-documentation/thumbnail/bar.jpg)](https://plotly.com/javascript/bar-charts/) - [Pie Charts View Tutorial ![Pie Charts](https://images.plot.ly/plotly-documentation/thumbnail/pie-chart.jpg)](https://plotly.com/javascript/pie-charts/) - [Bubble Charts View Tutorial ![Bubble Charts](https://images.plot.ly/plotly-documentation/thumbnail/bubble.jpg)](https://plotly.com/javascript/bubble-charts/) [Statistical Charts](https://plotly.com/javascript/#statistical-charts) [More Statistical Charts »](https://plotly.com/javascript/statistical-charts/) - [Error Bars View Tutorial ![Error Bars](https://images.plot.ly/plotly-documentation/thumbnail/error-bar.jpg)](https://plotly.com/javascript/error-bars/) - [Box Plots View Tutorial ![Box Plots](https://images.plot.ly/plotly-documentation/thumbnail/box.jpg)](https://plotly.com/javascript/box-plots/) - [Histograms View Tutorial ![Histograms](https://images.plot.ly/plotly-documentation/thumbnail/histogram.jpg)](https://plotly.com/javascript/histograms/) - [2d Density Plots View Tutorial ![2d Density Plots](https://images.plot.ly/plotly-documentation/thumbnail/2d-density-plot.jpg)](https://plotly.com/javascript/2d-density-plots/) - [Continuous Error Bars View Tutorial ![Continuous Error Bars](https://images.plot.ly/plotly-documentation/thumbnail/error-cont.jpg)](https://plotly.com/javascript/continuous-error-bars/) [Scientific Charts](https://plotly.com/javascript/#scientific-charts) [More Scientific Charts »](https://plotly.com/javascript/scientific-charts/) - [Contour Plots View Tutorial ![Contour Plots](https://images.plot.ly/plotly-documentation/thumbnail/contour.jpg)](https://plotly.com/javascript/contour-plots/) - [Heatmaps View Tutorial ![Heatmaps](https://images.plot.ly/plotly-documentation/thumbnail/heatmap.jpg)](https://plotly.com/javascript/heatmaps/) - [Ternary Plots View Tutorial ![Ternary Plots](https://images.plot.ly/plotly-documentation/thumbnail/ternary-plot.jpg)](https://plotly.com/javascript/ternary-plots/) - [Parallel Coordinates Plot View Tutorial ![Parallel Coordinates Plot](https://images.plot.ly/plotly-documentation/thumbnail/parcoords.jpg)](https://plotly.com/javascript/parallel-coordinates-plot/) - [Log Plots View Tutorial ![Log Plots](https://images.plot.ly/plotly-documentation/thumbnail/log.jpg)](https://plotly.com/javascript/log-plot/) [Financial Charts](https://plotly.com/javascript/#financial-charts) [More Financial Charts »](https://plotly.com/javascript/financial-charts/) - [Waterfall Charts View Tutorial ![Waterfall Charts](https://images.plot.ly/plotly-documentation/thumbnail/waterfall-charts.jpg)](https://plotly.com/javascript/waterfall-charts/) - [Indicators View Tutorial ![Indicators](https://images.plot.ly/plotly-documentation/thumbnail/indicator.jpg)](https://plotly.com/javascript/indicator/) - [Candlestick Charts View Tutorial ![Candlestick Charts](https://images.plot.ly/plotly-documentation/thumbnail/candlestick.jpg)](https://plotly.com/javascript/candlestick-charts/) - [Funnel and Funnelarea Charts View Tutorial ![Funnel and Funnelarea Charts](https://images.plot.ly/plotly-documentation/thumbnail/funnel.jpg)](https://plotly.com/javascript/funnel-charts/) - [Time Series View Tutorial ![Time Series](https://images.plot.ly/plotly-documentation/thumbnail/time-series.jpg)](https://plotly.com/javascript/time-series/) [Maps](https://plotly.com/javascript/#maps) [More Maps »](https://plotly.com/javascript/maps/) - [Migrate to Maplibre View Tutorial ![Migrate to Maplibre](https://images.plot.ly/plotly-documentation/thumbnail/area.jpg)](https://plotly.com/javascript/maplibre-migration/) - [Tile Map Layers View Tutorial ![Tile Map Layers](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-layers.png)](https://plotly.com/javascript/tile-map-layers/) - [Tile Density Heatmap View Tutorial ![Tile Density Heatmap](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-density.png)](https://plotly.com/javascript/tile-density-heatmaps/) - [Choropleth Tile Map View Tutorial ![Choropleth Tile Map](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-choropleth.png)](https://plotly.com/javascript/tile-county-choropleth/) - [Lines on Maps View Tutorial ![Lines on Maps](https://images.plot.ly/plotly-documentation/thumbnail/flight-paths.jpg)](https://plotly.com/javascript/lines-on-maps/) [3D Charts](https://plotly.com/javascript/#3d-charts) [More 3D Charts »](https://plotly.com/javascript/3d-charts/) - [3D Scatter Plots View Tutorial ![3D Scatter Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-scatter.jpg)](https://plotly.com/javascript/3d-scatter-plots/) - [Ribbon Plots View Tutorial ![Ribbon Plots](https://images.plot.ly/plotly-documentation/thumbnail/ribbon-plot.jpg)](https://plotly.com/javascript/ribbon-plots/) - [3D Surface Plots View Tutorial ![3D Surface Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-surface.jpg)](https://plotly.com/javascript/3d-surface-plots/) - [3D Mesh Plots View Tutorial ![3D Mesh Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-mesh.jpg)](https://plotly.com/javascript/3d-mesh/) - [3D Line Plots View Tutorial ![3D Line Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-line.jpg)](https://plotly.com/javascript/3d-line-plots/) [Subplots](https://plotly.com/javascript/#subplot-charts) [More Subplots »](https://plotly.com/javascript/subplot-charts/) - [Subplots View Tutorial ![Subplots](https://images.plot.ly/plotly-documentation/thumbnail/subplots.jpg)](https://plotly.com/javascript/subplots/) - [Inset Plots View Tutorial ![Inset Plots](https://images.plot.ly/plotly-documentation/thumbnail/insets.jpg)](https://plotly.com/javascript/insets/) - [3D Subplots View Tutorial ![3D Subplots](https://images.plot.ly/plotly-documentation/thumbnail/3d-subplots.jpg)](https://plotly.com/javascript/3d-subplots/) - [Mixed Subplots View Tutorial ![Mixed Subplots](https://images.plot.ly/plotly-documentation/thumbnail/mixed_subplot.JPG)](https://plotly.com/javascript/mixed-subplots/) - [Table Subplots View Tutorial ![Table Subplots](https://images.plot.ly/plotly-documentation/thumbnail/table_subplots.jpg)](https://plotly.com/javascript/table-subplots/) [Custom Chart Events](https://plotly.com/javascript/#custom-chart-events) - [Click Events View Tutorial ![Click Events](https://images.plot.ly/plotly-documentation/thumbnail/click.jpg)](https://plotly.com/javascript/click-events/) - [Hover Events View Tutorial ![Hover Events](https://images.plot.ly/plotly-documentation/thumbnail/hover.jpg)](https://plotly.com/javascript/hover-events/) - [Zoom Events View Tutorial ![Zoom Events](https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg)](https://plotly.com/javascript/zoom-events/) - [Disable Zoom Events View Tutorial ![Disable Zoom Events](https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg)](https://plotly.com/javascript/disable-zoom/) [Add Custom Controls](https://plotly.com/javascript/#controls) [More Controls »](https://plotly.com/javascript/controls/) - [Dropdown Events View Tutorial ![Dropdown Events](https://images.plot.ly/plotly-documentation/thumbnail/dropdown.jpg)](https://plotly.com/javascript/dropdowns/) - [Button Events View Tutorial ![Button Events](https://images.plot.ly/plotly-documentation/thumbnail/custom-buttons.jpg)](https://plotly.com/javascript/custom-buttons/) - [Slider Events View Tutorial ![Slider Events](https://images.plot.ly/plotly-documentation/thumbnail/slider-component.jpg)](https://plotly.com/javascript/sliders/) - [Lasso Selection View Tutorial ![Lasso Selection](https://images.plot.ly/plotly-documentation/thumbnail/lasso.jpg)](https://plotly.com/javascript/lasso-selection/) - [Range Slider and Selector View Tutorial ![Range Slider and Selector](https://images.plot.ly/plotly-documentation/thumbnail/sliders.jpg)](https://plotly.com/javascript/range-slider/) [Animations](https://plotly.com/javascript/#animations) - [Animations View Tutorial ![Animations](https://images.plot.ly/plotly-documentation/thumbnail/animations.gif)](https://plotly.com/javascript/animations/) - [Adding Sliders to Animations View Tutorial ![Adding Sliders to Animations](https://images.plot.ly/plotly-documentation/thumbnail/gapminder_animation.gif)](https://plotly.com/javascript/gapminder-example/) - [Filled-Area Animation View Tutorial ![Filled-Area Animation](https://images.plot.ly/plotly-documentation/thumbnail/apple_stock_animation.gif)](https://plotly.com/javascript/filled-area-animation/) - [Map Animation View Tutorial ![Map Animation](https://images.plot.ly/plotly-documentation/thumbnail/map-animation.gif)](https://plotly.com/javascript/map-animations/) [![](https://plotly.com/all_static/images/plotly-studio.png)](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_content=javascript_footer) - ###### JOIN OUR MAILING LIST - Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more\! [Subscribe](https://plotly.com/newsletter/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - ###### Products - [Plotly Studio](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=footer) - [Plotly Cloud](https://plotly.com/cloud?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=footer) - [Dash Enterprise](https://plotly.com/dash/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - [New Releases →](https://plotly.com/whats-new/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - ###### Pricing - [Studio and Cloud Pricing](https://plotly.com/pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - [Dash Enterprise Pricing](https://plotly.com/get-pricing?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - ###### About Us - [Careers](https://plotly.com/careers?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - [Resources](https://plotly.com/resources/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - [Blog](https://plotly.com/blog/?utm_source=graphing_libraries&utm_medium=documentation&utm_content=footer) - ###### Support - [Community Support](https://community.plot.ly/) - [Documentation](https://plotly.com/graphing-libraries) Copyright © 2026 Plotly. All rights reserved. [Terms of Service](https://community.plotly.com/tos) [Privacy Policy](https://plotly.com/privacy/) ×
Readable Markdown	Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. [Try Plotly Studio now.](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_campaign=studio_cloud_community&utm_content=sidebar) Read more about plotly.js features Sophisticated chart types `plotly.js` abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB. [![](https://images.plot.ly/plotly-documentation/images/turbulence-simulation.jpg)](https://plotly.com/~mdtusz/72.embed) ``` d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){ var trace = { x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]], reversescale: true, zmax: 2.5, zmin: -2.5 }; var layout = { title: { text: 'turbulence simulation' }, xaxis: { title: { text: 'radial direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, yaxis: { title: { text: 'vertical direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, margin: {l: 40, b: 40, t: 60}, annotations: [{ showarrow: false, text: 'Credit: Daniel Carrera', x: 0, y: 0, xref: 'paper', yref: 'paper' }] } Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false}); }); ``` Fully customizable `plotly.js` charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes. ``` d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){ var trace = { type: 'scatter', // set the chart type mode: 'lines', // connect points with lines x: rows.map(function(row){ // set the x-data return row['Time']; }), y: rows.map(function(row){ // set the x-data return row['10 Min Sampled Avg']; }), line: { // set the width of the line. width: 1 }, error_y: { array: rows.map(function(row){ // set the height of the error bars return row['10 Min Std Dev']; }), thickness: 0.5, // set the thickness of the error bars width: 0 } }; var layout = { yaxis: { title: { text: "Wind Speed" } }, // set the y axis title xaxis: { showgrid: false, // remove the x-axis grid lines tickformat: "%B, %Y" // customize the date format to "month, day" }, margin: { // update the left, bottom, right, top margin l: 40, b: 10, r: 10, t: 20 } }; Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false}); }); ``` High performance [![](https://images.plot.ly/plotly-documentation/images/hue-value-vs.jpg)](https://plotly.com/~chris/17389.embed) This chart was drawn with the `plotly.js` chart type `scattergl`. `scattergl` charts render an order of magnitude faster than their SVG counterparts. Universal By abstracting charts to a declarative JSON structure, `plotly.js` is used as a browser-based charting library for [Python](https://plotly.com/python/), [R](https://plotly.com/r/), [MATLAB](https://plotly.com/matlab/). - [Configuration Options View Tutorial ![Configuration Options](https://images.plot.ly/plotly-documentation/thumbnail/modebar-icons.png)](https://plotly.com/javascript/configuration-options/) - [Responsive / Fluid Layouts View Tutorial ![Responsive / Fluid Layouts](https://images.plot.ly/plotly-documentation/thumbnail/fluid-layout.gif)](https://plotly.com/javascript/responsive-fluid-layout/) - [uirevision in Plotly.react View Tutorial ![uirevision in Plotly.react](https://images.plot.ly/plotly-documentation/thumbnail/uirevision.gif)](https://plotly.com/javascript/uirevision/) - [React Plotly.js View Tutorial ![React Plotly.js](https://images.plot.ly/plotly-documentation/thumbnail/react.png)](https://plotly.com/javascript/react/) - [Analytical Apps with Dash View Tutorial ![Analytical Apps with Dash](https://images.plot.ly/plotly-documentation/thumbnail/dash_apps.png)](https://dash.plotly.com/?/) - [Scatter Plots View Tutorial ![Scatter Plots](https://images.plot.ly/plotly-documentation/thumbnail/line-and-scatter.jpg)](https://plotly.com/javascript/line-and-scatter/) - [Line Charts View Tutorial ![Line Charts](https://images.plot.ly/plotly-documentation/thumbnail/line-plots.jpg)](https://plotly.com/javascript/line-charts/) - [Bar Charts View Tutorial ![Bar Charts](https://images.plot.ly/plotly-documentation/thumbnail/bar.jpg)](https://plotly.com/javascript/bar-charts/) - [Pie Charts View Tutorial ![Pie Charts](https://images.plot.ly/plotly-documentation/thumbnail/pie-chart.jpg)](https://plotly.com/javascript/pie-charts/) - [Bubble Charts View Tutorial ![Bubble Charts](https://images.plot.ly/plotly-documentation/thumbnail/bubble.jpg)](https://plotly.com/javascript/bubble-charts/) - [Error Bars View Tutorial ![Error Bars](https://images.plot.ly/plotly-documentation/thumbnail/error-bar.jpg)](https://plotly.com/javascript/error-bars/) - [Box Plots View Tutorial ![Box Plots](https://images.plot.ly/plotly-documentation/thumbnail/box.jpg)](https://plotly.com/javascript/box-plots/) - [Histograms View Tutorial ![Histograms](https://images.plot.ly/plotly-documentation/thumbnail/histogram.jpg)](https://plotly.com/javascript/histograms/) - [2d Density Plots View Tutorial ![2d Density Plots](https://images.plot.ly/plotly-documentation/thumbnail/2d-density-plot.jpg)](https://plotly.com/javascript/2d-density-plots/) - [Continuous Error Bars View Tutorial ![Continuous Error Bars](https://images.plot.ly/plotly-documentation/thumbnail/error-cont.jpg)](https://plotly.com/javascript/continuous-error-bars/) - [Contour Plots View Tutorial ![Contour Plots](https://images.plot.ly/plotly-documentation/thumbnail/contour.jpg)](https://plotly.com/javascript/contour-plots/) - [Heatmaps View Tutorial ![Heatmaps](https://images.plot.ly/plotly-documentation/thumbnail/heatmap.jpg)](https://plotly.com/javascript/heatmaps/) - [Ternary Plots View Tutorial ![Ternary Plots](https://images.plot.ly/plotly-documentation/thumbnail/ternary-plot.jpg)](https://plotly.com/javascript/ternary-plots/) - [Parallel Coordinates Plot View Tutorial ![Parallel Coordinates Plot](https://images.plot.ly/plotly-documentation/thumbnail/parcoords.jpg)](https://plotly.com/javascript/parallel-coordinates-plot/) - [Log Plots View Tutorial ![Log Plots](https://images.plot.ly/plotly-documentation/thumbnail/log.jpg)](https://plotly.com/javascript/log-plot/) - [Waterfall Charts View Tutorial ![Waterfall Charts](https://images.plot.ly/plotly-documentation/thumbnail/waterfall-charts.jpg)](https://plotly.com/javascript/waterfall-charts/) - [Indicators View Tutorial ![Indicators](https://images.plot.ly/plotly-documentation/thumbnail/indicator.jpg)](https://plotly.com/javascript/indicator/) - [Candlestick Charts View Tutorial ![Candlestick Charts](https://images.plot.ly/plotly-documentation/thumbnail/candlestick.jpg)](https://plotly.com/javascript/candlestick-charts/) - [Funnel and Funnelarea Charts View Tutorial ![Funnel and Funnelarea Charts](https://images.plot.ly/plotly-documentation/thumbnail/funnel.jpg)](https://plotly.com/javascript/funnel-charts/) - [Time Series View Tutorial ![Time Series](https://images.plot.ly/plotly-documentation/thumbnail/time-series.jpg)](https://plotly.com/javascript/time-series/) - [Migrate to Maplibre View Tutorial ![Migrate to Maplibre](https://images.plot.ly/plotly-documentation/thumbnail/area.jpg)](https://plotly.com/javascript/maplibre-migration/) - [Tile Map Layers View Tutorial ![Tile Map Layers](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-layers.png)](https://plotly.com/javascript/tile-map-layers/) - [Tile Density Heatmap View Tutorial ![Tile Density Heatmap](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-density.png)](https://plotly.com/javascript/tile-density-heatmaps/) - [Choropleth Tile Map View Tutorial ![Choropleth Tile Map](https://images.plot.ly/plotly-documentation/thumbnail/mapbox-choropleth.png)](https://plotly.com/javascript/tile-county-choropleth/) - [Lines on Maps View Tutorial ![Lines on Maps](https://images.plot.ly/plotly-documentation/thumbnail/flight-paths.jpg)](https://plotly.com/javascript/lines-on-maps/) - [3D Scatter Plots View Tutorial ![3D Scatter Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-scatter.jpg)](https://plotly.com/javascript/3d-scatter-plots/) - [Ribbon Plots View Tutorial ![Ribbon Plots](https://images.plot.ly/plotly-documentation/thumbnail/ribbon-plot.jpg)](https://plotly.com/javascript/ribbon-plots/) - [3D Surface Plots View Tutorial ![3D Surface Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-surface.jpg)](https://plotly.com/javascript/3d-surface-plots/) - [3D Mesh Plots View Tutorial ![3D Mesh Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-mesh.jpg)](https://plotly.com/javascript/3d-mesh/) - [3D Line Plots View Tutorial ![3D Line Plots](https://images.plot.ly/plotly-documentation/thumbnail/3d-line.jpg)](https://plotly.com/javascript/3d-line-plots/) - [Subplots View Tutorial ![Subplots](https://images.plot.ly/plotly-documentation/thumbnail/subplots.jpg)](https://plotly.com/javascript/subplots/) - [Inset Plots View Tutorial ![Inset Plots](https://images.plot.ly/plotly-documentation/thumbnail/insets.jpg)](https://plotly.com/javascript/insets/) - [3D Subplots View Tutorial ![3D Subplots](https://images.plot.ly/plotly-documentation/thumbnail/3d-subplots.jpg)](https://plotly.com/javascript/3d-subplots/) - [Mixed Subplots View Tutorial ![Mixed Subplots](https://images.plot.ly/plotly-documentation/thumbnail/mixed_subplot.JPG)](https://plotly.com/javascript/mixed-subplots/) - [Table Subplots View Tutorial ![Table Subplots](https://images.plot.ly/plotly-documentation/thumbnail/table_subplots.jpg)](https://plotly.com/javascript/table-subplots/) - [Click Events View Tutorial ![Click Events](https://images.plot.ly/plotly-documentation/thumbnail/click.jpg)](https://plotly.com/javascript/click-events/) - [Hover Events View Tutorial ![Hover Events](https://images.plot.ly/plotly-documentation/thumbnail/hover.jpg)](https://plotly.com/javascript/hover-events/) - [Zoom Events View Tutorial ![Zoom Events](https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg)](https://plotly.com/javascript/zoom-events/) - [Disable Zoom Events View Tutorial ![Disable Zoom Events](https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg)](https://plotly.com/javascript/disable-zoom/) - [Dropdown Events View Tutorial ![Dropdown Events](https://images.plot.ly/plotly-documentation/thumbnail/dropdown.jpg)](https://plotly.com/javascript/dropdowns/) - [Button Events View Tutorial ![Button Events](https://images.plot.ly/plotly-documentation/thumbnail/custom-buttons.jpg)](https://plotly.com/javascript/custom-buttons/) - [Slider Events View Tutorial ![Slider Events](https://images.plot.ly/plotly-documentation/thumbnail/slider-component.jpg)](https://plotly.com/javascript/sliders/) - [Lasso Selection View Tutorial ![Lasso Selection](https://images.plot.ly/plotly-documentation/thumbnail/lasso.jpg)](https://plotly.com/javascript/lasso-selection/) - [Range Slider and Selector View Tutorial ![Range Slider and Selector](https://images.plot.ly/plotly-documentation/thumbnail/sliders.jpg)](https://plotly.com/javascript/range-slider/) - [Animations View Tutorial ![Animations](https://images.plot.ly/plotly-documentation/thumbnail/animations.gif)](https://plotly.com/javascript/animations/) - [Adding Sliders to Animations View Tutorial ![Adding Sliders to Animations](https://images.plot.ly/plotly-documentation/thumbnail/gapminder_animation.gif)](https://plotly.com/javascript/gapminder-example/) - [Filled-Area Animation View Tutorial ![Filled-Area Animation](https://images.plot.ly/plotly-documentation/thumbnail/apple_stock_animation.gif)](https://plotly.com/javascript/filled-area-animation/) - [Map Animation View Tutorial ![Map Animation](https://images.plot.ly/plotly-documentation/thumbnail/map-animation.gif)](https://plotly.com/javascript/map-animations/) [![](https://plotly.com/all_static/images/plotly-studio.png)](https://plotly.com/studio?utm_source=graphing_libraries&utm_medium=documentation&utm_content=javascript_footer)
Shard	165 (laksa)
Root Hash	13020579380339811765
Unparsed URL	com,plotly!/javascript/ s443