#!/usr/bin/env python
# coding: utf-8

# In[1]:


get_ipython().run_cell_magic('html', '', "\n<style>\n.hello-world{\n    border: 1px solid black; \n    width: 300px; \n    height: 50px; \n    font-size: 2em; \n    padding: 0.3em;\n}\n</style>\n\n<div class='hello-world'>\nHello ,html magic!\n</div>\n")


# In[2]:


get_ipython().run_cell_magic('javascript', '', "\nwindow.get_element = function(el){\n    if(el){ $(el).html('') }\n    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n};\n\nelement = undefined;\n")


# In[3]:


get_ipython().run_cell_magic('javascript', '', '\nvar target = get_element(element)\n$(target).append(\'<div class="hello-world">Hello, js magic!</div>\')\n')


# In[4]:


get_ipython().run_cell_magic('javascript', '', '\nrequire.config({\n    paths: {\n        d3: "http://d3js.org/d3.v3.min"\n    }\n});\n')


# In[5]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var targetElement = get_element(element);\n    require(['d3'], function(){\n        $(targetElement).append($('<p>' + d3 + '</p>'))\n    });\n})();\n")


# In[6]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var targetElement = get_element(element);\n    require(['d3'], function(){\n        $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))\n    });\n})();\n")


# In[7]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var targetElement = get_element(element);\n    require(['d3'], function(){\n        var data = [1, 2, 3, 4, 5, 6, 10]\n        var svg = d3.select(targetElement).append('svg')\n            .attr('width', '350px')\n            .attr('height', '100px')\n            .style('border', '1px solid lightgray');\n        \n        svg.selectAll('circle')\n            .data(data)\n            .enter()\n            .append('circle')\n            .style('fill', 'skyblue')\n            .attr('cx', function(d, i){ return i * (350/data.length) + 15})\n            .attr('cy', '50px')\n            .attr('r', function(d){ return d * 3})\n    });\n})();\n")


# In[ ]: