Playground - d3-thematika

Interactive Playground

Code Editor

// テクスチャをプリセットから取得
const texture = Thematika.TexturePresets.lightOcean()

// SVGフィルターをプリセットから取得
const effect = Thematika.FilterPresets.standardDropShadow()

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

//mapエレメントのサイズを取得
const width = document.querySelector("#map").clientWidth ;
const height = document.querySelector("#map").clientHeight;

// D3.jsの投影法を使用して地図の投影を設定
const projection = d3.geoEquirectangular()
    .fitExtent([[15, 15], [width-15, height-15]], geojson);

// Thematika.Map インスタンスを作成
const map = new Thematika.Map({
    container: '#map',
    width: width,
    height: height,
    defs: [texture, effect], 
    projection: projection
});

const fillStyles =["#1a3d1f", '#e0f7fa', texture.url()];

// GeojsonLayerインスタンスを作成
const worldLayer = new Thematika.GeojsonLayer({
    data: geojson,                
    attr: { 
        "fill":(d,i)=> fillStyles[i%3] , 
        "filter": effect.url(), 
        "stroke": '#1a3d1f',
        "stroke-width": 0.8,
        "opacity": (d,i) => 0.9,
    }
});

// OutlineLayerインスタンスを作成（クリップパス機能付き）
const outlineLayer = new Thematika.OutlineLayer({
    createClipPath: true,
    clipPathId: 'earth-outline-clip',
    attr: {
        "fill": 'none',
        "stroke": '#2c3e50',
        "stroke-width": 2,
        "opacity": 0.8
    }
});

// GraticuleLayerインスタンスを作成
const graticuleLayer = new Thematika.GraticuleLayer({
    step: [10, 10], // 10度間隔
    attr: {
        "fill": 'none',
        "stroke": '#000',
        "stroke-width": 0.5,
        "stroke-dasharray": '2, 2',
        "opacity": 0.9
    }
});

// レイヤーインスタンスを地図に追加
map.addLayer('graticule', graticuleLayer);
map.addLayer('outline', outlineLayer);
map.addLayer('world_new', worldLayer);

Interactive Playground

Code Editor

Map Output

Console Output