In [3]:

    

%%html
<link rel="stylesheet" type="text/css" href="bcard.css">
<link rel="import" href="urth_components/paper-dropdown-menu/paper-dropdown-menu.html" is='urth-core-import' package='PolymerElements/paper-dropdown-menu'>
<link rel="import" href="urth_components/paper-menu/paper-menu.html" is='urth-core-import' package='PolymerElements/paper-menu'>
<link rel="import" href="urth_components/paper-item/paper-item.html" is='urth-core-import' package='PolymerElements/paper-item'>
<link rel="import" href="urth_components/paper-button/paper-button.html" is='urth-core-import' package='PolymerElements/paper-button'>
<link rel="import" href="urth_components/paper-card/paper-card.html" is='urth-core-import' package='PolymerElements/paper-card'>
<link rel="import" href="urth_components/paper-slider/paper-slider.html" is='urth-core-import' package='PolymerElements/paper-slider'>
<link rel="import" href="urth_components/google-map/google-map.html" is='urth-core-import' package='GoogleWebComponents/google-map'>
<link rel="import" href="urth_components/google-map/google-map-marker.html" is='urth-core-import' package='GoogleWebComponents/google-map'>
<link rel="import" href="urth_components/urth-viz-table/urth-viz-table.html" is='urth-core-import'>
<link rel="import" href="urth_components/urth-viz-chart/urth-viz-chart.html" is='urth-core-import'>


    

In [4]:

    

import pandas as pd
aDataFrame = pd.DataFrame([
        ["John", "Johnson","Web Developer", "13", "1234325431", "http://javi.er"], 
        ["Jane", "Doe","Software Engineer", "456", "1434215411", "http://www.ibm.us"],
        ["Joe", "Smith","Rockstar Dev", "4526", "1237328421", "http://cooldevs.org/xavier"]
    ], columns=["First ", "Last Name", "Role", "Amount", "Bigger Number", "Website"]
)
aDataFrame


    

    
Out[4]:






  

    

      

      
First
      
Last Name
      
Role
      
Amount
      
Bigger Number
      
Website
    
  
  

    

      
0
      
John
      
Johnson
      
Web Developer
      
13
      
1234325431
      
http://javi.er
    
    

      
1
      
Jane
      
Doe
      
Software Engineer
      
456
      
1434215411
      
http://www.ibm.us
    
    

      
2
      
Joe
      
Smith
      
Rockstar Dev
      
4526
      
1237328421
      
http://cooldevs.org/xavier
    
  

In [14]:

    

from urth.widgets.widget_channels import channel
channel("urthenv").set("showMoreInfo", "")


    

In [15]:

    

%%html
<template id="tpl" is="urth-core-bind" channel="urthenv">
    <urth-core-dataframe id="f1" ref="aDataFrame" value="{{df}}" auto ></urth-core-dataframe>

    <p>Name of first person: <strong>{{ df.data.0.0 }}</strong></p>
    
    <urth-viz-table datarows="{{ df.data }}" selection="{{sel}}" columns="{{ df.columns }}" rows-visible=6>
        <urth-viz-col index="4" format="$0,0.00" type="numeric"></urth-viz-col>
        <urth-viz-col index="3" format="$0,0.0" type="numeric"></urth-viz-col>
    </urth-viz-table>
    <template is="dom-if" if="{{showMoreInfo}}">
        <div class="bcard">
            <div class="info">
                <p>Details for selected person are:</p>
                <div class="line full-name"><span>{{sel.0}}</span> <span>{{sel.1}}</span></div>
                <span class="line title">{{sel.2}}</span>
                <span class="line phone-number">{{sel.3}}</span>
                <span class="line email">{{sel.4}}</span>
                <span class="line website">{{sel.5}}</span>
            </div>
            <div class="logo"></div>
        </div>
    </template>
</template>


    

In [17]:

    

channel("urthenv").set("showMoreInfo", True)


    

In [18]:

    

channel("urthenv").set("showMoreInfo", "")