templates/visual_garden.html

{% extends "base.html" %}

{% load sefaria_tags static %}


{% block title %}{{ title }}{% endblock %}
{% block head %}
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
    <script src="{% static 'js/lib/dc.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/dc.css' %}" />
{%  endblock %}

{% block css %}
    #visualGardenPage.static .inner{
        max-width:1200px;
        padding-top: 82px;
    }
    #languageToggle {
        display: inline;
    }
    #languageToggle #bilingual {
        display: none;
    }
{% endblock %}

{% block content %}
<div id="visualGardenPage" class="container static biReady">
    <div class="inner">
        <h1>
            <span class='int-en'>{{ title }}</span>
            <span class='int-he'>{{ heTitle }}</span>
        </h1>
        <h2>
            <span class='int-en'>{% autoescape off %}{{ subtitle }}{% endautoescape %}</span>
            <span class='int-he'>{% autoescape off %}{{ heSubtitle }}{% endautoescape %}</span>
        </h2>
        <div id="data-count"></div>
        <div class="section control-results-container">
            <div id="top-controls"></div>
            <div id="controls">
                <div id="timeline-chart">
                    <div style="height: 30px;">
                        <span class='reset' style='display: none;'>
                            <span class="int-en">Current filter:</span>
                            <span class="int-he">מסונן לפי:</span>
                            <span class='filter'></span>
                        </span>
                        <a class='reset'
                          href='javascript:timeline.filterAll();redraw_garden();'
                          style='display: none;'>
                            <span class="int-en">reset</span>
                            <span class="int-he">&nbsp;אפס</span>
                        </a>
                    </div>
                </div>
                <div id="map-chart">
                    <div style="height: 30px;">
                        <span class='reset' style='display: none;'>
                            <span class="int-en">Current filter:</span>
                            <span class="int-he">מסונן לפי:</span>
                            <span class='filter'></span>
                        </span>
                        <a class='reset'
                          href='javascript:mapchart.filterAll();redraw_garden();'
                          style='display: none;'>
                            <span class="int-en">reset</span>
                            <span class="int-he">&nbsp;אפס</span>
                        </a>
                    </div>
                </div>

            </div>
            <div id="results">
                <div id="sort-container">
                    <label for="sort-select" id="sort-label">
                        <span class="int-en">Sort By:</span>
                        <span class="int-he">מיין לפי:</span>
                    </label>
                    <select name="sort-select" id="sort-select" size=1 style="direction: ltr;">

                    </select>
                </div>
                <div class="paging-block top-paging-block">
                    Showing <span class="paging-begin"></span>-<span class="paging-end"></span> of <span class="paging-size"></span>.
                    <input class="prev-btn btn" type="button" value="Prev" onclick="javascript:prev_page()" />
                    <input class="next-btn btn" type="button" value="Next" onclick="javascript:next_page()"/>
                </div>
                <div id="results-container">
                    <table id="results-content">
                    </table>
                </div>
                <div class="paging-block bottom-paging-block">
                    Showing <span class="paging-begin"></span>-<span class="paging-end"></span> of <span class="paging-size"></span>.
                    <input class="prev-btn btn" type="button" value="Prev" onclick="javascript:prev_page(); window.scrollTo(0,0);" />
                    <input class="next-btn btn" type="button" value="Next" onclick="javascript:next_page(); window.scrollTo(0,0);"/>
                </div>
            </div>
        </div>
    <div id="add-to-source-sheet-box"></div>
    </div>
</div>

{% endblock %}

{% block js %}
    <script>
    {% autoescape off %}
        $("#content").removeClass("interface-hebrew").addClass("interface-english"); // Force LTR presentation
        d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};
        var config = {{ config }};
        var places = {{ places }};
        var stops = {{ stops }};
        var startingFilterRows = config.filter_rows ? config.filter_rows: 9;  // Rows presented when top level filters are in collapsed mode
        var numberFilterRows = startingFilterRows;
        var filtersExpanded = false;

        // From colorbrewer
        var color_scales = [
         ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"], // Purples
         ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"], // Blues
         ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"], // Greens
         ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"], // Oranges
         ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]  // Reds
        ];

        stops.forEach(function (d) {
            d.start = (d.start == null || d.start == "") ? null : +d.start; // coerce to number, if it's a number
            d.end = (d.end == null || d.end == "") ? null : +d.end;
        });
        var stopx = crossfilter(stops);
        var all = stopx.groupAll();


        // State and URLs
        function pushHistory(replaceHistory) {
            // Get applied filters on this page, serialize to URL and title, and push to the history stack
            var filters = getFilters();
            //Sefaria.site.track...
            var url;
            var title = document.title.split(", ")[0];
            if (filters) {
                url = window.location.href.split("?")[0] + "?filters=" + encodeURIComponent(JSON.stringify(filters));
                title += ", " + filters
                                .map(function(f) {
                                    if (f.Filter instanceof Array)
                                        {return "(" + f.Filter.join("-") + ")";}
                                    else
                                        {return f.Filter;}
                                })
                                .join(", ");
            } else {
                url = window.location.href.split("?")[0]
            }
            document.title = title;
            if (replaceHistory) {
                history.replaceState({filters: filters, title: title}, title, url);
            } else {
                history.pushState({filters: filters, title: title}, title, url);
            }
        }
        function getFilters() {
            // Get the applied filters from this page
            var filters = [];
            for (var i = 0; i < dc.chartRegistry.list().length; i++) {
                var chart = dc.chartRegistry.list()[i];
                for (var j = 0; j < chart.filters().length; j++){
                    var filter = chart.filters()[j];
                    if(filter instanceof Array) filter = filter.slice(); // Native version carries a huge pike of excess data
                    filters.push({ChartID: chart.chartID(), Filter: filter});
                }
            }
            if (filters.length > 0) {
                return filters;
            }
        }
        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = decodeURIComponent(value);
            });
            return vars;
        }
        function applyFilters(filterObjects) {
            if(filterObjects) {
                // Given a URL serialized form of a set of filters, deserialize and apply
                for (var i = 0; i < filterObjects.length; i++) {
                    var filter = filterObjects[i].Filter;
                    if (filter instanceof Array) filter = dc.filters.RangedFilter(filter[0], filter[1]);
                    dc.chartRegistry.list()[filterObjects[i].ChartID - 1].filter(filter);
                }
            }
            dc.redrawAll();
        }
        function handleStateChange(event) {

            if ("header" in event.state) {
                // Hackily discard react state changes
                history.back();
                return;
            }
            dc.filterAll();
            document.title = event.state.title;
            applyFilters(event.state.filters);
        }
        window.addEventListener('popstate', handleStateChange);


        // Sorting
        function redraw_garden() {
            // Some sort of bug prevents height() resetting from taking in some redraw cases.  A double call takes care of business.
            pushHistory();
            dc.redrawAll();
            dc.redrawAll();
        }
        function set_sort_vars(field, dir, datatype) {
            resultsDir = dir == "DESC" ? d3.descending : d3.ascending;
            resultsDim && resultsDim.dispose();
            // The 20000 here is to coerce all of the numbers into numbers that will sort correctly as strings.
            // Digging down into dc.datagrid, into d3.nest, into d3.map, the integer keys turn into strings
            resultsDim = stopx.dimension(function(d) { return 20000 + d[field]; });
            resultsAccessor = function (d) { return 20000 + d[field]; };
        }

        function resort(field, dir, datatype) {
            set_sort_vars(field, dir, datatype);
            results.dimension(resultsDim)
                .order(resultsDir)
                .sortBy(resultsAccessor)
                .group(resultsAccessor)
                .redraw();
        }

        // build sort options in dom
        // E.g:  <option value="1" selected="selected" data-attr='start' data-dir="ASC" data-type="Int">Date (Asc)</option>
        var option_value = 1,
            default_sort_field,
            default_sort_dir,
            default_sort_type;

        function addSortOption(key, dir) {
            var sortconfig = config.sorts[key];
            var select = $("#sort-select");
            var option = $(document.createElement('option'));
            option.attr("value", option_value)
                .attr("data-attr", key)
                .attr("data-dir", dir)
                .attr("data-type", sortconfig.datatype);
            if(sortconfig.default && sortconfig.default == dir) {
                option.attr("selected", "selected");
                default_sort_field = key;
                default_sort_dir = dir;
                default_sort_type = sortconfig.datatype;
            }
            option.append(sortconfig.en + " (" + dir.charAt(0).toUpperCase() + dir.substr(1).toLowerCase() +")");
            select.append(option);
            option_value++;
        }

        Object.keys(config.sorts).forEach(function(key, index) {
            addSortOption(key, "ASC");
            addSortOption(key, "DESC");
        });

        // Initial sort
        if(default_sort_field) {
            set_sort_vars(default_sort_field, default_sort_dir, default_sort_type);
        } else {
            $("#sort-container").hide();
        }

        $('#sort-select').change(function(){
            var opt = $(this).find(":selected");
            resort(opt.attr("data-attr"), opt.attr("data-dir"), opt.attr("data-type"));
        });
        // End sorting //

        // Core Charts - Timeline, Map, Count, Results
        var timeline = dc.barChart("#timeline-chart");
        var mapchart = dc.geoChoroplethChart("#map-chart");
        var datacount = dc.dataCount("#data-count");
        var results = dc.dataGrid("#results-content");


        var placeDim = stopx.dimension(function(d) { return d.placeKey; });
        var placeGroup = placeDim.group();

        var resultsDim, resultsAccessor, resultsDir;

        datacount
            .dimension(stopx)
            .group(all)
            .html({
                some: '<strong>%filter-count</strong><span class="int-he"> מוצגות מתוך </span><span class="int-en"> selected out of </span>' +
                      '<strong>%total-count</strong><span class="int-he"> תוצאות </span><span class="int-en"> Records </span>' +
                      ' | <a href=\'javascript:dc.filterAll(); redraw_garden();\'\'>' +
                      '<span class="int-he">אפס הכל</span><span class="int-en">Reset All</span></a>',
                all: '<span class="int-en">All records selected. Please click on the graphs to apply filters.</span>'+
                        '<span class="int-he">כל התוצאות מוצגות. אנא לחץ על הגרף כדי לסנן</span>'
            });


        //Timeline
        var tl_extent = d3.extent(stops, function (d) { return d.start; });
        var timeline_bin_size = config.timeline_bin_size || Math.floor((tl_extent[1] - tl_extent[0]) / 20);
        tl_extent[0] -= 50;
        tl_extent[1] += 50;

        var yearDim = stopx.dimension(function(d) { return d.start; }); //!!Using start as the year.
        var yearGroup = yearDim.group(function(d) { return Math.floor(d / timeline_bin_size) * timeline_bin_size });

        // Catch null years, and filter them out from the year group.
        // Otherwise, they show up at year 0.
        // https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups
        function remove_null_year(source_group) {
            return {
                all:function () {
                    return source_group.all().filter(function(d) {
                        return d.key != null;
                    });
                }
            };
        }
        var filteredYearGroup = remove_null_year(yearGroup);

        timeline
            .width(280)
            .height(120)
            .margins({top: 10, right: 10, bottom: 20, left: 30})
            .dimension(yearDim)
            .group(filteredYearGroup)
            .elasticY(true)
            .xUnits(function(start, end, xDomain) { return (end - start) / timeline_bin_size; }) //return  60; }) //Math.abs(end - start) / 10; }) // years in the domain / 40
            .round(dc.round.floor)
            .on('filtered', redraw_garden)
            .x(d3.scale.linear().domain(tl_extent));

        if (config.timeline_scale == "log") {
            timeline.y(d3.scale.pow().domain([0, timeline.yAxisMax()]).range([140,0]).exponent(.5));
        }

        timeline.yAxis().ticks(5, d3.format("d"));
        timeline.xAxis().ticks(5);

        // Filters
        function addFilterElement(config, indx, filter_id) {
            var elem = $('<div id="' + filter_id +'" class="tags-list"> ' +
                '<div class="filter-title">' +
                  '<span class="filter-title-en">' + config.en + '</span>' +
                  //'<span class="he">' + config.he + '</span>' +
                //'</div>' +
                //'<div style="height: 30px;"> ' +
                  '<span class="reset" style="display: none;"> ' +
                    '<span>: </span>' +
                    //'<span class="en">Current filter:</span> ' +
                    //'<span class="he">מסונן לפי:</span> ' +
                    '<!-- <span class="filter"></span> -->' +
                  '</span> ' +
                  '<a class="reset" href="javascript:filter_charts[' + indx +'].filterAll();redraw_garden();" style="display: none;"> ' +
                    '<span class="int-en">(reset)</span> ' +
                    '<span class="int-he">&nbsp;אפס</span> ' +
                  '</a> ' +
                '</div> ' +
            '</div>');
            var filterControlBoxId = (config["position"] == "TOP")?"top-controls":"controls";
            $("#" + filterControlBoxId).append(elem);
            return elem
        }
        function createFilterGroup(filterConfig, key, filterDim) {
            if (filterConfig["logic"] == "OR") {
                return filterDim.group();
            }
            function reduceAdd(p, v) {
                v.tags[key].forEach (function(val, idx) {
                    p[val] = (p[val] || 0) + 1; //increment counts
                });
                return p;
            }

            function reduceRemove(p, v) {
                v.tags[key].forEach (function(val, idx) {
                    p[val] = (p[val] || 0) - 1; //decrement counts
                });
                return p;
            }

            function reduceInitial() {
                return [];
            }

            var groupall = filterDim.groupAll();
            var filterGroup = groupall.reduce(reduceAdd, reduceRemove, reduceInitial).value();
            filterGroup.all = function() {
                var newObject = [];
                for (var key in this) {
                    if (this.hasOwnProperty(key) && this[key] && key != "all" && key != "top") {
                        newObject.push({
                            key: key,
                            value: this[key]
                        });
                    }
                }
                return newObject;
            };

            filterGroup.top = function(k) {
                all = this.all();
                all.sort(function(a, b) {return b.value - a.value});
                return all.slice(0,k)

            };
            return filterGroup;
        }

        function setFilterChartHeight(chart) {
            var newChartSize = chart.group().all().length > numberFilterRows ? numberFilterRows : chart.group().all().length;
            var newFilterHeight = 40 + 20 * newChartSize;
            chart.height(newFilterHeight);
            chart.rowsCap(numberFilterRows);
        }
        function createFilterChart(filterConfig, filter_id, dim, group) {
            var chartSize = group.all().length > numberFilterRows ? numberFilterRows : group.all().length;
            var filterHeight = 40 + 20 * chartSize;
            var filter_chart = dc.rowChart("#" + filter_id);
            var filter_num = +filter_id.split("-")[1];
            filter_chart
                .width(260)
                .height(filterHeight)
                .renderLabel(true)
                .labelOffsetY(10)
                .gap(2)
                .group(group)
                .rowsCap(numberFilterRows)
                .othersGrouper(false)
                .dimension(dim)
                .ordering(function(d) { return -d.value })
                .elasticX(false)
                .transitionDuration(1000)
                .colors(color_scales[(filter_num % color_scales.length)][5])  // d3.scale.ordinal().range(color_scales[(filter_num % color_scales.length)].reverse()))
                .label(function (d) { return d.key })
                .on('preRedraw', setFilterChartHeight)
                .on('filtered', redraw_garden);
            if (filterConfig["logic"] == "AND") {
                filter_chart
                    .filterHandler (function (dimension, filters) {
                        dimension.filter(null);
                        dimension.filterFunction(function (d) {
                            for (var i=0; i < filters.length; i++) {
                                if (d.indexOf(filters[i]) <0) return false;
                            }
                            return true;
                        });
                        return filters;
                    });
            }
            filter_chart.xAxis().tickFormat(d3.format("d"));
            return filter_chart;
        }

        var filter_charts = [];
        var filter_keys = config.filter_order.length ? config.filter_order : Object.keys(config.filters);
        filter_keys.forEach(function(key, index) {
            var indx = filter_charts.length;
            var filter_id = "filter-" + indx;
            var filterConfig = config.filters[key];
            var filterElem = addFilterElement(filterConfig, indx, filter_id);
            var filterDim = stopx.dimension(function (d) {
                var tags = d.tags[key];
                if (tags && tags.length == 1 && tags[0] == "") {
                    return ["Undefined"];  // todo: config default value
                }
                return tags || ["Undefined"];
            });
            var filterGroup = createFilterGroup(filterConfig, key, filterDim);
            filter_charts.push(createFilterChart(filterConfig, filter_id, filterDim, filterGroup));
        });

        // Controls to exand / collapse top filters
        if ($("#top-controls").html().length > 0) {
            $("#top-controls").after(
                    '<div id="top-filter-control"><div id="pull-down-control"><i class="fa fa-caret-down"></i></div><div style="display: none;" id="pull-up-control"><i class="fa fa-caret-up"></i></div></div>'
            );
            $("#top-filter-control").click(toggleFilters);
        }
        function toggleFilters() {
            ((filtersExpanded)?collapseFilters:expandFilters)();
        }
        function expandFilters() {
            filtersExpanded = true;
            var lengths = filter_charts.map(function(chart) { return chart.group().all().length; });
            numberFilterRows = Math.max.apply(Math, lengths);
            filter_charts.forEach(setFilterChartHeight);
            redraw_garden();
            $("#pull-down-control").hide();
            $("#pull-up-control").show();
        }
        function collapseFilters() {
            filtersExpanded = false;
            numberFilterRows = startingFilterRows;
            filter_charts.forEach(setFilterChartHeight);
            redraw_garden();
            $("#pull-down-control").show();
            $("#pull-up-control").hide();
        }

        // Map
        // Unit projection, for getting bounding box of our data
        var projection = d3.geo.mercator()
            .scale(1)
            .translate([0, 0]);
        var path = d3.geo.path()
            .projection(projection);
        var width = 280,
            height = 200,
            b = path.bounds(places),  // [[left, top], [right, bottom]]
            x_extent = Math.abs(b[1][0] - b[0][0]),
            y_extent = Math.abs(b[1][1] - b[0][1]),
            s = (.95 / Math.max(x_extent / width, y_extent / height)),
            t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

        // Update projection with our actual data
        projection
            .scale(s)
            .translate(t)
        ;

        var valueDomain = [0, placeGroup.top(1)[0].value];
        var maxPointRadius = Math.min(width, height) / 30,
            minPointRadius = maxPointRadius / 2;

        var pointScale = d3.scale.linear()
                .domain(valueDomain)
                .range([minPointRadius, maxPointRadius]);

        mapchart.width(width)
            .height(height)
            .projection(projection)
            .dimension(placeDim)
            .group(placeGroup)
            .colors(d3.scale.quantize().range(['#fc4e2a']))//Full scale, from color brewer '#ffffcc','#ffeda0','#fed976', '#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#bd0026','#800026'
            .colorDomain(valueDomain)
            .colorCalculator(function (d) { return d ? mapchart.colors()(d) : '#ccc'; })
            .overlayGeoJson(places.features, "placeLayer", function (d) {
                return d.id;
            })
            .on('filtered', redraw_garden)
            .on('preRedraw', function() { // Hack to force map redraw, so that pointRadius gets computed. http://stackoverflow.com/a/33737638/213042
                mapchart.projection(projection);
            })
            .on('pretransition', function (table) {
                //var zoom_scale = projection.scale() * 2 * Math.PI;
                var tiles = d3.geo.tile()
                    .size([width, height])
                    .scale(s * 2 * Math.PI)
                    .translate(t)
                    ();

                var svg = d3.select("#map-chart svg");
                var raster = svg.insert("g","g");
                var image = raster
                      .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
                    .selectAll("image")
                      .data(tiles, function(d) { return d; });
                image.exit()
                    .remove();

                image.enter().append("image")
                    .attr("xlink:href", function(d) { return "https://stamen-tiles.a.ssl.fastly.net/watercolor/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
                    .attr("width", 1)
                    .attr("height", 1)
                    .attr("x", function(d) { return d[0]; })
                    .attr("y", function(d) { return d[1]; });
            })
            .geoPath().pointRadius(function(feature, index) {
                var r = placeGroup.all().filter(function(item) { return item.key === feature.id; });
                if (r.length == 0) {console.log("No match for " + feature.id); return 0;}
                return (r[0].value == 0)? 0 : pointScale(r[0].value);
            });

        // Results
        sourceSheetAdder = function(event) {
            var data = d3.select($(event.target).parents(".dc-grid-item")[0]).datum();
            var container = document.getElementById('add-to-source-sheet-box');
            var component;
            if (data.ref) {
                component = React.createElement(Sefaria.AddToSourceSheetWindow,
                    {
                        srefs: [data.ref],
                        he: data.heText,
                        en: data.enText,
                        close: function() { ReactDOM.unmountComponentAtNode(container); }
                    }
                );
            } else {
                component = React.createElement(Sefaria.AddToSourceSheetWindow,
                    {
                        he: "<b>" + data.heTitle + "</b><br/>" + data.heText,
                        en: "<b>" + data.title + "</b><br/>" + data.enText,
                        close: function() { ReactDOM.unmountComponentAtNode(container); }
                    }
                );
            }

            ReactDOM.render(component, container);
            $(".addToSourceSheetModal").position({my: "left+20 center", at: "right center", of: $(event.currentTarget)});
        };

        results
            .dimension(resultsDim)
            .group(resultsAccessor)
            .order(resultsDir)
            .sortBy(resultsAccessor)
            //.keyAccessor(resultsAccessor)
            //.ordering(resultsAccessor)
            .on("postRedraw", update_pagination)
            .htmlGroup(function (d) {return "";})
            .html(function(data) {
                return "<div class='result'>" +
                            "<div class='result-ref'>" +
                                "<span class='int-en'>" +
                                    (data.ref ? "<a href='/" + data.ref + (data.enVersionTitle ? "/en/" + data.enVersionTitle:"") + "'>" : "") +
                                        (data.title ? data.title : data.ref) +
                                    (data.ref ? "</a>" : "") +
                                "</span>" +
                                "<span class='int-he'>" +
                                    (data.ref ? "<a href='/" + data.ref + (data.heVersionTitle ? "/he/" + data.heVersionTitle:"") + "'>" : "") +
                                        (data.heTitle ? data.heTitle : data.heRef) +
                                    (data.ref ? "</a>" : "") +
                                "</span>" +
                                '<i class="fa fa-external-link" aria-hidden="true" title="Add to Source Sheet" onclick="return sourceSheetAdder(event);"></i>' +
                            "</div>" +
                            "<div class='result-byline'>" +
                                "<span class='int-en'>" +
                                    (data.authorsEn ? (data.authorsEn + ", ") : "") +
                                    (data.enSubtitle ? (data.enSubtitle + "  ") : "") +
                                    (data.placeNameEn ? data.placeNameEn : "") +
                                    (data.timePeriodEn ? data.timePeriodEn : "") +
                                "</span>" +
                                "<span class='int-he'>" +
                                    (data.authorsHe ? (data.authorsHe + ", ") : "") +
                                    (data.heSubtitle ? (data.heSubtitle + "  ") : "") +
                                    (data.placeNameHe ? data.placeNameHe : (data.placeNameEn ? data.placeNameEn : "")) +
                                    (data.timePeriodHe ? data.timePeriodHe : "") +
                                "</span>" +
                            "</div>" +
                            "<div class='result-text'>" +
                                "<span class='he'>" + (data.heText ? data.heText : data.enText) + "</span>" +
                                "<span class='en'>" + (data.enText ? data.enText : data.heText) + "</span>" +
                            "</div>" +
                        "</div>"
            })
            ;

        // Pagination
        var ofs = 0, pag = 100, total = 0;
        function display_pagination() {
            if (total != stopx.groupAll().value()) {
                reset_page();
                return;
            }
            if (total == 0) {
                $(".paging-block").hide();
            } else {
                $(".paging-block").show();
            }
            d3.selectAll('.paging-begin')
              .text(ofs);
            d3.selectAll('.paging-end')
              .text(Math.min(total,ofs+pag-1));
            d3.selectAll('.prev-btn')
              .attr('disabled', ofs-pag < 0 ? 'true' : null);
            d3.selectAll('.next-btn')
              .attr('disabled', ofs+pag >= total ? 'true' : null);
            d3.selectAll('.paging-size').text(total);
        }
        function update_pagination() {
            results.beginSlice(ofs);
            results.endSlice(ofs+pag);
            display_pagination();
        }
        function reset_page() {
            total = stopx.groupAll().value();
            ofs = 0;
            update_pagination();
            results.redraw();
        }
        function next_page() {
            ofs += pag;
            update_pagination();
            results.redraw();
        }
        function prev_page() {
            ofs -= pag;
            update_pagination();
            results.redraw();
        }
        display_pagination();

        // End pagination

        dc.renderAll();
        var urlVars = getUrlVars();
        if ("filters" in urlVars) {
            applyFilters(JSON.parse(urlVars["filters"]));
            pushHistory(true);
        }

    {% endautoescape %}
    </script>
{% endblock %}