{"id":"1403c637-9d46-45f0-bd33-954d6914476f","name":"Europe Orders Map","slug":"europe-orders-map","category":"email-charts","description":"A light European choropleth for weekly ops emails: countries shaded by value, a color scale, and the top three called out beside the map. Country names go in as plain name:value pairs.","sample_params":{"data":"Germany:412,France:318,United Kingdom:290,Netherlands:141,Spain:128,Italy:117,Poland:96,Sweden:74,Austria:52,Switzerland:49","eyebrow":"Weekly ops","footnote":"Aug 4 – Aug 10","hue":"160","subtitle":"European markets · last 7 days","title":"Orders by country","unit":"orders"},"spec":{"name":"europe-orders-map","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n*{margin:0;padding:0;box-sizing:border-box}\nhtml,body{width:100%;height:100%}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden}\n.eyebrow{font-size:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}\n.chip{display:inline-block;font-size:22px;font-weight:700;padding:6px 18px;border-radius:999px;vertical-align:middle}\n.chip.up{color:#0a7d4f;background:#e2f5ea}\n.chip.down{color:#b3261e;background:#fde9e7}\n.chip.flat{color:#5b6472;background:#eef0f4}\n\nbody{background:#f7f9fb;color:#12161f}\n#map{position:absolute;inset:0}\n.head{position:absolute;top:54px;left:64px;max-width:420px;pointer-events:none}\n.eyebrow{color:hsl(var(--h) 55% 40%)}\nh1{font-size:46px;font-weight:800;letter-spacing:-0.02em;margin-top:10px}\n.subtitle{margin-top:8px;font-size:23px;color:#79818f}\n.top{position:absolute;left:64px;top:230px;pointer-events:none}\n.top .row{display:flex;align-items:baseline;gap:14px;margin-top:18px}\n.top .rank{font-size:20px;font-weight:700;color:hsl(var(--h) 55% 42%);width:28px}\n.top .name{font-size:26px;font-weight:700;min-width:180px}\n.top .v{font-size:26px;font-weight:600;color:#5b6472;font-variant-numeric:tabular-nums}\n.foot{position:absolute;left:64px;right:64px;bottom:36px;display:flex;justify-content:space-between;font-size:18px;color:#98a0af;letter-spacing:.06em;text-transform:uppercase}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}'\u003e\n\u003cdiv id='map'\u003e\u003c/div\u003e\n\u003cdiv class='head'\u003e\n  \u003cp class='eyebrow'\u003e{{.eyebrow}}\u003c/p\u003e\n  \u003ch1\u003e{{.title}}\u003c/h1\u003e\n  {{if .subtitle}}\u003cp class='subtitle'\u003e{{.subtitle}}\u003c/p\u003e{{end}}\n\u003c/div\u003e\n\u003cdiv class='top' id='top'\u003e\u003c/div\u003e\n\u003cdiv class='foot'\u003e\u003cspan\u003emedia0\u003c/span\u003e\u003cspan\u003e{{.footnote}}\u003c/span\u003e\u003c/div\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar HUE=Number({{.hue}});\nvar UNIT={{.unit}};\nvar data={{.data}}.split(',').map(function(s){\n  var i=s.lastIndexOf(':');\n  return {name:s.slice(0,i).trim(),value:Number(s.slice(i+1))};\n}).filter(function(d){return d.name\u0026\u0026isFinite(d.value)});\ndata.sort(function(a,b){return b.value-a.value});\nvar topEl=document.getElementById('top');\ndata.slice(0,3).forEach(function(d,i){\n  var row=document.createElement('div');row.className='row';\n  ['rank','name','v'].forEach(function(cls,j){\n    var el=document.createElement('span');el.className=cls;\n    el.textContent=j===0?(i+1)+'.':j===1?d.name:d.value.toLocaleString('en-US')+' '+UNIT;\n    row.appendChild(el);\n  });\n  topEl.appendChild(row);\n});\nvar chart=echarts.init(document.getElementById('map'));\nwindow.m0ready=fetch('https://cdn.jsdelivr.net/npm/@highcharts/map-collection@2.3.0/custom/europe.geo.json')\n  .then(function(r){return r.json()})\n  .then(function(geo){\n    echarts.registerMap('europe',geo);\n    chart.setOption({\n      animation:false,\n      visualMap:{\n        type:'continuous',min:0,max:data[0]?data[0].value:1,\n        orient:'horizontal',right:64,bottom:56,itemWidth:14,itemHeight:170,\n        text:[data[0]?data[0].value.toLocaleString('en-US'):'','0'],\n        textStyle:{color:'#79818f',fontSize:18,fontFamily:\"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif\"},\n        inRange:{color:['hsl('+HUE+',55%,93%)','hsl('+HUE+',65%,42%)']},\n        calculable:false\n      },\n      series:[{\n        type:'map',map:'europe',silent:true,roam:false,aspectScale:1,\n        layoutCenter:['68%','50%'],layoutSize:620,\n        itemStyle:{areaColor:'#e9edf2',borderColor:'#fff',borderWidth:1.1},\n        label:{show:false},\n        data:data\n      }]\n    });\n  });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"data":{"type":"string","required":true,"maxLen":1500,"description":"Comma-separated country:value pairs with English country names, e.g. Germany:412,France:318. Unlisted countries render neutral."},"eyebrow":{"type":"string","default":"Weekly ops","maxLen":40,"description":"Small uppercase kicker above the title."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note."},"hue":{"type":"number","default":"160","maxLen":5,"description":"Choropleth hue 0-360, shaded light to dark by value."},"subtitle":{"type":"string","maxLen":90,"description":"Supporting line under the title."},"title":{"type":"string","required":true,"maxLen":60,"description":"Headline, e.g. Orders by country."},"unit":{"type":"string","default":"orders","maxLen":24,"description":"Unit shown next to the top-three values, e.g. orders."}}}}