Prev Next

JavaScript Plotly

Plotly is a JavaScript library for creating interactive, high-quality data visualizations. It supports various chart types, including line, bar, pie, scatter plots, and maps, and provides seamless interactivity for exploring data.

Key Topics

Getting Started with Plotly

To use Plotly, include its library in your HTML file or install it via npm for a Node.js environment:

  • CDN: Add the Plotly script in your HTML file: 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  • NPM: Install Plotly using npm: npm install plotly.js-dist.

Creating Charts

Plotly charts are created using data and layout objects. The Plotly.newPlot function renders the chart on a specified HTML element.

<div id="myPlot" style="width: 100%; height: 400px;"></div>
<script>
    const data = [
        {
            x: [1, 2, 3, 4],
            y: [10, 15, 13, 17],
            type: 'scatter'
        }
    ];

    Plotly.newPlot('myPlot', data);
</script>

Explanation: This example creates a simple scatter plot with x and y data points and renders it in the myPlot div.

Customizing Charts

Charts can be customized by modifying the layout object, which defines titles, axis labels, grid lines, and more.

<div id="customPlot" style="width: 100%; height: 400px;"></div>
<script>
    const data = [
        {
            x: [1, 2, 3, 4],
            y: [10, 15, 13, 17],
            type: 'bar',
            marker: { color: 'orange' }
        }
    ];

    const layout = {
        title: 'Custom Bar Chart',
        xaxis: { title: 'X Axis Label' },
        yaxis: { title: 'Y Axis Label' }
    };

    Plotly.newPlot('customPlot', data, layout);
</script>

Explanation: The layout object customizes the chart by adding a title and axis labels. The marker property defines the bar color.

Example: Interactive Line Chart

This example demonstrates an interactive line chart with multiple traces:

<!DOCTYPE html>
<html>
    <head>
        <title>Plotly Line Chart</title>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body>
        <div id="linePlot" style="width: 100%; height: 400px;"></div>
        <script>
            const data = [
                {
                    x: [1, 2, 3, 4],
                    y: [10, 20, 15, 25],
                    mode: 'lines',
                    name: 'Trace 1'
                },
                {
                    x: [1, 2, 3, 4],
                    y: [15, 25, 20, 30],
                    mode: 'lines+markers',
                    name: 'Trace 2'
                }
            ];

            const layout = {
                title: 'Interactive Line Chart',
                xaxis: { title: 'X Values' },
                yaxis: { title: 'Y Values' }
            };

            Plotly.newPlot('linePlot', data, layout);
        </script>
    </body>
</html>

Key Takeaways

  • Interactive Visualizations: Plotly enables interactive, high-quality charts with minimal setup.
  • Customization: Modify chart appearance using data and layout objects.
  • Versatile: Supports various chart types, including scatter, bar, pie, and maps.
  • Ease of Use: Simple APIs make it easy to integrate and create visualizations.
Prev Next