Create Beautiful
Thematic Maps
with D3.js

// GeoJSONデータの読み込み
const geojson = await d3.json("world.geojson");

// 地図のサイズと投影法の設定
const projection = d3.geoEquirectangular()
    .fitExtent([[0, 0], [width, height]], geojson);

// 基本的なセットアップ
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection: projection
});

// 世界地図(geojson)を表示するレイヤー
const worldLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        fill: '#3498db',
        stroke: '#2c3e50',
        'stroke-width': 0.5
    }
});

// 経緯線を表示するレイヤー
const graticuleLayer = new Thematika.GraticuleLayer({
    step: [10, 10],
    attr: {
        stroke: '#ddd',
        'stroke-width': 0.5
    }
});

// 地図のアウトラインを強調するためのレイヤー
const outlineLayer = new Thematika.OutlineLayer({
    attr: {
        "stroke": '#475569',
    }
});

// レイヤーをマップに追加
map.addLayer('world', worldLayer);
map.addLayer('graticule', graticuleLayer);
map.addLayer('outline', outlineLayer);

// SVGエフェクトを使ったスタイリング

// ドロップシャドウフィルターの作成
const shadowFilter = map.createFilter('drop-shadow', {
    dx: 2,
    dy: 2,
    stdDeviation: 3,
    floodColor: '#000000',
    floodOpacity: 0.3
});

// グラデーションの作成
const gradient = map.createGradient('country-gradient', [
    { offset: '0%', color: '#3498db' },
    { offset: '100%', color: '#2c3e50' }
]);

// SVGエフェクトを適用したレイヤー
const styledLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        fill: gradient.url(),
        stroke: '#fff',
        'stroke-width': 1,
        filter: shadowFilter.url()
    }
});

map.addLayer('styled', styledLayer);

// カラーパレットを使った地図の色分け

// Viridisパレットを使用した連続データの表現
const colorScale = d3.scaleSequential(d3.interpolateViridis)
    .domain([0, 100]);

// カテゴリカルデータ用のカラーパレット
const categoricalColors = Thematika.AllPalettes.Set3.colors;

// 地域ごとに色分けされたレイヤー
const coloredLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        fill: (d, i) => categoricalColors[i % categoricalColors.length],
        stroke: '#fff',
        'stroke-width': 0.5,
        opacity: 0.8
    }
});

// ColorBrewerパレットを使用した主題図
const choroplethLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        fill: (d) => Thematika.AllPalettes.Blues.colors[
            Math.floor(Math.random() * 5) + 3
        ],
        stroke: '#333',
        'stroke-width': 0.3
    }
});

map.addLayer('colored', coloredLayer);