Владимир

Начать можешь с любого, все равно прийдется продолжить на "you don't know js", MDN и так далее. Разработчик не прекращает учиться, на JS новые спецификации каждый год выходят, плюс фреймвоки обновляются и меняются.

object.keys reduce

https://threejs.org/
1) Делаешь шарик
2) Натягиваешь текстуру глобуса
3) При желании качаешь карту высот и натягиваешь карту нормалей
Чтобы сделать лейблы возможно прийдется вспомнить школу и перенос угловых координат в декартовы
У них в примерах
https://peaceprizelaureates.nobelpeacecenter.org/en/
https://blocks.wizb.it/

https://stackoverflow.com/questions/4018154/how-do...

Который раз задаешь вопрос на одну и туже тему ?
1) d3.min(positiveChartPoints, d => new Date(d.date)).setMonth(-1), не правильно
Именно из-за этой строки у тебя пустая область и вылазит
Долно быть d3.min(positiveChartPoints, d => new Date(d.date))
С тиками
.ticks(2)
Вот это кусок кода заставляет d3 использовать свой генератор тиков и оно расставляет два тика равномерно на шкале. Для того, чтобы управлять размещением тиков, тебе нужно использовать tickValues
https://github.com/d3/d3-axis#axis_tickValues
В твоем случае примерно так

.axisBottom(xScale)
         .tickValues([new Date("2018-12-02"), new Date("2019-04-30")])
         .tickFormat(d3.timeFormat('%Y')))

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

https://codepen.io/casufi/pen/WNbbbXj

А вот в этом месте консоль лог вставить не судьба ?
this.setState({data:data});
2) Ошибка говорит о том, что у тебя data которая находится в стейте не массив и не имеет метода map, прям красным по красному написанно, откуда ты взял что проблема с filter? Хотя этого метода у объекта тоже нет и с ним тоже будут проблемы.