filter.js

const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');

class FilterComponent extends D3Component {

  initialize(node, props) {

    // instead of adding an svg, add a canvas
    var canvas = d3.select(node).append("canvas")
      .attr("width", ...)
      .attr("height", ...);

    this.context = canvas.node().getContext("2d");
  }

  update(props) {
    // check if the "filter" prop changed
    if (props.filter !=== this.props.filter) {
      switch(props.filter) {
        case 'horizontal_sobel':
          // you can use
          // this.context here to 
          // update the canvas
          break;
        case 'vertical_sobel':
          break;
        case 'sobel':
          break;
        case 'laplacian':
          break;
        case 'canny':
          break;
      }
    }
  }
}

module.exports = FilterComponent;