{"spec_id":"phase-diagram-pt","library":"echarts","language":"javascript","code":"// anyplot.ai\n// phase-diagram-pt: Thermodynamic Phase Diagram (Pressure-Temperature)\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-08\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// CO2 phase diagram constants (Clausius-Clapeyron model)\nconst R   = 8.314;    // J/(mol·K)\nconst Ttp = 216.55;   // triple point temperature (K)\nconst Ptp = 5.185;    // triple point pressure (atm)\nconst Tcp = 304.13;   // critical point temperature (K)\nconst Pcp = 72.8;     // critical point pressure (atm)\nconst dHsub = 25200;  // CO2 sublimation enthalpy (J/mol)\nconst dHvap = 16520;  // CO2 vaporization enthalpy (J/mol), tuned to pass through critical point\nconst dPdT  = 133;    // melting curve slope (atm/K), steep positive for CO2\n\n// Solid-gas sublimation curve: 150 K to triple point\nconst sublimData = [];\nfor (let i = 0; i <= 60; i++) {\n  const T = 150 + (Ttp - 150) * i / 60;\n  const P = Ptp * Math.exp((-dHsub / R) * (1 / T - 1 / Ttp));\n  sublimData.push([T, P]);\n}\n\n// Liquid-gas vaporization curve: triple point to critical point\nconst vapData = [];\nfor (let i = 0; i <= 60; i++) {\n  const T = Ttp + (Tcp - Ttp) * i / 60;\n  const P = Ptp * Math.exp((-dHvap / R) * (1 / T - 1 / Ttp));\n  vapData.push([T, P]);\n}\n\n// Solid-liquid melting curve: triple point upward (nearly vertical, positive slope for CO2)\nconst meltData = [];\nfor (let i = 0; i <= 40; i++) {\n  const T = Ttp + 9.5 * i / 40;\n  const P = Ptp + dPdT * (T - Ttp);\n  meltData.push([T, P]);\n}\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// Title length: \"CO₂ Phase Diagram · phase-diagram-pt · javascript · echarts · anyplot.ai\" ~ 72 chars\n// titleFontSize = round(22 * 67 / 72) = 20\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n\n  title: {\n    text: \"CO₂ Phase Diagram · phase-diagram-pt · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 22,\n    textStyle: { color: t.ink, fontSize: 20, fontWeight: \"bold\" },\n  },\n\n  legend: {\n    data: [\n      \"Solid–Gas (Sublimation)\",\n      \"Liquid–Gas (Vaporization)\",\n      \"Solid–Liquid (Melting)\",\n    ],\n    bottom: 12,\n    textStyle: { color: t.inkSoft, fontSize: 15 },\n    itemWidth: 32,\n    itemHeight: 4,\n    icon: \"rect\",\n  },\n\n  grid: { left: 120, right: 80, top: 86, bottom: 120 },\n\n  xAxis: {\n    type: \"value\",\n    name: \"Temperature (K)\",\n    nameLocation: \"middle\",\n    nameGap: 52,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    min: 140,\n    max: 360,\n    interval: 20,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { show: true, lineStyle: { color: t.grid } },\n  },\n\n  yAxis: {\n    type: \"log\",\n    logBase: 10,\n    name: \"Pressure (atm)\",\n    nameLocation: \"middle\",\n    nameGap: 72,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    min: 0.01,\n    max: 2000,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { show: true, lineStyle: { color: t.grid } },\n  },\n\n  series: [\n    // Phase-region shading (markArea only, no visible data points)\n    {\n      type: \"line\",\n      name: \"_gas\",\n      data: [],\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.palette[0], opacity: 0.08 },\n        data: [[{ xAxis: 140, yAxis: 0.01 }, { xAxis: 360, yAxis: 4.5 }]],\n      },\n    },\n    {\n      type: \"line\",\n      name: \"_liquid\",\n      data: [],\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.palette[1], opacity: 0.08 },\n        data: [[{ xAxis: 216.5, yAxis: 5.0 }, { xAxis: 305, yAxis: 100 }]],\n      },\n    },\n    {\n      type: \"line\",\n      name: \"_solid\",\n      data: [],\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.palette[2], opacity: 0.08 },\n        data: [[{ xAxis: 140, yAxis: 4.8 }, { xAxis: 217, yAxis: 2000 }]],\n      },\n    },\n    {\n      type: \"line\",\n      name: \"_supercritical\",\n      data: [],\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.palette[5], opacity: 0.08 },\n        data: [[{ xAxis: 303, yAxis: 70 }, { xAxis: 360, yAxis: 2000 }]],\n      },\n    },\n    // Phase boundary curves\n    {\n      name: \"Solid–Gas (Sublimation)\",\n      type: \"line\",\n      data: sublimData,\n      symbol: \"none\",\n      lineStyle: { color: t.palette[0], width: 5 },\n    },\n    {\n      name: \"Liquid–Gas (Vaporization)\",\n      type: \"line\",\n      data: vapData,\n      symbol: \"none\",\n      lineStyle: { color: t.palette[1], width: 5 },\n    },\n    {\n      name: \"Solid–Liquid (Melting)\",\n      type: \"line\",\n      data: meltData,\n      symbol: \"none\",\n      lineStyle: { color: t.palette[2], width: 5 },\n    },\n    // Special points\n    {\n      name: \"Triple Point\",\n      type: \"scatter\",\n      data: [[Ttp, Ptp]],\n      symbol: \"diamond\",\n      symbolSize: 22,\n      itemStyle: { color: t.palette[3], borderColor: t.ink, borderWidth: 2 },\n      label: {\n        show: true,\n        formatter: \"Triple Point\\n216.55 K, 5.19 atm\",\n        position: \"bottom\",\n        color: t.inkSoft,\n        fontSize: 14,\n        fontWeight: \"bold\",\n      },\n      emphasis: { disabled: true },\n    },\n    {\n      name: \"Critical Point\",\n      type: \"scatter\",\n      data: [[Tcp, Pcp]],\n      symbol: \"circle\",\n      symbolSize: 22,\n      itemStyle: { color: t.palette[4], borderColor: t.ink, borderWidth: 2 },\n      label: {\n        show: true,\n        formatter: \"Critical Point\\n304.13 K, 72.8 atm\",\n        position: \"top\",\n        color: t.inkSoft,\n        fontSize: 14,\n        fontWeight: \"bold\",\n      },\n      emphasis: { disabled: true },\n    },\n  ],\n\n  graphic: [\n    {\n      type: \"text\",\n      left: \"20%\",\n      top: \"33%\",\n      style: { text: \"SOLID\", fill: t.inkSoft, fontSize: 22, fontWeight: \"bold\", opacity: 0.55 },\n    },\n    {\n      type: \"text\",\n      left: \"52%\",\n      top: \"38%\",\n      style: { text: \"LIQUID\", fill: t.inkSoft, fontSize: 22, fontWeight: \"bold\", opacity: 0.55 },\n    },\n    {\n      type: \"text\",\n      left: \"65%\",\n      top: \"77%\",\n      style: { text: \"GAS\", fill: t.inkSoft, fontSize: 22, fontWeight: \"bold\", opacity: 0.55 },\n    },\n    {\n      type: \"text\",\n      left: \"81%\",\n      top: \"20%\",\n      style: {\n        text: \"SUPERCRITICAL\\nFLUID\",\n        fill: t.inkSoft,\n        fontSize: 20,\n        fontWeight: \"bold\",\n        opacity: 0.55,\n        lineHeight: 28,\n      },\n    },\n  ],\n});\n"}