Библиотека, из которой взят этот пример, устарела:
Protovis больше не находится в активной разработке.
Финальная версия Protovis была v3.3.1 (4,7 МБ). Команда Protovis
сейчас разрабатывает новую библиотеку визуализации, D3.js, с улучшенными
поддержка анимации и взаимодействия. D3 опирается на многие из
концепции в Протовисе; для более подробной информации, пожалуйста, прочитайте введение
и просмотрите примеры.
Так что вам следует продолжить расследование D3 и React. Вот статья об этом: https://medium.com/turo-engineering/react-meets-d3-6a40881d0d73
Когда говорят о рендеринге диаграмм или любых данных
визуализация в сети, D3.js является стандартом де-факто. Итак, если мы
хотим создавать красивые и многоразовые графики, мы должны определенно
использовать силу D3.
Как мы интегрируем это? Но у нас есть проблема, наш веб-клиент построен
в React, и эта библиотека не ладит с D3: оба используют
очень разные подходы к обновлению DOM. В то время как React использует
виртуальный DOM и четко определенный жизненный цикл для расчета и оптимизации DOM
обновлений, D3 использует DOM браузера и атрибуты данных.
Если мы хотим создавать хорошие графики с аккуратной анимацией и не
наши головы ломаются при работе с элементами SVG и их позиционированием,
использование D3 является обязательным, поэтому нам нужно найти способ, чтобы эти две библиотеки
могут хорошо играть вместе.