Как загрузить очень большой файл в мою диаграмму D C. js?

Question

У меня есть файл .csv, который содержит данные о землетрясениях в Новой Зеландии.

У меня есть карта 01, 03 графика и таблица 01, которые содержат эти данные. Которые делятся на количество событий на величину, количество событий на глубину (км) и количество событий в час.

Файл .csv содержит 15 441 строку и выдает ошибку «1005 *». Что странно, потому что я использую D C. js и перекрестный фильтр, и теоретически эта библиотека используется для обработки миллионов данных.

Прикрепленное изображение с ошибкой, которую вы выдаваете:

Если я беру 10 000 строк из этого файла, код работает нормально, но проблема в том, что мне нужен весь файл. "/

Я размещаю свой код здесь, так как файл .csv очень большой, я не смог смоделировать его на Stackblitz, CodePen, Plunker, JSFiddle и т. Д. c. Я извиняюсь.

Этот код я пытаюсь сделать, как эта ссылка: https://alexandrecajamos.github.io/datavis-course/2017_11_20/earthquakes.html

Файл earthquakes.csv, если вы можете скачать его, находится здесь: https://github.com/bernalvinicius/dc-charts/blob/master/earthquakes.csv

Вот мой код, спасибо заранее.

var magnitudeChart = dc.barChart('#barMagnitudeChart');
var depthChart = dc.barChart('#barDepthChart');
var timeChart = dc.lineChart('#lineTimeChart');
var dataTable = dc.dataTable('#myTable');

var markers = d3.map();
var markerLayer = L.layerGroup();
var idDimension, idGrouping;

var map = L.map('map').setView([-41.05, 172.93], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 17
}).addTo(map);
map.on('moveend', updateFilters);

var url = 'https://gist.githubusercontent.com/bernalvinicius/64aa48728dc717c71906742ca2833d17/raw/5244a987b974e8352809dc16e98926e2c6889ba1/earthquakes.csv';    
d3.csv(url).then(function (data) {

    data.forEach(function (d) {
        d.dtg = d.origintime.substr(0, 19);
        d.lat = +d.latitude;
        d.long = +d.longitude;
        d.mag = d3.precisionRound(+d.magnitude, 1);
        d.depth = d3.precisionRound(+d.depth, 0);
        var size = d.mag * 10000;
        var circle = L.circle([d.lat, d.long], d.mag * 5000, {
            color: '#fd8d3c',
            weight: 2,
            fillColor: '#fecc5c',
            fillOpacity: 0.5
        });
        circle.bindPopup("Magnitude: " + d.mag + "<br>Time: " + d.dtg);
        circle.publicid = d.publicid;
        markers.set(d.publicid, circle);
    });

    console.log(data);

    var myCrossfilter = crossfilter(data);

    idDimension = myCrossfilter.dimension(function (d) {
        return d.publicid;
    });
    idGrouping = idDimension.group(function (id) {
        return id;
    });

    var dateDimension = myCrossfilter.dimension(function (d) {
        return d.dtg;
    });

    var magDimension = myCrossfilter.dimension(function (d) {
        return d.mag;
    });
    var magDimensionCount = magDimension.group();

    var depthDimension = myCrossfilter.dimension(function (d) {
        return d.depth;
    });
    var depthDimensionCount = depthDimension.group();

    var hourDimension = myCrossfilter.dimension(function (d) {
        return d3.timeHour(d.dtg);
    });
    var hourDimensionCount = hourDimension.group();

    magnitudeChart
        .width(480)
        .height(150)
        .margins({ top: 10, right: 10, bottom: 20, left: 40 })
        .dimension(magDimension)
        .group(magDimensionCount)
        .transitionDuration(500)
        .centerBar(true)
        .gap(56)
        .x(d3.scaleLinear().domain([0, 8]))
        .elasticY(true)
        .on("filtered", function (chart, filter) {
            updateMarkers();
        });

    depthChart
        .width(600)
        .height(150)
        .margins({ top: 10, right: 10, bottom: 20, left: 40 })
        .dimension(depthDimension)
        .group(depthDimensionCount)
        .transitionDuration(500)
        .centerBar(true)
        .gap(1)
        .x(d3.scaleLinear().domain([0, 100]))
        .elasticY(true)
        .on("filtered", function (chart, filter) {
            updateMarkers();
        });

    timeChart.width(960)
        .height(150)
        .transitionDuration(500)
        .margins({ top: 10, right: 10, bottom: 20, left: 40 })
        .dimension(hourDimension)
        .group(hourDimensionCount)
        .brushOn(false)
        .elasticY(true)
        .x(d3.scaleTime().domain(d3.extent(data, function (d) { return d.dtg; })));

    dataTable
        .width(960)
        .height(800)
        .dimension(dateDimension)
        .group(function (d) {
            return "Earthquake Table";
        })
        .size(10)
        .columns([
            function (d) { return d.dtg; },
            function (d) { return d.mag; },
            function (d) { return d.depth; },
            function (d) { return d.lat; },
            function (d) { return d.long; }])
        .sortBy(function (d) { return d.dtg; })
        .order(d3.ascending);

    dc.renderAll();
    updateMarkers();

});

function updateMarkers() {
    var ids = idGrouping.all();
    var todisplay = new Array(ids.length);
    var mc = 0;
    for (var i = 0; i < ids.length; i++) {
        var tId = ids[i];
        if (tId.value > 0) {
            todisplay[mc] = markers.get(tId.key);
            mc = mc + 1;
        }
    }
    todisplay.length = mc;
    markerLayer.clearLayers();
    if (map.hasLayer(markerLayer)) {
        map.removeLayer(markerLayer);
    }
    markerLayer = L.layerGroup(todisplay).addTo(map);
}

function updateFilters() {
    var ids = idGrouping.all();
    var visibleMarkers = new Array(ids.length);
    var cout = 0;

    markerLayer.eachLayer(function (layer) {
        if (map.getBounds().contains(layer.getLatLng())) {
            visibleMarkers[cout] = layer.publicid;
            cout++;
        }
    });
    markerLayer.length = cout;

    idDimension.filterFunction(function (d) {
        return visibleMarkers.indexOf(d) > -1;
    });
    dc.redrawAll();
}

<head>
    <style>
        #map {
            width: 650px;
            height: 450px;
        }
    </style>

    <title>Earthquake Data</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>

    <script src="https://d3js.org/d3.v5.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.8/dc.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

</head>

<body>

    <div class='container-fluid'>
        <h3>Earthquakes in New Zealand</h3>

        <div id="map"></div>
        <div id="barMagnitudeChart">
            <span>
                <h4> Number of Events by Magnitude
                    <a href="javascript:dc.magnitudeChart.filterAll(); dc.redrawAll();" style="display: none;">Reset</a>
                </h4>
            </span>
        </div>
        <div id="barDepthChart">
            <span>
                <h4> Events by Depth (km)
                    <a href="javascript:dc.depthChart.filterAll(); dc.redrawAll();" style="display: none;">Reset</a>
                </h4>
            </span>
        </div>
        <div id="lineTimeChart">
            <h4> Events per hour </h4>
        </div>
        <table class="table table-hover" id="myTable">
            <thead>
                <tr class="header">
                    <th>DTG</th>
                    <th>Magnitude</th>
                    <th>Depth</th>
                    <th>Latitude</th>
                    <th>Longitude</th>
                </tr>
            </thead>
        </table>

    </div>
</body>