epiPlotly custom element

The plots below are assembled within a custom <epi-plotly> |↗| element, provided you preloaded it from episphere.github.io/plotly/epiPlotly.js:


    
The two plots below are assembled by using this custom element just like you would any html tag, with the url to the plot data as it's content.

    

    
Also like regular HTML elements, custon elements can be manipulated by JS directly in the DOM. Note in this example how the data url can be assigned to the specific element attribute where it is kept:

    
    

    
Hello
This is regular HTML within the custom element

    https://episphere.github.io/plot/demo1.json
    
As with regular HTML elements, you can also chose to provide additional parameters as attributes of the custom tag. Compare the plot below with the one above to discover what each configuration parameter is doing

    
 
    
 It could also be 

    

    https://episphere.github.io/plot/demo1.json
    
For a less conventional approach, one can also pass the traces and layout directly in tag attributes. You could also go overboard (you were warned) and do something like this

    

    {
        traces:[
            {
                x:[...Array(1000)].map((_,i)=>i*0.1),
                y:[...Array(1000)].map((_,i)=>(Math.sin(i*0.01)+Math.random()/2)),
                mode:'markers',
                marker: { size: 2 }
            }
        ]
    }
    
    
    Let's pick something more complicated, say from PLCO,
    

    
        <epi-plotly>
            https://jonasalmeida.github.io/pub/PLCOpca2.json
        </epi-plotly>
    

    

    
        https://jonasalmeida.github.io/pub/PLCOpca2.json
    
        
Praful here, I'm just HTML :-P