{"spec_id":"line-impurity-comparison","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-impurity-comparison: Gini Impurity vs Entropy Comparison\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-26\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Splitting-criterion curves across the full probability range, 101 points for\n// a smooth curve including both endpoints.\nconst POINT_COUNT = 101;\nconst probabilities = Array.from(\n  { length: POINT_COUNT },\n  (_, i) => i / (POINT_COUNT - 1),\n);\n\nconst giniImpurity = probabilities.map((p) => 2 * p * (1 - p));\nconst entropy = probabilities.map((p) => {\n  // Binary entropy in bits; the p*log2(p) term is defined as 0 at p=0 and p=1\n  // (the standard 0*log(0) := 0 convention), so both endpoints render cleanly.\n  const term = (x) => (x === 0 ? 0 : -x * Math.log2(x));\n  return term(p) + term(1 - p);\n});\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: [t.palette[0], t.palette[1]],\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"line-impurity-comparison · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  legend: {\n    top: 70,\n    textStyle: { color: t.ink, fontSize: 16 },\n    data: [\"Gini = 2p(1−p)\", \"Entropy = −p·log₂p − (1−p)·log₂(1−p)\"],\n  },\n  grid: { left: 90, right: 60, top: 150, bottom: 90 },\n  xAxis: {\n    type: \"value\",\n    name: \"Probability p\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 0,\n    max: 1,\n    interval: 0.1,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Impurity\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 0,\n    max: 1.25,\n    interval: 0.25,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      name: \"Gini = 2p(1−p)\",\n      type: \"line\",\n      data: probabilities.map((p, i) => [p, giniImpurity[i]]),\n      showSymbol: false,\n      lineStyle: { width: 4, color: t.palette[0] },\n      areaStyle: {\n        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n          { offset: 0, color: t.palette[0] + \"33\" },\n          { offset: 1, color: t.palette[0] + \"00\" },\n        ]),\n      },\n      markLine: {\n        symbol: \"none\",\n        silent: true,\n        animation: false,\n        lineStyle: { color: t.inkSoft, type: \"dashed\", width: 1.5 },\n        label: { show: false },\n        data: [{ xAxis: 0.5 }],\n      },\n      markPoint: {\n        symbol: \"circle\",\n        symbolSize: 14,\n        animation: false,\n        itemStyle: {\n          color: t.palette[0],\n          borderColor: t.pageBg,\n          borderWidth: 2,\n        },\n        label: { show: false },\n        data: [{ coord: [0.5, 0.5] }],\n      },\n    },\n    {\n      name: \"Entropy = −p·log₂p − (1−p)·log₂(1−p)\",\n      type: \"line\",\n      data: probabilities.map((p, i) => [p, entropy[i]]),\n      showSymbol: false,\n      lineStyle: { width: 4, color: t.palette[1] },\n      markPoint: {\n        symbol: \"circle\",\n        symbolSize: 14,\n        animation: false,\n        itemStyle: {\n          color: t.palette[1],\n          borderColor: t.pageBg,\n          borderWidth: 2,\n        },\n        label: {\n          show: true,\n          formatter: \"p = 0.5 — max impurity\",\n          position: \"top\",\n          align: \"center\",\n          offset: [0, -8],\n          color: t.inkSoft,\n          fontSize: 14,\n        },\n        data: [{ coord: [0.5, 1] }],\n      },\n    },\n  ],\n});\n"}