Django heatmap d3.js passing returned data from search-CodePudding

am creating a searchable repository that displays heatmap after the search is completed in django (windows) and postgresql. my code for the search is not used to 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 %}

never used webs before so any help why the chart is only showing one element, tried using for loop to append the values in a list did not work but its printing quite fine the results, any way you can guide me on what am doing wrong, to make the heatmap show my results. Thanks

CodePudding user response：

Can you build your scale domains this way instead, and see if it works. I don't see the immediate problem outside of a possible mistake in the domains:

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);