d3p5.js

// This is a concept for integrating D3.js into p5.js. The idea is to modify
// D3 to accept p5.js commands to provide custom renderings on canvas. D3.js
// does not specialize in canvas manipulation, which is where p5.js excels.

// element definition will be executed once per D3 element. Probably using something like .call().
function elementDefinition(el, i, ctx) {
  rect(el.w, el.h);
  // p5js code goes here
}

function setup() {
  width = 680;
  height = 200;
  var c = createCanvas(width, height);
  var data = [{color: "red", width: 10},{color: "green", width: 20},{color: "blue", width: 5}]

  // register the custom element along with its custom draw function.
  d3.registerP5Element('p5renderedElement', elementDefinition);

  // create a d3 join
  d3Elements = d3.selectAll('p5renderedElement')
    .data(data)
    .enter()
    .append('p5renderedElement') //custom element!
    .attr('radius', function(d,i) { return i*3;})
    .attr('spikes', function(d,i) { return Math.random()*30;})
}

function draw() {
  background(255);
  d3Elements.render(); // .render() executes the draw function for all elements.
}

function mousePressed() {
  // modify the d3 join, but nothing is rendered
  d3Elements
    .attr('inner-radius', function(d,i) { return i*8;})
    .attr('spikes', function(d,i) { return Math.random()*30;})
}