What can Interactive Vis do for me?

• Convey meaning
• Manage the 3 hurdles of data...
  Scope, Scale, Complexity
• Provide supporting data and context

CSS3 Selectors

<div id="BRCA">
 <ul class="mutations">
  <li>1</li>
  <li>2</li>
 </ul>
<div>

$('#BRCA') == <div>....</div>
$('.mutations') == <ul>...</ul>
$('.mutations li') == [<li>1</li>,<li>2</li>]
$('.mutations li:first') == <li>1</li>

d3.select('#BRCA') == <div>....</div>
d3.select('.mutations') == <ul>...</ul>
d3.selectAll('.mutations li') == [<li>1</li>,<li>2</li>]
d3.select('.mutations li:first') == <li>1</li>

SVG

<svg id="updating-plot" xmlns="http://www.w3.org/2000/svg"
	width="450" height="200">
 <g class="canvas" transform="translate(25,15)">
   <g class="axes"></g>
   <g class="labels"></g>
   <g class="data">
     <circle cx="135" cy="150" fill="#F23" stroke="none" r="6"/> </g>
 <rect fill="none" stroke="#0000FF" stroke-width="2"
  x="60" y="30" width="100" height="60" transform="rotate(45)"/>
  <path fill="none" stroke="#444444" stroke-width="2"
    d="M40 70 L240 100"/>
  <text x="100" y="30" class="label">Hello World</text>
  </g>
</svg>

ECMAScript5

Javascript is growing (ES6 is coming) into a full featured tool. It enables a growing number of interactions between the user, the browser, and the data.

Follow Along!

var w = 450,
    h = 300;

//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.
    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');        

         //attach a title to the graph using a svg:text object    
    svg.append('text')
        .attr('class', 'title')
        .attr('x', w/2 - 40) //position in the center (sorta)
        .attr('y', "14")
        .text('Scatter Plot!');
}

Data -> Rendered Circles

Change of Coordinates

//x_scale maps the array index to the viewport
var x_scale = d3.scale.linear()
                  .domain([0,data_array.length-1])
                  .range([0,viewport_width]);

//invert the y_scale such that higher values is closer to the top
var y_scale = d3.scale.linear()
                  .domain([0,1000])
                  .range([viewport_height,0]);

//d3 function to create an axis from x_scale with the domain flipped
var x_axis = d3.svg.axis()
                .scale(x_scale.copy().domain([20,0]))//use the x_scale
                .tickSize(-screen_height)
                .ticks(5)
                .orient('bottom');
    
d3.select('.unclipped-area')
  .append('g')
    .attr('class','x_axis')
    .attr('transform','translate(0,' + screen_height + ')')
    .call(x_axis);  //call the axis generator

var data_array = [
	{x:32, y:224}, //functionally, instead
        {x:47, y:113},
        {x:128, y:63},
        {x:178, y:160},
        ...
        ];

function drawCircles() {
d3.select('.scatter_plot')
  .selectAll('.data_point')
  .data(data_array)
  .enter()
   .append('circle')  //add the circles
    .attr('class', 'data_point')
    .attr('cx', function(point) { return x_scale(point.x); })
    .attr('cy', function(point) { return y_scale(point.y); })
    .attr('r', 4 ) //radius of 4
    .style('fill', 'blue' );//set style fill to blue
}

Data -> Color, Lines

Color by Value

z_color_scale = d3.scale.linear()
                    .domain([0,100])
                    .range(['blue','red']);

function drawCircles() {
...
       .attr('r',4)
       .style('fill',function(point) { 
            return z_color_scale(point.z);})
}

function setupRendering() {
    // create the path based on the index and y values    
    create_line = d3.svg.line()
          .x(function(point,i) {return x_scale(i);})
          .y(function(point) {return y_scale(point.y);})
          .interpolate('cardinal')
          .tension(0.7);
}

function drawLine() {
    d3.select('.line_plot')
        .selectAll('.data_line')
        .data([data_array])
      .enter()
      .append('path')	//path = line
        .attr('class','data_line')
        .attr('d',create_line); // 'd' determines the path
}

Animate with Transition()

function drawCircles() {
    d3.select('.scatter_plot')
...
.on('mouseover',function()  {  //change size and color on mouseover
	d3.select(this)
	.transition()
	  .duration(500)
	  .attr('r', 15)
	  .style('fill', 'black');
	})
.on('mouseout',function() {  //restore on mouseout
  d3.select(this)
    .transition()
       .duration(500)
       .attr( 'r', 4)                
       .style( 'fill', function(point) { 
             return z_color_scale(point.z); })
});

function appendDataPoint() {
  data_array.push(createDataPoint());// push a new point onto the back
    d3.select('.scatter_plot')
        .selectAll('.data_point')
        .remove();  //remove the circles

      drawCircles(); //redraw circles       

  d3.select('.data_plot')//move the parent panel of the circles to the left
        .attr("transform", null) //reset translation to zero
      .transition()  //begin the transition definition
        .duration(1000)  //for 1000 msec
        .ease("linear")  //at a constant rate        
        .attr("transform", "translate(" + x_scale(-1) + ")") //go left!
        .each("end", appendDataPoint);  //rinse and repeat
  
  data_array.shift(); // pop the oldest data point off of the array
}

Clip Away the Excess

//clipPath prevents the data 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);

//the plot area is inset from the border
svg.append('g')
     .attr('class','unclipped-area')  
     .attr('transform' , 'translate(' + ir_x_offset + ',' + ir_y_offset + ')')     
   .append('g')        
     .attr('class','clipped-area')     
     .attr("clip-path", "url(#clip)"); //attach clip

Resources

D3.js

HTML, SVG, Javascript, R

Projects @ ISB

Regulome Explorer
explorer.cancerregulome.org

Transcriptional Regulation & Epigenetic Landscape
trel.systemsbiology.net

Pubcrawl
pubcrawl.systemsbiology.net