Draw an SVG object

by rbkreisberg

HTML

<html>
 <head>
  <script src="http://mbostock.github.com/d3/d3.js"></script>
 </head>
 <body>
     <div id="container">
       <div id="plot">
        <!-- the svg object will be inserted here -->
       </div>
     <br/>
       <div class='button_bar'>
         <button id="start_data_stream">Start</button>
       </div>
    </div>
 </body>
</html>

CSS

.data_line {
    fill: none;
    stroke: #355;
    stroke-width:2;
}

.x_axis line, .x_axis path, .y_axis line, .y_axis path {
  fill: none;
  stroke: #222;
  stroke-width: 1;
  stroke-opacity: 0.5;
}

svg circle {
    stroke: none;
    fill: blue;
}

svg .plot-area {
    overflow: hidden;
}

svg .inner-rect {
    stroke-width: 2;
    stroke: black;
    fill: none
}

svg .title {
 stroke: none;
 fill: black;
 font-weight: bold;  
 font-size:14px;
font-family:'Helvetica';
}

#start_data_stream {
    font-size:16px;
}

#plot {
    height:300px;
    width:450px;
    margin-left:20px;
    margin-top:20px;
    display:block;
}

#container { 
    width:450px;
    text-align:center;
}

JavaScript

//global vars

var w = 450,
    h = 300;
var inner_rectangle_ratio = 0.8,
    inner_width = inner_rectangle_ratio * w,
    inner_height = inner_rectangle_ratio * h;
var paused = true;
var data_array = new Array(),
    x_scale = new Object(),
    y_scale = new Object(),
    z_color_scale = new Object();
var create_line;

/********* Runtime execution ***********/

setupDataAndScales();
setupRendering();
setupPlot();
drawData();

//assign behavior to the button.  jQuery is one way to do this
$('#start_data_stream').click(togglePause);

/******** Functions below!*************/

function drawData() {
    drawLine();   
    drawCircles();  
}

function setupPlot() {
    
//calculate the position of the inner plot area
var ir_x_offset = w * (( 1- inner_rectangle_ratio) / 2),
    ir_y_offset = h * (( 1- inner_rectangle_ratio) / 2);
            
//attach an svg object to the DOM.  Size it appropriately    
var svg = d3.select('#plot')
            .append('svg:svg')
              .attr('width', w)
              .attr('height', h);
    
//draw an outer border.  Not a great design choice.
    svg.append('rect')
        .attr('x', '0')
        .attr('y', '0')
        .attr('width', w)
        .attr('height', h)
        .attr('stroke-width', '2')
        .attr('stroke', 'black')
        .attr('fill', 'none');        
 
//clipPath prevents the display from bleeding over into other areas    
    svg.append("defs").append("clipPath")
        .attr("id", "clip")
      .append("rect")
        .attr("width", w*0.8)
        .attr("height", h*0.8);
 var downx = Math.NaN;
   var downscalex;                
                
//the plot area is inset from the border
    svg.append('g')
           .attr('class','unclipped-area')  
           .attr('transform' , 'translate(' + //x_offset, y_offset             
             ir_x_offset + ',' + ir_y_offset + 
             ')')
.on("mousedown", function(d) {
              var p = d3.svg.mouse(svg[0][0]);
              downx =...