// PointCircleLayerの使用例

const geojson = await d3.json("../geojson/world.geojson");

const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection: d3.geoNaturalEarth1()
});

// PointCircleLayerインスタンスを作成
const circleLayer = new Thematika.PointCircleLayer({
    data: geojson,
    r: 5, // 固定半径
    attr: {
        "fill": '#ff6b6b',
        "stroke": '#d63031',
        "stroke-width": 1,
        "opacity": 0.8
    }
});

// または関数を使った動的半径設定
// 比例記号（人口など量データ）は createProportionalScale を使う。
// 円の面積が値に比例するため、視覚的な誇張が起きない
const radius = Thematika.createProportionalScale(
    geojson.features.map(f => f.properties.POP_EST),
    { maxRadius: 25, minRadius: 2 }
);
const proportionalLayer = new Thematika.PointCircleLayer({
    data: geojson,
    r: (feature) => radius(feature.properties.POP_EST),
    attr: { fill: '#74b9ff', opacity: 0.7 }
});

const dynamicCircleLayer = new Thematika.PointCircleLayer({
    data: geojson,
    r: (feature, index) => {
        // 人口に基づいて半径を決定
        const population = feature.properties?.POP_EST || 0;
        return Math.sqrt(population / 1000000) + 2;
    },
    attr: {
        "fill": (d, i) => i % 2 === 0 ? '#74b9ff' : '#fd79a8',
        "stroke": '#2d3436',
        "stroke-width": 0.5
    }
});

// レイヤーを地図に追加
map.addLayer('circles', circleLayer);

// 半径を動的に更新
circleLayer.updateRadius((feature, index) => index % 3 + 3);