カラーパレットショーケース

🎨 カラーパレット機能

  • 科学的に検証されたColorBrewer、Viridis、CARTOパレット
  • 色覚障害対応のアクセシビリティチェック
  • カテゴリカル、連続、発散の3タイプのパレット
  • データタイプに応じた自動パレット推奨機能
  • 「パレットコードをコピー」でThematika.AllPalettes.[name].colorsをコピー

データタイプ別推奨パレット

実装サンプル

カラーパレットの使用例

// カラーパレットの使用例

// パレットカードの「パレットコードをコピー」ボタンで取得したコードを使用
const colors = Thematika.AllPalettes.Viridis.colors;

// D3のカラースケールに適用
const colorScale = d3.scaleOrdinal(Thematika.AllPalettes.Set3.colors);

// GeojsonLayerでパレットを使用
const layer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        fill: (d, i) => Thematika.AllPalettes.Category10.colors[i % 10],
        stroke: '#fff',
        'stroke-width': 0.5
    }
});

// 指定クラス数に最適化
const optimizedColors = generateOptimizedPalette(bestPalette, 5);

// GeojsonLayerでの使用
const worldLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        "fill": (d, i) => optimizedColors[i % optimizedColors.length],
        "stroke": '#ffffff',
        "stroke-width": 0.5
    }
});

// 色覚障害対応チェック
const isSafe = checkColorBlindnessSafety(optimizedColors);
console.log('色覚障害対応:', isSafe);

// 特定パレットの直接使用
const viridisColors = AllPalettes.Viridis.colors;
const cartoSafeColors = AllPalettes.Safe.colors;
const tailwindRichColors = AllPalettes.TailwindRich.colors;