⚠️ 開発版 (v0.0.1-alpha): このライブラリは現在開発中です。APIは予告なく変更される可能性があります。
D3.jsを使用した主題図作成（thematika）ライブラリです。レイヤーベースの柔軟な設計により、美しい静的主題図を簡単に作成できます。
npm install d3-thematika
<!-- D3.js CDN -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- d3-thematika -->
<script src="./dist/thematika.umd.js"></script>
<script>
//geojsonデータの読み込み
const geojson = await d3.json("geojson/world.geojson");
// D3.jsの投影法を使用して地図の投影を設定
const projection = d3.geoEqualEarth()
.fitExtent([[0, 0], [width, height]], geojson);
const map = new Thematika.Map({
container: '#map',
width: width,
height: height,
defs: [texture, effect],
projection: projection
});
// GeojsonLayerインスタンスを作成
const worldLayer = new Thematika.GeojsonLayer({
data: geojson,
attr: {
fill:'#f8f9fa',
stroke: '#1a3d1f',
strokeWidth: 0.8,
opacity: 0.9,
}
});
// レイヤーを追加
map.addLayer('world_layer', worldLayer);
</script>
import { Map, GeojsonLayer } from 'd3-thematika';
import * as d3 from 'd3';
// GeoJSONデータの読み込み
const geojson = await d3.json("geojson/world.geojson");
// D3.jsの投影法を使用して地図の投影を設定
const projection = d3.geoEqualEarth()
.fitExtent([[0, 0], [width, height]], geojson);
// 地図インスタンスを作成
const map = new Map({
container: '#map',
width: width,
height: height,
projection: projection
});
// GeojsonLayerインスタンスを作成
const worldLayer = new GeojsonLayer({
data: geojson,
attr: {
fill: '#f8f9fa',
stroke: '#1a3d1f',
strokeWidth: 0.8,
opacity: 0.9,
}
});
// レイヤーを追加
map.addLayer('world_layer', worldLayer);
git clone https://github.com/shimizu/d3-thematika.git
cd d3-thematika
npm install
npm run dev
開発サーバーが http://localhost:3000/index.html で起動します。
npm run build
ビルドファイルは dist/ フォルダに出力されます：
thematika.umd.js - UMD版thematika.esm.js - ES Modules版thematika.cjs.js - CommonJS版バグ報告、機能リクエスト、プルリクエストを歓迎します！詳細はCONTRIBUTING.mdをご覧ください。
ISC License - 詳細はLICENSEファイルをご覧ください。
注: このプロジェクトは個人的な実験プロジェクトとして開始されました。フィードバックや提案はIssuesでお待ちしています。