How to use the branca.element.Div function in branca

{% if this.order %}.ordering(function (d) {
                    var out = null;
                    var order={{this.order}};
                    for (var j=0;j

}
            
        {% endmacro %}
        {% macro html(this, kwargs) %}
            <a class="{{this.class_}} reset-filters" id="{{this.get_name()}}">{{this.html}}</a>
        {% endmacro %}
        {% macro script(this, kwargs) %}
            d3.selectAll('.reset-filters').on('click', function () {
                dc.filterAll();
                dc.renderAll();
                });
        {% endmacro %}
        """)


class GeoChoroplethFilter(Div):
    """TODO docstring here
    Parameters
    ----------
    """
    def __init__(self, crossfilter, column, geojson, key_on='feature.properties.name',
                 name="", width=150, height=150, inner_radius=20,
                 weight=None, order=None, elastic_x=True, projection=None,
                 colors=None, **kwargs):
        super(GeoChoroplethFilter, self).__init__(width=width, height=height, **kwargs)
        self._name = 'GeoChoroplethFilter'

        self.crossfilter = crossfilter
        self.column = column
        self.geojson = geojson
        self.key_on = key_on
        self.name = name

.columns([
                  {% for col in this.columns %}
                  function (d) { return d["{{col}}"]; },
                  {% endfor %}
                  ])
                {%if this.sort_by %}.sortBy(dc.pluck('{this.sort_by}'))
                {%if this.ascending %}.order(d3.ascending){% else %}.order(d3.descending){% endif %}
                {% endif %}
                .on('renderlet', function (table) {
                    table.select('tr.dc-table-group').remove();
                    });
        {% endmacro %}
        """)


class CountFilter(Div):
    def __init__(self, crossfilter, html_template="{filter}/{total}", **kwargs):
        """TODO docstring here
        Parameters
        ----------
        """
        super(CountFilter, self).__init__(**kwargs)
        self._name = 'CountFilter'

        self.crossfilter = crossfilter
        self.html_template = html_template

        self._template = Template(u"""
        {% macro header(this, kwargs) %}
            <style> #{{this.get_name()}} {
                {% if this.position %}position : {{this.position}};{% endif %}
                {% if this.width %}width : {{this.width[0]}}{{this.width[1]}};{% endif %}</style>

name='d3js')
        figure.header.add_child(
            JavascriptLink("https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"),  # noqa
            name='crossfilterjs')
        figure.header.add_child(
            JavascriptLink("https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.20/dc.js"),
            name='dcjs')
        figure.header.add_child(
            JavascriptLink("https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"),
            name='leaflet')
        figure.header.add_child(
            JavascriptLink("https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"),  # noqa
            name='underscorejs')


class PieFilter(Div):
    def __init__(self, crossfilter, column, name="", width=150, height=150, inner_radius=20,
                 weight=None, order=None, colors=None, label=None, **kwargs):
        """TODO docstring here
        Parameters
        ----------
        """
        super(PieFilter, self).__init__(width=width, height=height, **kwargs)
        self._name = 'PieFilter'

        self.crossfilter = crossfilter
        self.column = column
        self.name = name
        self.width = width
        self.height = height
        self.inner_radius = inner_radius
        self.order = order

.margins({{this.margins}})
                .xAxis()
                  .tickValues({{this.get_name()}}.ticks)
                  .tickFormat(function(x){
                      {%if this.time_format %}
                      var dateformat = d3.time.format("{{this.time_format}}");
                      return dateformat(new Date(x*{{this.get_name()}}.groupby));
                      {% else %}
                      return x*{{this.get_name()}}.groupby;
                      {% endif %}
                      });
        {% endmacro %}
        """)  # noqa


class TableFilter(Div):
    def __init__(self, crossfilter, columns, size=10, sort_by=None, ascending=True, **kwargs):
        """TODO docstring here
        Parameters
        ----------
        """
        super(TableFilter, self).__init__(**kwargs)
        self._name = 'TableFilter'

        self.crossfilter = crossfilter
        self.columns = columns
        self.sort_by = sort_by
        self.ascending = ascending
        self.size = size

        self._template = Template(u"""
        {% macro header(this, kwargs) %}

{% if this.order %}.ordering(function (d) {
                    var out = null;
                    var order={{this.order}};
                    for (var j=0;j

filter='<span class="filter-count"></span>',
                    total='<span class="total-count"></span>'
                    )}}
            
        {% endmacro %}
        {% macro script(this, kwargs) %}
            var {{this.get_name()}} = {};
            {{this.get_name()}}.dataCount = dc.dataCount("#{{this.get_name()}}")
                .dimension({{this.crossfilter.get_name()}}.crossfilter)
                .group({{this.crossfilter.get_name()}}.crossfilter.groupAll()
                );
        {% endmacro %}
        """)


class ResetFilter(Div):
    def __init__(self, html="Reset all", **kwargs):
        """TODO docstring here
        Parameters
        ----------
        """
        super(ResetFilter, self).__init__(**kwargs)
        self._name = 'ResetFilter'

        self.html = html

        self._template = Template(u"""
        {% macro header(this, kwargs) %}
            <style> #{{this.get_name()}} {
                {% if this.position %}position : {{this.position}};{% endif %}
                {% if this.width %}width : {{this.width[0]}}{{this.width[1]}};{% endif %}
                {% if this.height %}height: {{this.height[0]}}{{this.height[1]}};{% endif %}</style>

# -*- coding: utf-8 -*-
"""
Crossfolium
-----------

"""
from jinja2 import Template
import json

from branca.element import Figure, JavascriptLink, CssLink, Div, MacroElement


class Crossfilter(Div):
    def __init__(self, data, **kwargs):
        """Create a Crossfilter

        Returns
        -------
        Folium Crossfilter Object

        """
        super(Crossfilter, self).__init__(**kwargs)
        self._name = 'Crossfilter'

        self.data = data

        crossfilter_def = MacroElement()
        crossfilter_def._template = Template(("""
            {% macro script(this, kwargs) %}

Example:
        >>> fig.add_subplot(3,2,5)
        # Create a div in the 5th cell of a 3rows x 2columns
        grid(bottom-left corner).
        """
        width = 1./y
        height = 1./x
        left = ((n-1) % y)*width
        top = ((n-1)//y)*height

        left = left+width*margin
        top = top+height*margin
        width = width*(1-2.*margin)
        height = height*(1-2.*margin)

        div = Div(position='absolute',
                  width='{}%'.format(100.*width),
                  height='{}%'.format(100.*height),
                  left='{}%'.format(100.*left),
                  top='{}%'.format(100.*top),
                  )
        self.add_child(div)
        return div