score:0

Loading time before was taking more than 2 minutes before. I removed a few columns from the CSV and decided to add a loading gif to the HTML page since making this instantaneous was out of the question in terms of what I wanted to do

What really helped reduce the load time was loading the d3 data object directly into the datable instead of putting it in the DOM. I was getting page unresponsive in the latter but that seemed to have gone away in the former.

I'm using d3 version 3 instead of version 6 since the syntax seems cleaner and more familiar to me. If you want to use d3 version 6 then you would need to watch out for the API differences (look at https://jsfiddle.net/gndv6rq0/1 for reference)

What I ended up with was the following script

function hideLoader() {
$('#loading').hide();
}

setTimeout(hideLoader, 80 * 1000);

var tabulate = function (columns) {
var table = d3.select('body').select('table')
var thead = table.append('thead')

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
    .text(function (d) {
        return d
        })

    return table;
}
d3.csv("All_engineers_reduced.csv", function (data) {
    var columns = d3.keys(data[0]);
    tabulate(columns);
    $('#example').DataTable({
        data: data,
        columns: [
        {
            "data": "Engineer_ID"
        },
        {
            "data": "Arabic_Names"
        },
        {
            "data": "Latin_Names"
        },
        {
            "data": "Field_ID"
        },
        {
            "data": "SubField_ID"
        },
        {
            "data": "Field"
        },
        {
            "data": "SubField"
        }

    ],
    processing: true,
        language: {
            processing: "<img src='https://media1.giphy.com/media/feN0YJbVs0fwA/giphy.gif'>"
        }
    });
    hideLoader();
})

The loaded libraries are still

    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" />

You can see the final result in the link below https://ebrahimkaram.github.io/LebaneseEngineers/


Related Query

More Query from same tag