via Washington Post

via Washington Post

Who works in the 'Widgets' department and its sub-departments?

start department = node:Department(name='Widgets')
match employee -[:works_in]-> sub_department
      -[0..*:parent]-> department
return employee
var circles = view.selectAll("circle.node") // selection query
  .data(nodes); // nodes is the model

circles.exit().remove();

circles.enter().append("circle") // tag matches selection query
  .attr("class", "node"); // class matches selection query
  // other attributes that will not change when the model changes

circles
  .attr("cx", function(node) { return node.x; })
  .attr("cy", function(node) { return node.y; })
  .attr("r", function(node) { return node.radius; });
  // other attributes that may change when the model changes

var tables = [
  { rows: [
    { cells: [ { content: 'A' }, { content: 'B' } ] },
    { cells: [ { content: 'C' }, { content: 'D' } ] }
  ] },
  { rows: [
    { cells: [ { content: '1' }, { content: '2' }, { content: '3' } ] },
    { cells: [ { content: '4' }, { content: '5' }, { content: '6' } ] },
    { cells: [ { content: '7' }, { content: '8' }, { content: '9' } ] }
  ] }
];

var tableSelection = d3.select( "#nested_example" ).selectAll( "table" )
  .data(tables);

tableSelection.exit().remove();

tableSelection.enter().append("table");

var rowSelection = tableSelection.selectAll("tr")
  .data(function(table) { return table.rows; });

rowSelection.exit().remove();

rowSelection.enter().append("tr");

var cellSelection = rowSelection.selectAll("td")
  .data(function(row) { return row.cells; });

cellSelection.exit().remove();

cellSelection.enter().append("td");

cellSelection.text(function(cell) { return cell.content; });
function identity(d) { return d; }

function singleton(d) { return [d]; }
textDimensions.measure = function ( text, styleSource ) {
  var fontSize = styleSource.style( "font-size" );
  var fontFamily = styleSource.style( "font-family" );
  var canvasSelection = d3.select("#textMeasuringCanvas").data([this]);
  canvasSelection.enter().append("canvas")
    .attr("id", "textMeasuringCanvas");

  var canvas = canvasSelection.node();
  var context = canvas.getContext("2d");
  context.font = "normal normal normal " + fontSize + "/normal " + fontFamily;
  return context.measureText(text).width;
};

Thanks for listening!

Slides: http://www.apcjones.com/talks/2013-06-11_D3_London/

Visual graph editor: http://www.apcjones.com/arrows/

Graph diagram library: https://github.com/apcj/arrows

Alistair Jones
@apcj
alistair.jones@neotechnology.com