// An example custom Chiasm component that draws a colored rectangle using D3.js and SVG.
function ColoredRectangle() {

  // Construct a Chiasm component instance,
  // specifying default values for public properties.
  var my = ChiasmComponent({

    // The color of the rectangle, a CSS color string.
    color: "white"

  });

  // Expose a div element that will be added to the Chiasm container.
  // This is a special property that chiasm-layout looks for.
  my.el = document.createElement("div");

  // Create an SVG DOM element using D3 and append it to the div.
  var svg = d3.select(my.el).append("svg");

  // Add a background rectangle to the SVG element.
  var rect = svg.append("rect");

  // Set the rectangle color to be the configured color.
  my.when("color", function (color){
    rect.attr("fill", color);
  });

  // Respond to dynamic width and height.
  // "box" is a special property set by chiasm-layout.
  my.when("box", function (box) {

    // Set the size of the SVG element.
    svg
      .attr("width", box.width)
      .attr("height", box.height);

    // Set the size of the background rectangle.
    rect
      .attr("width", box.width)
      .attr("height", box.height);

  });

  return my;
}