cjrd

directed-graph-creator

Interactive tool for creating directed graphs, created using d3.js.

Demo: http://bl.ocks.org/cjrd/6863459

Operation:

• drag/scroll to translate/zoom the graph

cjrd

(function(d3){
  // full screen
  var docEl = document.documentElement,
      bodyEl = document.getElementsByTagName('body')[0];
  var width = window.innerWidth || docEl.clientWidth || bodyEl.clientWidth,
      height = window.innerHeight|| docEl.clientHeight|| bodyEl.clientHeight; 

  var svg = d3.select("body")
        .append("svg")
        .attr("width", width)

cjrd

.diff.line.base:not(.keep) .line.wrapper:not(.empty) .left.line.content,
.diff.line.whitespace:not(.keep) .line.wrapper:not(.empty) .left.line.content {
  background-color: #FFF7F7;  /* rgba(91, 220, 114, 0.05) on white */
}
.diff.line.base .left.line.content .delta, .diff.line.whitespace .left.line.content .delta {
  background-color: rgba(240, 92, 92, 0.05);
}
.one.column.diff .diff.line.base .left.line.content .delta,
.one.column.diff .diff.line.whitespace .left.line.content .delta {
  background-color: rgba(240, 92, 92, 0.15);

cjrd

.diff.line.whitespace:not(.keep) .line.wrapper:not(.empty) .line.content {
  background-color: white !important;
}
.diff.line.whitespace .line.content .delta {
  background-color: transparent !important;
}