{"spec_id":"marimekko-basic","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nmarimekko-basic: Basic Marimekko Chart\nLibrary: plotly 6.9.0 | Python 3.13.14\nQuality: 94/100 | Updated: 2026-07-24\n\"\"\"\n\nimport os\n\nimport plotly.graph_objects as go\n\n\n# Theme tokens\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nELEVATED_BG = \"#FFFDF6\" if THEME == \"light\" else \"#242420\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\nGRID = \"rgba(26,26,23,0.15)\" if THEME == \"light\" else \"rgba(240,239,232,0.15)\"\n\n# Imprint palette — first series always #009E73\nCOLORS = [\"#009E73\", \"#C475FD\", \"#4467A3\"]\n\n\ndef _linearize(c):\n    return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4\n\n\ndef relative_luminance(hex_color):\n    r, g, b = (int(hex_color.lstrip(\"#\")[i : i + 2], 16) / 255 for i in (0, 2, 4))\n    return 0.2126 * _linearize(r) + 0.7152 * _linearize(g) + 0.0722 * _linearize(b)\n\n\n# Per-segment label ink chosen for WCAG contrast against that segment's own fill —\n# lavender (#C475FD) reads as too light for white text once ink-on-color luminance > 0.179.\nLABEL_INK = [\"#1A1A17\" if relative_luminance(c) > 0.179 else \"#FFFFFF\" for c in COLORS]\n\n# Data: Market share by region and product line (in millions USD)\nregions = [\"North America\", \"Europe\", \"Asia Pacific\", \"Latin America\"]\nproducts = [\"Enterprise\", \"SMB\", \"Consumer\"]\n\n# Values: rows = products, columns = regions\nvalues = [\n    [120, 55, 150, 30],  # Enterprise\n    [90, 65, 120, 40],  # SMB\n    [60, 45, 180, 50],  # Consumer\n]\n\n# Calculate bar widths (proportional to column totals)\ncolumn_totals = [sum(values[i][j] for i in range(len(products))) for j in range(len(regions))]\ngrand_total = sum(column_totals)\nwidths = [ct / grand_total for ct in column_totals]\n\n# Calculate x positions (cumulative widths, centered)\nx_positions = []\ncumulative = 0\nfor w in widths:\n    x_positions.append(cumulative + w / 2)\n    cumulative += w\n\n# Create figure\nfig = go.Figure()\n\n# Build stacked bars with proportional heights\nfor i, product in enumerate(products):\n    color = COLORS[i]\n    bottoms = []\n    heights = []\n    for j in range(len(regions)):\n        bottom = sum(values[k][j] for k in range(i)) / column_totals[j] if column_totals[j] > 0 else 0\n        height = values[i][j] / column_totals[j] if column_totals[j] > 0 else 0\n        bottoms.append(bottom)\n        heights.append(height)\n\n    fig.add_trace(\n        go.Bar(\n            x=x_positions,\n            y=heights,\n            width=widths,\n            name=product,\n            marker={\"color\": color, \"line\": {\"color\": ELEVATED_BG, \"width\": 2}},\n            base=bottoms,\n            text=[f\"${values[i][j]}M\" for j in range(len(regions))],\n            textposition=\"inside\",\n            textfont={\"size\": 11, \"color\": LABEL_INK[i]},\n            hovertemplate=(\n                \"<b>%{customdata[0]}</b><br>\"\n                \"Product: \" + product + \"<br>\"\n                \"Value: $%{customdata[1]:.0f}M<br>\"\n                \"Share: %{y:.1%}<extra></extra>\"\n            ),\n            customdata=[[regions[j], values[i][j]] for j in range(len(regions))],\n        )\n    )\n\n# Callout annotation — surface the insight rather than leaving the viewer to spot it:\n# Asia Pacific is both the largest market and the most Consumer-heavy mix.\nasia_idx = regions.index(\"Asia Pacific\")\nasia_share = column_totals[asia_idx] / grand_total\nconsumer_share = values[products.index(\"Consumer\")][asia_idx] / column_totals[asia_idx]\nasia_center = sum(widths[:asia_idx]) + widths[asia_idx] / 2\n\n# Canvas + margins (source of truth for the caption's paper-space x below)\nCANVAS_W, CANVAS_H = 800, 450\nMARGIN_L, MARGIN_R, MARGIN_T, MARGIN_B = 85, 165, 130, 65\nPLOT_W = CANVAS_W - MARGIN_L - MARGIN_R\n\n# Layout\nfig.update_layout(\n    autosize=False,\n    template=\"none\",\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"color\": INK},\n    title={\n        \"text\": \"Market Share by Region · marimekko-basic · python · plotly · anyplot.ai\",\n        \"font\": {\"size\": 16, \"color\": INK},\n        \"x\": 0.5,\n        \"xanchor\": \"center\",\n    },\n    xaxis={\n        \"title\": {\"text\": \"Region (width = market size)\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"tickmode\": \"array\",\n        \"tickvals\": x_positions,\n        \"ticktext\": regions,\n        \"range\": [0, 1],\n        \"showgrid\": False,\n        \"showline\": True,\n        \"mirror\": False,\n        \"linecolor\": INK_SOFT,\n        \"zerolinecolor\": INK_SOFT,\n    },\n    yaxis={\n        \"title\": {\"text\": \"Product Mix (share within region)\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"tickformat\": \".0%\",\n        \"range\": [0, 1],\n        \"showgrid\": True,\n        \"showline\": True,\n        \"mirror\": False,\n        \"gridwidth\": 1,\n        \"gridcolor\": GRID,\n        \"linecolor\": INK_SOFT,\n        \"zerolinecolor\": INK_SOFT,\n    },\n    barmode=\"stack\",\n    bargap=0.02,\n    legend={\n        \"title\": {\"text\": \"Product Line\", \"font\": {\"size\": 11, \"color\": INK}},\n        \"font\": {\"size\": 10, \"color\": INK_SOFT},\n        \"bgcolor\": ELEVATED_BG,\n        \"bordercolor\": INK_SOFT,\n        \"borderwidth\": 1,\n        \"orientation\": \"v\",\n        \"yanchor\": \"top\",\n        \"y\": 1,\n        \"xanchor\": \"left\",\n        \"x\": 1.02,\n    },\n    hoverlabel={\"bgcolor\": ELEVATED_BG, \"bordercolor\": INK_SOFT, \"font\": {\"color\": INK, \"size\": 10}},\n    margin={\"l\": MARGIN_L, \"r\": MARGIN_R, \"t\": MARGIN_T, \"b\": MARGIN_B},\n)\n\n# Caption uses paper refs, pinned in the reserved top-margin gap between title and\n# plot top — never inside the stacked bars, so it can't collide with value labels.\nfig.add_annotation(\n    x=(MARGIN_L + asia_center * PLOT_W) / CANVAS_W,\n    y=1.16,\n    xref=\"paper\",\n    yref=\"paper\",\n    xanchor=\"center\",\n    yanchor=\"middle\",\n    text=(f\"Asia Pacific: largest market ({asia_share:.0%} of total)<br>Consumer leads at {consumer_share:.0%} share\"),\n    showarrow=False,\n    align=\"center\",\n    font={\"size\": 10, \"color\": INK},\n    bgcolor=ELEVATED_BG,\n    bordercolor=INK_SOFT,\n    borderwidth=1,\n    borderpad=6,\n)\n\n# Save outputs\n# Hard target: 3200 x 1800 landscape (see prompts/library/plotly.md \"Canvas — hard rule\")\nfig.write_image(f\"plot-{THEME}.png\", width=CANVAS_W, height=CANVAS_H, scale=4)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}