1 заметка с тегом

svg

Как симулятор лифтов рисует графики

Продолжение.
Начало тут: http://www.cashin.ru/blog/all/lift-upd1/

В симуляторе лифтов графики показывают большое количество данных. На картинке пример пробки у лифтов, если в час пик много народу. Интересно, что здесь люди тратят больше времени на ожидание в холле. Внутри лифтов ждут гораздо меньше — оранжевый график стабильно показывает малые числа.


Симулятор рисует графики по ходу времени. Один столбец — примерно минута симуляторного времени. Столбцы состоят из большого количества полупрозрачных точек. По мере прорисовки графики накапливают большое количество расчетов.


График должен обновляться быстро, чтобы движение человечков не превратилось в слайд-шоу. Чтобы не перерисовывать график, а только дополнять, графики состоят из двух слоев. Сверху векторный свг, снизу растровый канвас. Меняющиеся числа и линии движутся в отдельном верхнем слое, в свг. Нижний канвас принимает точки по каждому человеку и не требует перерисовки. Слои выровнены по общим координатам и управляются одним жс-скриптом.

Визуализация сделана с помощью библиотеки d3js,
https://d3js.org

Прожарить парочку лифтов:
http://www.cashin.ru/vis/lift/

В следующем посте — про микро- и макроуровень.