vsbuffalo/draw_lineage.js

## draw_lineage.js

var fs = require('fs');
var d3 = require('d3');
var jsdom = require('node-jsdom');
var xmlserializer = require('xmlserializer');

var margin = {top: 2, right: 4, bottom: 2, left: 4};
var width = 200 - margin.left - margin.right,
    height = 14 - margin.top - margin.bottom;

function drawNodes(sel, nodes, start, document) {
  data = nodes.map(function(d, i) {
    return {'sex': d, 'i':i, 'o': d < 2 ? 1 : 0};
  });
  var radius = 3, space = 8, strokewidth = 0.5;
  var end = start + margin.left + (radius + space)*(data.length - 1);

  var g = sel.append('g');
  g.append('line')
     .attr({
        'y1': margin.top + radius/2,
        'y2': margin.top + radius/2,
        'x2': function(d) {
          return end;
        },
        'x1': start + margin.left + radius*2 - 1
     })
     .style("stroke", "#555")
     .style("stroke-width", "0.6")


  g.selectAll('.nodes')
     .data(data)
     .enter()
     .append(function(d) {
       var out = d.sex == 1 ? "rect" : "circle";
       return document.createElementNS('http://www.w3.org/2000/svg', out);
     })

  g.selectAll("circle")
     .attr("cx", function(d) { return start + margin.left + d.i*space + (d.i+1)*radius; })
     .attr("cy", margin.top + radius/2)
     .attr("r", radius)
     .style("fill", "#555")
     .style("opacity", function(d) { return d.o; });
  g.selectAll("rect")
     .attr("transform", "translate(0," + -radius + ")")
     .attr("x", function(d) { return start + margin.left + d.i*(space + radius); })
     .attr("y", margin.top + radius/2 + strokewidth/2)
     .style("fill", "#fff")
     .style("stroke-width", strokewidth)
     .style("stroke", "#555")
     .attr("width", radius*2 - strokewidth)
     .attr("height", radius*2 - strokewidth);
  return end;
}

var htmlstub = '<html><body><div id="viz"></div></body></html>';

jsdom.env({
  features: { QuerySelector : true }, html: htmlstub,
  done: function(err, window) {
    if (err) throw err;
    if (process.argv.length < 3) {
      console.error("usage: drawLineages.js '1,0,0,0'");
      process.exit(1);
    }
    var data1 = process.argv[2].split(',').map(Number);

    var body = window.document.querySelector('#viz');
    var svg = d3.select(body).append('svg')
                .attr("width", width)
                .attr("height", height)
                .append("g");
    var end = drawNodes(svg, data1, 0, window.document);
    if (process.argv.length == 4) {
      var data2 = process.argv[3].split(',').map(Number);
      drawNodes(svg, data2, end + 4, window.document);
    }

    var svgtag = window.document.querySelector('svg');
    var str = xmlserializer.serializeToString(svgtag);
    console.log(str);
}});

	var fs = require('fs');
	var d3 = require('d3');
	var jsdom = require('node-jsdom');
	var xmlserializer = require('xmlserializer');

	var margin = {top: 2, right: 4, bottom: 2, left: 4};
	var width = 200 - margin.left - margin.right,
	height = 14 - margin.top - margin.bottom;

	function drawNodes(sel, nodes, start, document) {
	data = nodes.map(function(d, i) {
	return {'sex': d, 'i':i, 'o': d < 2 ? 1 : 0};
	});
	var radius = 3, space = 8, strokewidth = 0.5;
	var end = start + margin.left + (radius + space)*(data.length - 1);

	var g = sel.append('g');
	g.append('line')
	.attr({
	'y1': margin.top + radius/2,
	'y2': margin.top + radius/2,
	'x2': function(d) {
	return end;
	},
	'x1': start + margin.left + radius*2 - 1
	})
	.style("stroke", "#555")
	.style("stroke-width", "0.6")


	g.selectAll('.nodes')
	.data(data)
	.enter()
	.append(function(d) {
	var out = d.sex == 1 ? "rect" : "circle";
	return document.createElementNS('http://www.w3.org/2000/svg', out);
	})

	g.selectAll("circle")
	.attr("cx", function(d) { return start + margin.left + d.ispace + (d.i+1)radius; })
	.attr("cy", margin.top + radius/2)
	.attr("r", radius)
	.style("fill", "#555")
	.style("opacity", function(d) { return d.o; });
	g.selectAll("rect")
	.attr("transform", "translate(0," + -radius + ")")
	.attr("x", function(d) { return start + margin.left + d.i*(space + radius); })
	.attr("y", margin.top + radius/2 + strokewidth/2)
	.style("fill", "#fff")
	.style("stroke-width", strokewidth)
	.style("stroke", "#555")
	.attr("width", radius*2 - strokewidth)
	.attr("height", radius*2 - strokewidth);
	return end;
	}

	var htmlstub = '<html><body><div id="viz"></div></body></html>';

	jsdom.env({
	features: { QuerySelector : true }, html: htmlstub,
	done: function(err, window) {
	if (err) throw err;
	if (process.argv.length < 3) {
	console.error("usage: drawLineages.js '1,0,0,0'");
	process.exit(1);
	}
	var data1 = process.argv[2].split(',').map(Number);

	var body = window.document.querySelector('#viz');
	var svg = d3.select(body).append('svg')
	.attr("width", width)
	.attr("height", height)
	.append("g");
	var end = drawNodes(svg, data1, 0, window.document);
	if (process.argv.length == 4) {
	var data2 = process.argv[3].split(',').map(Number);
	drawNodes(svg, data2, end + 4, window.document);
	}

	var svgtag = window.document.querySelector('svg');
	var str = xmlserializer.serializeToString(svgtag);
	console.log(str);
	}});