plot-y-axis.html

<link rel="import" href="../polymer/polymer.html">

<dom-module id="plot-y-axis">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
      }

      #y_axis {
        width: 100%;
        height: 100%;
        display: block;
        background-color: transparent !important;
        z-index: 1;
      }

    </style>

    <div id="y_axis"></div>
    <content></content>
  </template>

  <script>
    Polymer({
      is: 'plot-y-axis',

      properties: {
        ymin: {
          type: Number,
          value: -1
        },
        ymax: {
          type: Number,
          value: 1
        },
        displayAxis: {
          type: Boolean,
          value: true
        }
      },

      computeXMin: function(){
        return this.root.host.parentNode.xmin;
      },
      computeXMax: function(){
        return this.root.host.parentNode.xmax;
      },

      attached: function(){
        let w = Polymer.dom(this.root).node.host.offsetWidth;
        let h = Polymer.dom(this.root).node.host.offsetHeight;

        var y_scale = d3.scaleLinear()
                      .domain([this.ymin, this.ymax])
                      .range([this.root.host.parentNode.height, 0]);

        var svg = d3.select(this.$.y_axis)
          .append("svg")
          .attr("width", w)
          .attr("height", h)
          .append("g")
          .attr("transform", "translate(25, 15)") // Just in line with plots
          .call(d3.axisLeft(y_scale)); // Just add the damn scale
      }
    });
  </script>
</dom-module>