现有的 vega-lite 地图突然看起来非常放大 - 发生了什么事?
An existing vega-lite map suddenly seems very zoomed-in - what is happening?
我有一张地图,它采用旧的 topojson 格式,曾经与 Vega-Lite 一起使用。现在我们在this editor gist.
中只看到一个紫色方块
我用相同的代码重建了地图,但更新了 vega 编辑器中的 topojson 和 saved as a gist here。
随着新的 vega 版本的发布,我似乎需要对我的 topojson 文件进行不同的格式化,首先是圆弧,就像 mapshaper.org 导出输出一样。为什么是这样?它破坏了几个现有的网络地图,我花了几个小时才弄明白。似乎我可以通过更改工作流程来修复它,但我很好奇。
Topojson 数据遵循投影数据的 left-hand 规则(外环顺时针方向,内环逆时针方向),其中 topojson 文件中的数据根据 right-hand 规则构建(counter-clockwise 用于外圈,顺时针方向用于内圈)。多边形的顺序似乎可以忽略不计,但它定义了多边形的“内部”和“外部”部分。
你可以做两件事:
- 不使用地理投影,而是 cartesian-like
identity
投影。
- 强制您的源数据按正确顺序排列。
示例 1:
"projection": {"type": "identity", "reflectY": true},
2 的示例:
使用 MapShaper 或 Python 强制您的数据按正确的顺序排列。这里有一个使用 Python
的例子
import topojson as tp
import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/nycehs/NeighborhoodReports/master/visualizations/json/UHF42.topo_old.json')
tp.Topology(gdf).to_json('UHF42.topo_new.json')
我之前为 Altair 和 Python Topojson
写过一些关于它的文章
- https://mattijn.github.io/topojson/example/settings-tuning.html#winding_order
- https://altair-viz.github.io/user_guide/data.html#winding-order
D3 的 Mike Bostock
我有一张地图,它采用旧的 topojson 格式,曾经与 Vega-Lite 一起使用。现在我们在this editor gist.
中只看到一个紫色方块我用相同的代码重建了地图,但更新了 vega 编辑器中的 topojson 和 saved as a gist here。
随着新的 vega 版本的发布,我似乎需要对我的 topojson 文件进行不同的格式化,首先是圆弧,就像 mapshaper.org 导出输出一样。为什么是这样?它破坏了几个现有的网络地图,我花了几个小时才弄明白。似乎我可以通过更改工作流程来修复它,但我很好奇。
Topojson 数据遵循投影数据的 left-hand 规则(外环顺时针方向,内环逆时针方向),其中 topojson 文件中的数据根据 right-hand 规则构建(counter-clockwise 用于外圈,顺时针方向用于内圈)。多边形的顺序似乎可以忽略不计,但它定义了多边形的“内部”和“外部”部分。
你可以做两件事:
- 不使用地理投影,而是 cartesian-like
identity
投影。 - 强制您的源数据按正确顺序排列。
示例 1:
"projection": {"type": "identity", "reflectY": true},
2 的示例:
使用 MapShaper 或 Python 强制您的数据按正确的顺序排列。这里有一个使用 Python
的例子import topojson as tp
import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/nycehs/NeighborhoodReports/master/visualizations/json/UHF42.topo_old.json')
tp.Topology(gdf).to_json('UHF42.topo_new.json')
我之前为 Altair 和 Python Topojson
写过一些关于它的文章- https://mattijn.github.io/topojson/example/settings-tuning.html#winding_order
- https://altair-viz.github.io/user_guide/data.html#winding-order
D3 的 Mike Bostock