Closed TomasKulhanek closed 13 hours ago
try setting a custom projection object, e.g.
{
projection: ChartGeo.geoOrthographic().rotate([-90, 0, 0])
}
Thanks. That works. So if other will be interested, full example using ES imports:
import { geoOrthographic, ... } from "chartjs-chart-geo";
...
this.chart = new Chart(ctx, {
type: 'choropleth',
...
options: {
...
scale: {
projection: {
axis: 'x',
projection: geoOrthographic().rotate([0,0,0])
}
}
}
});
...
rotate2Asia() {
this.chart.scales.projection.projection.rotate([-90,0,0]);
this.update();
}
...
It would be great if you suggest or provide some example, how to rotate the orthographic view, in order to have e.g. Asia in the center of map. Currently Africa is in the center.
E.g. the option to rotate like in the following codepen example: https://codepen.io/TomasKulhanek/pen/emONPPg
User story I'm creating some interactive maps in different projection. In orthographic projection, I need to rotate the globe in order to focus on Asia, or on Americas based on user interaction. Currently I do not know how to achieve it.
Workaround is not to use orthographic projection and use e.g. equalEarth and use Scale and Offset. Which in some context is OK. As seen in the following example (working in progress Nov 2024 https://vito-health.github.io/scientific-visuals/geochart.html)
Additional context Anyway thanks for great visualisation simplification.