In [1]:

    

from IPython.core.display import HTML


    

In [2]:

    

HTML('''
<h1>Hello DOM!</h1>
''')


    

    
Out[2]:





Hello DOM!

In [3]:

    

HTML('''
<style scoped>
.steely {
  color: steelblue;
  font: 16px script;
}
</style>
<h1 class="steely">Hello DOM!</h1>
''')


    

    
Out[3]:






Hello DOM!

In [4]:

    

HTML('''
<style scoped>
.steely {
  color: steelblue;
  font: 16px script;
}
</style>
<h1 class="steely" id="steely-DOM">Hello DOM!</h1>
<script>$("#steely-DOM").text("Hello JavaScript!!")</script>
''')


    

    
Out[4]:






Hello DOM!

In [5]:

    

HTML('<script src="lib/d3/d3.min.js"></script>')


    

    
Out[5]:

In [6]:

    

HTML('''
<style scoped>
.bedazzled {
  color: orange;
}
</style>
<div id="d3-div-1"></div>
<script>

var size_data = [10,20,30];

d3.select("#d3-div-1").selectAll('.bedazzled')
    .data(size_data)
    .enter().append('p')
      .attr("class","bedazzled")
      .style("font-size", function(d){ return "" + d + "px";})
      .text("Hello D3!");

</script>
''')


    

    
Out[6]:

In [7]:

    

size_data = [15,30,45]


    

In [8]:

    

from string import Template
html_template = Template('''
<style scoped> .bedazzled {color: orange;} </style>
<div id="d3-div-2"></div>
<script>

var size_data = $size_data_python ;

d3.select("#d3-div-2").selectAll('.bedazzled')
    .data(size_data)
    .enter().append('p')
      .attr("class","bedazzled")
      .style("font-size", function(d){ return "" + d + "px";})
      .text("Hello D3 with Python data!");

</script>
''')
HTML(html_template.substitute({'size_data_python': str(size_data)}))


    

    
Out[8]: