!date

# load js libraries
from IPython.core.display import display, HTML, Javascript
display(HTML("""
<script src="http://trifacta.github.com/vega/d3.v3.min.js"></script>
<script src="http://trifacta.github.com/vega/vega.js"></script>
"""))

# css for axis
display(HTML("""
<style type="text/css">
  .axis path,
  .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }
</style>
"""))

%%javascript
// Make visible in IPython 
container.show()

//Width and height
var w = 500;
var h = 300;
var padding = 30;

//Create svg in IPython element
var svg = d3.selectAll(element).append('svg').attr('width', w).attr('height', h); 

//Initialize data array
var dataset = [3,1,4,1,5,9];

//Create scale functions
var xScale = d3.scale.linear()
                     .domain([-.5, d3.max(dataset, function(d,i) { return i; })])
                     .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
                     .domain([-.5, d3.max(dataset, function(d) { return d; })])
                     .range([h - padding, padding]);

//Define X axis
var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(10);

//Create circles
svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d,i) {
        return xScale(i);
   })
   .attr("cy", function(d) {
        return yScale(d);
   })
   .attr("r", 5);

var line = d3.svg.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d) { return yScale(d); });

svg.append("svg:path").attr("d", line(dataset)).attr("fill", "none").attr("stroke", "black");

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);


display(HTML("""<div id="vega"></div>"""),
        Javascript("""
var spec = {
  "width": 500, 
  "height": 300, 
  "padding": {"top": 10, "bottom": 20, "right": 10, "left": 30}, 
  "data": [
    {
      "values": [{"x": 0, "y": 3}, {"x": 1, "y": 1}, {"x": 2, "y": 4}, {"x": 3, "y": 1}, {"x": 4, "y": 5}, {"x": 5, "y": 9}], 
      "name": "table"
    }
  ], 

  "scales": [
    {
      "name": "x", 
      "type": "linear", 
      "domain": {"field": "data.x", "data": "table"},
      "range": "width"
    }, 
    {
      "name": "y", 
      "domain": {"field": "data.y", "data": "table"}, 
      "range": "height", 
      "nice": true
    }
  ], 
  "axes": [
    {"scale": "x", "type": "x"}, 
    {"scale": "y", "type": "y"}
  ], 
  "marks": [
    {
      "type": "line", 
      "from": {"data": "table"}, 
      "properties": {
        "enter": {
          "x": {"field": "data.x", "scale": "x"},
          "y": {"field": "data.y", "scale": "y"}, 
          "y2": {"scale": "y", "value": 0},
          "stroke": {"value": "#000000"}
        }
      }
    }, 
    {
      "type": "symbol", 
      "from": {"data": "table"}, 
      "properties": {
        "update": {
          "fill": {"value": "#2a3140"}
        }, 
        "enter": {
          "x": {"field": "data.x", "scale": "x"},
          "y": {"field": "data.y", "scale": "y"}, 
          "stroke": {"value": "#ffffff"},
          "strokeWidth": {"value": 2}          
        }
      }
    }
  ]
}
;
vg.parse.spec(spec, function(chart) { chart({el:"#vega"}).update(); });
"""))

import vincent
def vincent_ipynb_display(vis):
    import json, random
    from IPython.core.display import display, HTML, Javascript

    # HACK: use a randomly chosen unique div id
    id = random.randint(0, 2**16)
    
    a = HTML("""
        <div id="vis%d"></div>
        """ % id)

    b = Javascript("""
        vg.parse.spec(%s, function(chart) { chart({el:"#vis%d"}).update(); });
        """ % (json.dumps(vis.vega), id))
    
    display(a, b)

vis = vincent.Line()
vis.tabular_data([3,1,4,1,5,9])

vis2 = vincent.Scatter()
vis2.tabular_data([3,1,4,1,5,9])

vis.marks += vis2.marks

vincent_ipynb_display(vis)