Seyhmus Guler

This page demonstrates various interactive data visualizations created with Plotly.js. Each chart is fully interactive - you can zoom, pan, hover for details, and toggle data series. These examples showcase different types of visualizations commonly used in data science and research.

Converting Python Plotly to JavaScript

If you're familiar with Python Plotly and want to create web-based interactive charts, here's how to convert your Python code to JavaScript Plotly.js:

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(
    x=[1, 2, 3, 4],
    y=[10, 11, 12, 13],
    mode='markers+lines',
    name='My Data'
))

fig.update_layout(
    title='Sample Plot',
    xaxis_title='X Values',
    yaxis_title='Y Values'
)

fig.show()

const data = [{
    x: [1, 2, 3, 4],
    y: [10, 11, 12, 13],
    mode: 'markers+lines',
    name: 'My Data',
    type: 'scatter'
}];

const layout = {
    title: 'Sample Plot',
    xaxis: { title: 'X Values' },
    yaxis: { title: 'Y Values' }
};

Plotly.newPlot('myDiv', data, layout);

Method 2: Extract JSON from Python

You can export your Python plot's configuration as JSON and use it directly in JavaScript:

import plotly.graph_objects as go
import json

# Create your plot
fig = go.Figure(data=go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13]))

# Get the figure as a dictionary
fig_dict = fig.to_dict()

# Extract data and layout for JavaScript
data = fig_dict['data']
layout = fig_dict['layout']

print("JavaScript data:", json.dumps(data, indent=2))
print("JavaScript layout:", json.dumps(layout, indent=2))

Method 3: Export to HTML

Export your Python plot to HTML and extract the JavaScript:

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13]))

# Export to HTML (without including plotly.js)
html_str = fig.to_html(include_plotlyjs=False, div_id="myPlot")

# Or get just the JSON representation
json_str = fig.to_json()
print(json_str)

Key Differences to Remember:

• Import: Python uses import plotly.graph_objects as go, JavaScript uses <script src="plotly.js">
• Data Structure: Python uses objects like go.Scatter(), JavaScript uses plain objects with type: 'scatter'
• Layout Updates: Python uses fig.update_layout(), JavaScript defines layout directly in the object
• Display: Python uses fig.show(), JavaScript uses Plotly.newPlot('div-id', data, layout)

The examples below demonstrate various chart types that you can easily adapt from your Python Plotly code using these methods.

Interactive Scatter Plot

A scatter plot showing the relationship between two variables with interactive features.

Time Series Line Chart

A time series visualization with multiple data series that can be toggled on/off.

Interactive Bar Chart

A bar chart comparing different categories with hover information.

Correlation Heatmap

A heatmap visualization showing correlations between different variables.