Plot 3D plots using plotly

Question

I am using Flask framework and javascript & HTML for front end . I want 3D plots inside my HTML (offline, ie I dont want to display at plotly website) . When I Do using the following code , I get loose my third axis , ie the graph that I am able to display in HTML is no longer 3D, But a 2D . Can someone please tell me how can I get 3D graph .

I have gone through documnetation of plotly but couldnot find out solution

client side

<script type="text/javascript">
    var graphs = {{graphJSON | safe}};

        Plotly.plot("section", // the ID of the div, created above
                    graphs.data,
                    graphs.layout || {});

</script>

server side

@app.route('/', methods=['POST'])
def my_form_post():

x, y, z = np.random.multivariate_normal(np.array([0,0,0]), np.eye(3), 200).transpose()
trace1 = go.Scatter3d(
    x=x,
    y=y,
    z=z,
    mode='markers',
    marker=dict(
        size=12,
        line=dict(
            color='rgba(217, 217, 217, 0.14)',
            width=0.5
        ),
        opacity=0.8
    )
)

x2, y2, z2 = np.random.multivariate_normal(np.array([0,0,0]), np.eye(3), 200).transpose()
trace2 = go.Scatter3d(
    x=x2,
    y=y2,
    z=z2,
    mode='markers',
    marker=dict(
        color='rgb(127, 127, 127)',
        size=12,
        symbol='circle',
        line=dict(
            color='rgb(204, 204, 204)',
            width=1
        ),
        opacity=0.9
    )
)
data = [trace1, trace2]
layout = go.Layout(
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0
    )
)
fig = go.Figure(data=data, layout=layout)
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

return render_template('layout/index.html',
                       graphJSON=graphJSON)

Code to embedd html file

<script>
$(function(){ $("#div_id_where_i_want_to_embedd").load("url_of_test.html"); 
});
</script>

Sam · Accepted Answer · 2016-03-30 17:59:31Z

This is what I do to convert Python plotly graph to an HTML file. First, build your figures using dicts instead of the Plotly graphic objects library:

import numpy as np
x, y, z = np.random.multivariate_normal(np.array([0,0,0]), np.eye(3), 200).transpose()
trace1 = dict(
    type = 'scatter3d',
    x=x,
    y=y,
    z=z,
    mode='markers',
    marker=dict(
        size=12,
        line=dict(
            color='rgba(217, 217, 217, 0.14)',
            width=0.5
        ),
        opacity=0.8
    )
)
layout = dict(
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0
    )
)
fig = dict(data = [trace1], layout = layout)

Now, here is a function I wrote to get the plotly javascript into an html file:

import sys
import os
from plotly import session, tools, utils
import uuid
import json

def get_plotlyjs():
    path = os.path.join('offline', 'plotly.min.js')
    plotlyjs = resource_string('plotly', path).decode('utf-8')
    return plotlyjs


def js_convert(figure_or_data,outfilename, show_link=False, link_text='Export to plot.ly',
          validate=True):

    figure = tools.return_figure_from_figure_or_data(figure_or_data, validate)

    width = figure.get('layout', {}).get('width', '100%')
    height = figure.get('layout', {}).get('height', 525)
    try:
        float(width)
    except (ValueError, TypeError):
        pass
    else:
        width = str(width) + 'px'

    try:
        float(width)
    except (ValueError, TypeError):
        pass
    else:
        width = str(width) + 'px'

    plotdivid = uuid.uuid4()
    jdata = json.dumps(figure.get('data', []), cls=utils.PlotlyJSONEncoder)
    jlayout = json.dumps(figure.get('layout', {}), cls=utils.PlotlyJSONEncoder)

    config = {}
    config['showLink'] = show_link
    config['linkText'] = link_text
    config["displaylogo"]=False
    config["modeBarButtonsToRemove"]= ['sendDataToCloud']
    jconfig = json.dumps(config)

    plotly_platform_url = session.get_session_config().get('plotly_domain',
                                                           'https://plot.ly')
    if (plotly_platform_url != 'https://plot.ly' and
            link_text == 'Export to plot.ly'):

        link_domain = plotly_platform_url\
            .replace('https://', '')\
            .replace('http://', '')
        link_text = link_text.replace('plot.ly', link_domain)


    script = '\n'.join([
        'Plotly.plot("{id}", {data}, {layout}, {config}).then(function() {{',
        '    $(".{id}.loading").remove();',
        '}})'
    ]).format(id=plotdivid,
              data=jdata,
              layout=jlayout,
              config=jconfig)

    html="""<div class="{id} loading" style="color: rgb(50,50,50);">
                 Drawing...</div>
                 <div id="{id}" style="height: {height}; width: {width};" 
                 class="plotly-graph-div">
                 </div>
                 <script type="text/javascript">
                 {script}
                 </script>
                 """.format(id=plotdivid, script=script,
                           height=height, width=width)

    #html =  html.replace('\n', '')
    with open(outfilename, 'wb') as out:
        out.write(r'<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>')
        for line in html.split('\n'):
            out.write(line)

        out.close()
    print ('JS Conversion Complete')

Call the function as such:

js_convert(fig, 'test.html')

yields:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script><div class="e64ff355-dc9b-4590-b73f-7205bab419e4 loading" style="color: rgb(50,50,50);">				 Drawing...</div>				 <div id="e64ff355-dc9b-4590-b73f-7205bab419e4" style="height: 525; width: 100%;" 				 class="plotly-graph-div">				 </div>				 <script type="text/javascript">				 Plotly.plot("e64ff355-dc9b-4590-b73f-7205bab419e4", [{"y": [0.36148484439726264, 1.6045981780799277, 0.5507855248785238, 0.18167000155375446, -0.5830103342058794, -1.2558535605522596, -0.08340659329309585, 0.450050138741226, -0.18235947469661468, 0.43578829670291425, -0.34179657723027246, -1.1885547789442408, 1.1711835640698656, -1.9747040430544132, 2.2991610913793, -0.4964787876693661, -0.4595693157438461, 0.5324541015910377, -0.5867874556489581, -0.35572379506478163, -0.2952652828831782, 1.0848624947043213, -0.9288529595558911, -1.090484376260672, -1.7202073606031347, -0.4557667853134118, 0.5309491929233173, 1.0185126199164043, 2.0295491433613932, -0.4630306357318056, 0.49880848445376064, -0.8965161604465833, 0.8497055707546171, 0.3486844266491496, 1.0237001986657812, 0.1497143869421675, 0.35862738585039705, 0.3412785988107492, -0.09414913745313441, 1.0854408958978659, -0.3734580800532104, 0.8936619583359936, 0.8148071325236838, -0.14025016253319872, -0.30284091190748763, 0.08564265487221612, 0.8857546094551574, 0.017367299651623414, 0.37215815959890214, -0.5960100419836583, -0.11423035671353428, -0.3035150976729953, -2.0320362952843216, 0.04622910133956838, -1.0176933986093701, -1.502378369095972, 1.1198309681684846, -0.5046349500656707, 0.7666874639679429, -0.5861060781178794, -0.24611324010905264, -0.09327590840098242, -0.14442229439464185, -0.8353996614448043, 0.854624306478667, 0.4917163428138994, -0.6324950570184514, 2.115473613989391, -2.0365197531787476, -0.5272763955742835, -0.6185251410063688, -1.3361426917023405, -1.8858341849280607, -0.003522244625714563, -1.4345746873381773, -0.6785585519167313, 0.6101953021598748, 0.7350976694636958, 0.7086065064963706, 0.43128063595872546, -0.6165507227165162, -0.2934367906402976, -1.7779174044468333, 1.062464658721205, -1.3385331079969098, 0.8446422240885969, 0.9141321974623022, -0.5294650569264169, -2.0234043455692716, -0.5391572051480498, 0.2579712096832471, -0.19067306810378112, 0.4642235255085265, -0.4449868965197209, -0.23144246348696307, -2.0735844818845295, 0.31675064737109127, -2.4432418514882794, -0.558220867985175, -1.5022662560542264, -0.48457507271449496, 0.19202487643534188, -0.10443915473296404, 1.0000236687309945, 0.5861587850653436, 1.0055300114413295, 0.1726772218689249, -0.3645961221457449, 0.14759327218560228, 0.6442139154800792, 0.5799299212011445, 0.6035024015046057, -1.636437989837487, 1.234422297591237, 1.2016416291702743, 1.2062157107282494, 1.937323533472947, -0.3579615125420753, -1.3005892188040218, 0.6503041802750497, -0.7775341815930406, 2.5071218752332434, -0.6537442685753958, -1.587413346897923, 0.23800692364015416, 1.105140701956193, 1.0772700375478212, -1.299128925785756, -0.7952012928511988, -1.2155070969310777, -0.9584160068299654, -0.7394718391046115, -0.5799170137797547, 0.5292797530820043, -0.8914492809380599, -1.277237901982243, -0.6596597862749191, -0.15640826555313983, -2.0126210611437876, -1.0438952538076622, 0.9996667479014726, -0.7206060584699623, -0.5287100310772653, -0.6571366172872882, -1.5972552883620603, -1.4251222835103514, 0.9790930361155679, -2.443888955624676, 0.3282338756164295, -0.4261438328134423, -0.7174808657968375, 0.7802539017732303, -0.03175714179354074, -0.29824861864500035, -1.1425070560682624, 2.0775764086863187, -0.21545230713852576, -0.4250342989599405, -0.6819235206583761, 0.05387861559240547, -1.182596090602958, 1.2146261573060637, -1.1633253601981715, -0.5543461568033442, 0.09237875429628727, -0.45927349343460916, -2.251425022636683, -0.3272299689526769, 1.0646175741367674, -0.3808514651910383, -1.0589021123601352, 1.5402004868343337, -0.2600813680039358, 2.8744796137636817, -2.3244662947694583, -0.08066396698608926, -0.6276083173278257, -1.4364617675980866, 0.9678464163794621, -0.430391466639983, 0.2528639218483799, -0.7797077284326803, -0.2264730513621785, 1.3966538193254427, 0.5271348192337626, -1.3184573277171263, 0.1928050422052357, 0.5968888110899041, 0.991665534213049, -0.37696537102210154, -0.8342485863821745, -0.7950550964310026, -0.4810156497549137, -0.1927278571911108, -1.5964889419203545, 1.3953311138122109, 0.3547445686609422, -0.4471445204479197, 0.991781801233558, -0.1673919063008204], "mode": "markers", "marker": {"opacity": 0.8, "line": {"color": "rgba(217, 217, 217, 0.14)", "width": 0.5}, "size": 12}, "x": [1.8320001037889175, -0.7366286906119605, 2.500901625368481, -1.0755262727397326, 0.1074378344093505, 0.17579402602254415, 0.6173174270239979, -2.0454618133342617, -1.250805861743299, -1.1124406429584022, -0.4910278497607833, -0.12527929845259347, -1.1586517090595736, -0.3772739136422227, -0.5162970898577435, -2.2982062182762295, 1.8482604153119364, 1.9119715444801777, -0.9065623916437399, -0.6045185134324133, -0.8778325438627805, 0.22498920088144264, -0.8173649110869248, -0.7265188834382206, 0.77753746242286, -1.0296873330634253, -0.32459132066652086, -0.6554025762920125, -0.4862757329928757, -1.2652865249160645, -0.39650158865259205, -0.8057774067479615, 0.00792029862961818, -0.12118022185548095, 0.1473341590215884, -0.30287614615532943, -1.5513704528463796, 1.0151860104383037, -0.303651998729855, -0.02835831994097218, 0.6659416827815011, -0.05713642009595837, -0.6641772373283098, 0.5621960583266415, -0.03993229063872498, -0.7638508332718579, -0.2156195675713284, -0.14976935840814717, 0.21408395535322117, -0.31415022786824015, -1.1723637118468992, 1.03388112041893, 0.14416168992572498, 0.05353701071990391, -0.8999064267107731, 0.24701524907236488, -0.60808812945643, 0.3880929778690719, -0.3580873252675667, 0.28402846957079364, -0.2606567794447128, -0.13209579520332035, 0.4488597605715848, -1.4706316538940025, -0.19217646753511847, 0.6027539548308567, 0.09554858231772086, -0.8649445686000652, 0.5017742792772223, 0.5775500832502775, 0.24121266268929106, 0.4343772421846799, -0.6725776282274532, -0.7985916649227499, 0.3744171759704495, 0.16701345943022788, -0.4054197561067375, 0.20703716950976875, 1.7053569897074785, 1.13220283200249, 0.7763416494631771, 0.35955464135384924, -0.6743764425226799, 1.1880832072396263, 0.592745945303201, -1.0949574862962301, -1.3660272979751586, 0.7015578231878832, 0.18972778997839995, 0.9074209686120287, 1.3016120019087123, -1.3187195191276133, 1.55302258505828, -0.6634430942612143, 0.3501813880869146, 1.8393339812604166, 2.20587322919808, -0.6040512333028327, -0.35876657454067507, 0.06653307842008872, 0.09023549252816133, 1.4012826337274105, -0.6796540436852061, -0.22041326014722273, 0.9106956982849753, 1.2145120077778113, 0.04792302296038745, 2.4555029205888705, -0.730177904126893, 0.28838613322664336, -0.8833444036704695, -0.014232911550587986, -1.08284212808566, 0.31220168520852754, 0.2596385934572514, 0.5560682009641935, 1.1710144836448744, -0.531401199579048, 0.16980636611588978, -1.0493065421969638, -1.018312403668209, 1.6181172534083008, -0.7356723707079572, -0.9460371502143132, -0.947010872832467, 0.48141343549694904, -0.26141387173397834, -1.0296266747390295, -0.36029811366470244, -0.7856892681887798, -1.172097214182248, 0.6105662094231984, 0.5528943199575226, 0.1861802614645595, -0.9467235411713156, -1.4322266727827617, 1.5021990479012606, 0.6722214665289606, -0.9677628271238221, -1.511719967412434, 1.153781926377565, -1.0968854329568956, 1.3168301705114709, -0.9980287400625342, 0.37991484886592836, 0.8998506433760325, -0.45571453441152976, 2.169453219619858, -0.27432771062381406, -0.4056136156886566, -0.25029969951086717, 1.732274487568477, 0.16683058109497043, 0.19161090195259572, -0.1644157574655042, 0.014275632961942475, 0.9108494576925514, 1.0597027146991542, -0.5928949626561529, 0.40591607853234285, -0.5842766129017848, -1.3750686827085696, -0.45304733217916415, 0.4236342532409034, -0.10068895257162597, -0.3869786472093433, -1.3242987889782591, 0.47282049573194723, 1.0877832716407387, 0.683985913234157, 0.10339369621715068, -1.4361572671274419, -0.5834688545543336, -1.017760819934691, 0.2470085948440306, -0.2518583593422435, 2.7845582962119417, -0.6877669056164784, 0.8188952439860407, 1.2667998269066982, 0.2993001969263832, -0.07280861153418514, -1.3816255726385755, -1.812938815050532, 2.3142020907011114, 0.14918540047084028, -0.14152251452396397, 1.3748238465256344, 0.14060386073803924, -1.0406122411566787, -1.6714771456230428, 0.8291105411037816, -0.5582412847628134, 0.5724943311249723, -0.1468236552999563, 1.5005602698823859, -1.8008095720996613, -0.025346404154502847, 1.5277462144436302, -0.7635277559171132], "z": [-0.6103717536597697, -0.5222285634030615, 0.03960472280448434, 0.29325393594854043, -2.626166935053356, 0.0740535980303147, 0.01684274323335607, -2.7245339212667585, 0.9567314491589511, 1.216826039697032, 0.15886984078735958, -0.744024141405292, 1.8551412212039424, 1.0091273482549843, -0.5590257072961932, 1.693293916259884, -0.6009902680311325, -0.6834742200026801, 1.269973644133589, 0.9004315739325109, 0.9014195183452185, -1.2588534777125509, 0.46165696500277853, -0.7337273837979026, 0.7976004155300893, -2.0156242274580585, 0.7197382629849356, 1.1878333612861283, 0.9466434554597554, -1.4573393085578255, -0.972641757785625, 0.3759951069799312, -0.15610533739066654, -2.2774086778781673, 0.4586659796230207, -0.8023912918298697, 1.1720907017819895, -1.0440298734822955, -1.0264572467969224, -0.33137679900468897, 0.41071044083149466, -0.8708870579505702, -0.27700733753269285, 0.06297715323136308, -1.123264825708157, 1.0374283086706921, 1.424238797927163, -0.9355437310643216, -1.0573314507660005, 0.5746642935352216, -0.8840639443760259, 1.8496146024686195, -1.5405274989544626, -0.0011111068471393493, -0.23851408217758827, 0.4524279835275595, -2.068186258422358, 0.5308673302359082, 0.29218263484853807, 0.5585228185249146, -0.6850183452382155, -0.05969743451931298, -0.22376658414111048, -0.5642357488014335, 0.039652644023259145, 0.6431377247243621, -0.23983219713756196, -0.7145756898913274, -1.7837400184535686, -0.7922297575841366, 0.22713809661936066, 0.3852782027717662, -2.271352597859842, 0.5979165367463716, -1.6428141244272871, -1.7252297571112583, -0.613457729158898, -0.8245854178941289, -1.0071981029072024, 0.11555440554200949, 0.9432020194059391, 0.35127725182536423, 0.7339297887285279, -0.5201560811699264, 0.4794518229151972, 1.5063604356818607, -0.11994139779091725, 0.09841166506774272, -0.7100878596390757, 1.6877515535401744, 0.7409467270293827, 1.0540722507259719, -0.5445185530022539, -0.1613076497015473, -1.514571151866092, 0.5259950963631822, -0.018565464262539702, 1.0666568869123303, 0.8846795169130831, 1.8548426042042785, -1.143266475823759, 0.4141321234139417, -0.8841693514162866, 0.7998642259687134, 1.7235499260347935, 0.25116684411583623, 1.100701639754439, 0.33374591276820165, 1.4899966707206242, 0.10393684580815027, 0.2762980217195158, -0.1091867877583827, -0.054102616758025, 1.2238835333916176, -1.3028905469087417, -0.7756477837663711, 0.8896132151791498, -0.5980944348672169, 0.38772287767657004, 0.611544567677205, 0.06441302240722542, -1.011901375221465, 0.4424334311633736, -1.4222586130357464, 1.0786099053566405, 1.4586299347657359, 1.2736604611115643, -0.7226565125019615, -0.28985279349779974, 1.1640888776851734, 0.4847505426125591, -1.7451149896061067, 0.4935092966878111, -0.9758727680835916, -0.4929611608394555, -1.5247279776504197, -0.7576392951052685, -0.5262349441041321, 0.012079736822732223, 0.43186500756029755, 1.2112740447312496, -0.23162208338306783, -0.2760244403874068, -0.5219334498180827, 0.3003377525970344, -0.8379443981873659, -0.5656835114742161, 1.0180579140288306, 1.0253438727883462, -0.3899478539545387, -0.6863845695928339, -1.106929306828621, -0.2211943098402821, 2.1304493903005075, -1.4503864962661113, 0.09373878566136118, 0.878353983930091, -0.821673314730869, -0.3915752078357281, 0.667075326697086, 0.1546761276858554, 0.5319325865449055, -0.30057114848892225, -0.7784730363949519, -2.6414628429720617, 0.7149110679309958, -0.9110397646117252, 2.1901271754474814, 0.33199650521059526, 1.625300268690266, -1.3900272569710184, -0.4835059262739965, 0.3381006494535326, 0.8677527943378096, -0.42646526239724386, -0.8257840314507225, -1.0309610977562431, -0.1374023098670995, -1.2430775905764628, -0.09280655412677627, -1.1437056600311248, -0.8391125269896945, 2.4920999578075134, 0.03179819195640865, -0.7203059529253562, -0.9279639274526592, 1.355068991828881, -0.5849742750232889, 0.6560092817229735, 0.39433900969895813, -0.536086081855905, 1.6586091645070942, -0.749907607185009, 0.23146959760480146, 0.3532491781441985, -0.8440645844137891, 0.7060999408140565, -1.0113799350813104, -0.9386487253566074, 0.8825019440635435], "type": "scatter3d"}], {"margin": {"r": 0, "b": 0, "t": 0, "l": 0}}, {"displaylogo": false, "linkText": "Export to plot.ly", "modeBarButtonsToRemove": ["sendDataToCloud"], "showLink": false}).then(function() {	 $(".e64ff355-dc9b-4590-b73f-7205bab419e4.loading").remove();})				 </script>

Hey @sa Sam ,Thanks alot for your response ! :D Can you please guide me on how can I integrate this code with flask . I am new to the framework :)
I do not know how to use Flask. This will product HTML which you should be able to embed into a web page.
Hey Sam , the generated test.html works awesome , but when I embedd it in another html file, it again looses its 3rd dimension (as if someone took snapshot) and becomes 2D . Can you help me on that ? I am embedding tes.html into a div of another html file(main.html) Code : $(function(){ $("#divid").load('url_cooresponding_to_test.html_in_browser'); });
Sorry can you post the code you are using to embed it in another HTML file in the original question? Hard to read in the comment.

Collectives™ on Stack Overflow

Plot 3D plots using plotly

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related