Как показать данные между двумя диапазонами, используя plotly.js

Question

Я хотел бы показать данные по линейному графику.Данные имеют три столбца, т.е.position и position_value.Пример данных показан ниже (файл CSV).

scaffold,position,depth
NC_000913.3,1,1
NC_000913.3,2,2
NC_000913.3,3,2
NC_000913.3,4,2
NC_000913.3,5,2
NC_000913.3,6,2
NC_000913.3,7,2
NC_000913.3,8,2
NC_000913.3,9,2
NC_000913.3,10,2
.....
.....
NC_000913.3,1000990,4
NC_000913.3,1000991,1

Я хочу создать линейную диаграмму, как показано ниже:

Теперь мне нужно показать данные между двумя конкретными диапазонами, так как данные очень большие по размеру.например, в некоторых случаях позиции варьируются от 100 до 400 тыс., и я буду показывать данные от 4000 до 8000.

Я использую plotly.js в моем PHP-интерфейсе для создания графика,

Моя попытка

var rawDataURL = 'coverage_short.csv';
var xField = 'position';
var yField = 'depth';

Plotly.d3.csv(rawDataURL, function(err, rawData) {
            if(err) throw err;

            var data = prepData(rawData);
            var layout = {
                title: '',
                xaxis: {

                    rangeslider: {}
                },
                yaxis: {
                    fixedrange: true
                }
            };

            Plotly.plot('graph', data, layout);
        });

        function prepData(rawData) {
            var x = [];
            var y = [];

            rawData.forEach(function(datum, i) {

                x.push(datum[xField]);
                y.push(datum[yField]);
            });

            return [{
                mode: 'lines',
                x: x,
                y: y
            }];
        }

Приведенный выше код имеет возможность указать определенный диапазон для визуализации.Хотя после загрузки у него есть опция слайдера.Я хотел бы представить функцию диапазона при загрузке графика, и я считаю, что это улучшит скорость загрузки данных.

Как ввести функцию диапазона в приведенном выше коде?