{"id":"81623942-75ea-4de6-b142-e9e3facf80f9","name":"Globe Highlight","slug":"globe-highlight","category":"email-charts","description":"An expansion-announcement globe for launch emails: an orthographic Earth auto-rotated to your new market, the country lit in your accent hue, headline and subtitle on the left.","sample_params":{"eyebrow":"Expansion","footnote":"Rollout · August 2026","highlight":"Japan","hue":"200","subtitle":"Tokyo region · local rendering · lower latency","title":"Now live in Japan"},"spec":{"name":"globe-highlight","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:#070d1f;color:#eef2ff}\n.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#ffffff88 50%,transparent 51%),radial-gradient(1px 1px at 30% 72%,#ffffff55 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 12%,#ffffff66 50%,transparent 51%),radial-gradient(1px 1px at 76% 84%,#ffffff44 50%,transparent 51%),radial-gradient(1px 1px at 88% 34%,#ffffff66 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 46%,#ffffff33 50%,transparent 51%)}\n.ocean{position:absolute;left:calc(74% - 250px);top:calc(50% - 250px);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#20396c 0%,#132347 55%,#0c1730 100%);box-shadow:0 0 90px hsl(var(--h) 80% 60% / .35),inset -30px -24px 70px rgba(0,0,0,.55)}\n#map{position:absolute;inset:0}\n.head{position:absolute;top:0;bottom:0;left:64px;width:540px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}\n.eyebrow{color:hsl(var(--h) 90% 66%)}\nh1{font-size:62px;font-weight:800;letter-spacing:-0.02em;line-height:1.08;margin-top:16px}\n.subtitle{margin-top:18px;font-size:27px;color:#8fa0cc;line-height:1.4;max-width:480px}\n.foot{position:absolute;left:64px;right:64px;bottom:36px;display:flex;justify-content:space-between;font-size:18px;color:#5f6c96;letter-spacing:.06em;text-transform:uppercase}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}'\u003e\n\u003cdiv class='stars'\u003e\u003c/div\u003e\n\u003cdiv class='ocean'\u003e\u003c/div\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='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 src='https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js'\u003e\u003c/script\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/d3-array@3.2.4/dist/d3-array.min.js'\u003e\u003c/script\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/d3-geo@3.1.1/dist/d3-geo.min.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar HUE=Number({{.hue}});\nvar highlight=String({{.highlight}}||'').split(',').map(function(s){return s.trim()}).filter(Boolean);\nvar chart=echarts.init(document.getElementById('map'));\n// world-atlas is real lon/lat TopoJSON (the echarts@4 world.js bundle ships\n// UTF8-packed coordinates that d3 cannot read), so one dataset drives both\n// the drawn map and the centroid math.\nwindow.m0ready=fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')\n  .then(function(r){return r.json()})\n  .then(function(topo){\n    var world=topojson.feature(topo,topo.objects.countries);\n    echarts.registerMap('world',world);\n    // Match highlight names case-insensitively, keep canonical names for styling.\n    var wanted=highlight.map(function(n){return n.toLowerCase()});\n    var matched=world.features.filter(function(f){return wanted.indexOf(String(f.properties.name).toLowerCase())\u003e=0});\n    var names=matched.length?matched.map(function(f){return f.properties.name}):highlight;\n    // Auto-rotate the globe to the highlighted region.\n    var center=matched.length?d3.geoCentroid({type:'FeatureCollection',features:matched}):[10,30];\n    var proj=d3.geoOrthographic().rotate([-center[0],-center[1]]).clipAngle(90);\n    chart.setOption({\n      animation:false,\n      geo:{\n        map:'world',silent:true,roam:false,\n        layoutCenter:['74%','50%'],layoutSize:500,\n        projection:{\n          project:function(pt){return proj(pt)},\n          unproject:function(pt){return proj.invert(pt)},\n          stream:proj.stream\n        },\n        itemStyle:{areaColor:'#2b4275',borderColor:'rgba(160,180,230,0.28)',borderWidth:.8},\n        regions:names.map(function(name){return {\n          name:name,\n          itemStyle:{\n            areaColor:'hsl('+HUE+' 88% 60%)',borderColor:'#fff',borderWidth:1.2,\n            shadowBlur:30,shadowColor:'hsl('+HUE+' 90% 60% / .8)'\n          }\n        }})\n      }\n    });\n  });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"eyebrow":{"type":"string","default":"Expansion","maxLen":40,"description":"Small uppercase kicker, e.g. Expansion."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note."},"highlight":{"type":"string","default":"Japan","maxLen":200,"description":"Comma-separated English country names to light up, e.g. Japan or Germany,France."},"hue":{"type":"number","default":"200","maxLen":5,"description":"Accent hue 0-360 for the highlighted countries and glow."},"subtitle":{"type":"string","maxLen":120,"description":"Supporting line under the title."},"title":{"type":"string","required":true,"maxLen":60,"description":"Headline, e.g. Now live in Japan."}}}}