Creating Line and Polylines

Creating A Simple Line

---

<script type="text/javascript+protovis"> 
    var vis = new pv.Panel()
    .width(200) 
    .height(150)
    .fillStyle("rgba(255,0,0,0.2)");     
     
    vis.add(pv.Line) //Add pv.Line marker to panel
        .data([[100, 100], [50,150]]) //Two end points
        .top(function(d) d[0]) // Get index 0 of every iterations
        .left(function(d) d[1]) // Get index 1 of every iterations
        .strokeStyle("black"); 
         
    vis.render(); 
</script>

Simple Line

---

Creating A Simple PolyLines

---

<script type="text/javascript+protovis"> 
    //alert(Math.sin(45*Math.PI/180));
    var vis = new pv.Panel()
    .width(200) 
    .height(150)
    .fillStyle("rgba(255,0,0,0.2)");     
     
    vis.add(pv.Line) 
        .data([[100, 0], [50,50], [100,100], [50,150], [100,200]])
        .top(function(d) d[0]) 
        .left(function(d) d[1])
        .strokeStyle("black"); 
         
    vis.render(); 
</script>

Simple PolyLines

---

A More Complex PolyLines

---

    <script type="text/javascript+protovis"> 
        var vis = new pv.Panel()
        .width(360) 
        .height(150)
        .fillStyle("rgba(255,0,0,0.2)");     
         
        vis.add(pv.Line) 
            .data(pv.range(1,360,1))
            .top(function(d) Math.sin(d*Math.PI/180)*-50 + 75) 
            .left(function(d) d)
            .lineWidth(0.8)
            .strokeStyle("blue"); 
             
        vis.render(); 
    </script>

PolyLines - Sine Graph

---

References :

• http://vis.stanford.edu/protovis/jsdoc/symbols/pv.Line.html
• http://vis.stanford.edu/protovis/jsdoc/symbols/pv.html#.range