Django heatmap d3.js передача возвращенных данных из поиска

я создаю репозиторий с возможностью поиска, который отображает heatmap после завершения поиска в django (windows) и postgresql. мой код для поиска не используется в HTML.

views.py

def search_result(request):
    if request.method == "POST":
        ChemSearched = request.POST.get('ChemSearched')
        tarname = Bindll.objects.filter(targetnameassignedbycuratorordatasource__contains=ChemSearched)[:10]

        return render(request, 'Search/search_result.html',
            {'ChemSearched':ChemSearched,'tarname':tarname})
    else:
        return render(request, 'Search/search_result.html',{})

Searchresults.html

...

                <br/><br/><br/><br/>
        <strong><h1>{% if ChemSearched %}
            <script>


            var margin = {top: 30, right: 30, bottom: 30, left: 30},
              width = 450 - margin.left - margin.right,
              height = 450 - margin.top - margin.bottom;


            var svg = d3.select("#my_dataviz")
            .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
            .append("g")
              .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");
             {% for Bindll in tarname %}


                var myGroups = [  "{{ Bindll }}"  ]
                var myVars = [  "{{ Bindll.ki_nm }}"  ]
             {% endfor %}
               


            var x = d3.scaleBand()
              .range([ 0, width ])
              .domain(myGroups)
              .padding(0.01);
            svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x))


            var y = d3.scaleBand()
              .range([ height, 0 ])
              .domain(myVars)
              .padding(0.01);
            svg.append("g")
              .call(d3.axisLeft(y));


            var myColor = d3.scaleLinear()
              .range(["white", "#69b3a2"])
              .domain([1,100])


            d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {

              svg.selectAll()
                  .data(data, function(d) {return d.group+':'+d.variable;})
                  .enter()
                  .append("rect")
                  .attr("x", function(d) { return x(d.group) })
                  .attr("y", function(d) { return y(d.variable) })
                  .attr("width", x.bandwidth() )
                  .attr("height", y.bandwidth() )
                  .style("fill", function(d) { return myColor(d.value)} )

            })

        </script>                   
                        <br>
                        {% for Bindll in tarname %}
                            {{ Bindll }}--{{ Bindll.ki_nm }}-{{ Bindll.ic50_nm }} - {{ Bindll.kd_nm  }} - {{ Bindll.ec50_nm }} - <br>

                        {% endfor %}

                    {% else %}
                                <strong>No Entry</strong>
                        
                {% endif %}

Никогда раньше не использовал webs, так что любая помощь, почему график показывает только один элемент, пробовал использовать цикл for для добавления значений в список, не сработало. но он печатает вполне нормальные результаты, как вы можете подсказать мне, что я делаю неправильно, чтобы тепловая карта показывала мои результаты. Спасибо

var myGroups= data.map(d=>d.group).filter((item, i, ar) => ar.indexOf(item) === i),
    myVars = data.map(d=>d.variable).filter((item, i, ar) => ar.indexOf(item) === i);