出版日: 2024年5月9日
SVGはインターネットの基盤です。特にインタラクティブな地図やインフォグラフィックを作成する際に役立ちます。
一方、地図製作者はShapeFileなどのデータ形式を使用し、これらの地図をWebに埋め込むことは非常に難しいです。
そこで、Pythonを使用してShapeFileをSVGに変換するスクリプトを開発しました。
この演習では、トルコの地区の境界マップを使用しています。地区はトルコの行政区画であり、州の後に来ます。ShapeFileデータは ヨーロッパ評議会のウェブサイトから取得しました。
## ライブラリをインポート
import geopandas as gpd
from bs4 import BeautifulSoup
import random
import textwrap
## ヨーロッパ評議会から取得したデータをGeoPandasデータフレームとして読み込む
fp = "geodata/TR_2011_LAU1.shp"
data = gpd.read_file(fp)
## shapefileの行をpathに変換する関数を定義
def process_to_svg_group(row):
rd = row.to_dict()
del rd["geometry"]
# パスの属性としてデータフレームの列を保持する
to_add = []
for key, val in rd.items():
to_add.append('data-{}="{}"'.format(key, val))
# geometry列をSVGパスに変換
ps = BeautifulSoup(row.geometry._repr_svg_(), "xml").find_all("path")
paths = []
for p in ps:
new_path = f"""<g {' '.join(to_add)}>{str(p)}</g>"""
paths.append(new_path)
return "\n\n".join(paths)
## データフレームの各行をSVGパスに変換
processed_rows = []
for i, row in data.sample(frac=1).iterrows():
p = process_to_svg_group(row)
processed_rows.append(p)
## SVGの属性を設定
props = {
"viewBox": f"{data.total_bounds[0]} {data.total_bounds[1]} {data.total_bounds[2] - data.total_bounds[0]} {data.total_bounds[3] -data.total_bounds[1] }",
"xmlns": "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"transform": "scale(1, -1)",
"preserveAspectRatio":"XMinYMin meet"
}
## 属性を追加
template = '{key:s}="{val:s}"'
attrs = " ".join([template.format(key=key, val=props[key]) for key in props])
## SVGを作成
raw_svg_str = textwrap.dedent(r"""
<?xml version="1.0" encoding="utf-8" ?>
<svg {attrs:s}>
{data:s}
</svg>""").format(attrs=attrs, data="".join(processed_rows)).strip()
## SVGを保存
with open("map.svg", "w") as f:
f.write(raw_svg_str)
この GitHubリポジトリにコードがあります。
上記のコードを使用すると、次のようなShapeFileデータで始めることができます:
ShapeFileデータで最も重要な列は最後の列である「geometry」です。この列を使用してSVGを描画します。
ただし、他の列には重要な情報が含まれており、SVGでこれらを保持したいので、これらをSVGの属性として保持します。
ShapeFileデータは、geopandasライブラリを使用して簡単にプロットできます:
以下のコードは各行をループし、geometry列をSVGパスに変換し、他の列の情報をパスの属性として追加します。
パスが作成されたら、それらを単一のSVGにマージし、SVGタグに必要な属性を追加するだけです。
処理が完了したら、最終的にSVGを保存し、ブラウザで表示できます。
以下は、データ、コード、および結果のSVGといくつかの画像を含む このGitHubリポジトリです。
ご質問がある場合はお知らせください。
ハッキングを楽しんでください!
このブログは英語からChatGPTによって翻訳されました。不明な点がある場合は、お問い合わせページからご連絡ください。
コメントを残す
コメント
その他のブログ
2024/06/19
SvelteとJavaScriptを使用してシンプルで動的なツールチップを作成する
2024/06/17
JavaScriptを用いて東京都のインタラクティブな地図を作成する
2024/06/14
Matplotlibで日本語文字化けを解決できる簡単な方法
2024/06/13
書評 | トーキング・トゥ・ストレンジャーズ 「よく知らない人」について私たちが知っておくべきこと by マルコム・グラッドウェル
2024/06/07
日本語で最もよく使われる3000字の漢字
2024/06/07
VSCodeでRegexを使用してReplaceする方法
2024/06/06
SvelteではReadable Storeを使用するな
2024/06/05
GzipとPakoでデータを圧縮してWebサイトのローディング速度を上げる方法
2024/05/31
JavaScriptを使用してWebページ上でマウスが指している単語を特定する
2024/05/29
SvelteとSVGを用いてインタラクティブな地図を作成する
2024/05/28
書評 | Originals 誰もが「人と違うこと」ができる時代 by アダム・グラント & シェリル・サンドバーグ
2024/05/27
Javascriptを使用して数独を解く方法
2024/05/26
ウェブサイトへのトラフィックを1か月で10倍に増やした方法
2024/05/24
人生はサイクリングに似ている
2024/05/19
JavaScriptでバックトラッキング・アルゴリズムを用いて完全な数独グリッドを生成する
2024/05/16
Tailwindが素晴らしい理由とWeb開発をいかに楽にするか
2024/05/15
PythonとGitフックを使用してサイトマップを自動的に生成する
2024/05/14
書評 | Range (レンジ) 知識の「幅」が最強の武器になる by デイビッド・エプスタイン
2024/05/13
SvelteとSvelteKitはなんですか?
2024/05/12
SvelteKitで国際化(多言語化)
2024/05/11
SvelteでCachingを用いてDeploy時間を短縮する方法
2024/05/10
SvelteとIntersection Oberverによるレイジーローディング
2024/05/10
遺伝的アルゴリズムで最適な株式ポートフォリオを作る方法
2024/05/08
Svelteの反応性:変数、バインディング、およびキー関数
2024/05/07
書評 | 孫子の兵法
2024/05/06
スペシャリストは終了。ゼネラリスト万歳!
2024/05/03
トルコ人の有権者の投票行動をPythonでの分析
2024/05/01
Seleniumを用いてトルコ投票データベースを作る方法
2024/04/30
SvelteとTailwindを使用してInfinite Scrollできる方法
2024/04/29
1年間以内で日本語を駆使できるようになるための方法
2024/04/25
SvelteとTailwindを用いたWebサイトテンプレート
2024/01/29
怠惰なエンジニアとひどいデザイン
2024/01/28
偉大さについて
2024/01/28
MacBook で PDF を PNG に変換する
2023/12/31
2023年振り返り:24冊の読んだ本のまとめ
2023/12/30
Python PILを使用して写真コラージュを作成する方法
2024/01/09
ウェブサイトの訪問者のデバイスとブラウザを検出する方法
2024/01/19
ChatGPT回答の解析