ScaleOrdinal not linking colors properly

Community Help
1

I open this thread because i started learning D3js but i have a problem using the scaleOrdinal function on my website. As you can see from the screenshot below the numbers are not linked properly to the colors i want displayed (i.e. the highest number has the second lightest color).

Screenshot from 2022-10-01 22-26-27
Screenshot from 2022-10-01 22-26-271880×681 94.9 KB

HTML

<div class="row justify-content-center flex-wrap">
        <div class="col col-lg-9 tablebox mb-4">
            <table id="postings-table">
                <th>Postings rank</th>
                <th>User name</th>
                <th>User code</th>
                <th>Grade</th>
                <th>Documents loaded</th>
                <th>Postings loaded</th>
                <% for (let row of firstResults) {%> 
                    <tr>
                        <td><%= row.postings_rank %></td>
                        <td><%= row.fullname.slice(0,26) %></td>
                        <td><a href="<%=`/postings?glcode=&description=&startregdate=&endregdate=&starteffdate=&endeffdate=&costcenter=&docnum=&usercode=${row.user_code}&acccenter=&ordernum=&paymode=&supplcode=&countrycode=&fs_pos=`%>"><%= row.user_code %></a></td>
                        <td><%= row.grade_description.slice(0,21) %></td>
                        <td><%= Number(row.doc_count).toLocaleString("it-IT", {maximumFractionDigits:0}) %></td>
                        <td><%= Number(row.postings_count).toLocaleString("it-IT", {maximumFractionDigits:0}) %></td>
                    </tr>
                <% } %> 
            </table>
        </div>
    </div>

JS

const color_scale = d3.scaleOrdinal().range(['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac']).domain(d3.extent(firstResults, d => d.postings_count));

 d3.selectAll("#postings-table td:last-of-type")
     .data(firstResults).style("background-color", (d, i, n) => color_scale(d.postings_count));

Can you please tell me what am i doing wrong? I have really no idea why the colors are not linked properly.

2

It looks like you’ve already got a perfectly acceptable answer on StackOverflow:

3

I agree, that answer is exactly what i was looking for