{"id":"5f462952-cb9a-44d6-b51b-a9f84f50c60b","name":"Your Visitors World Map","slug":"your-visitors-world-map","category":"email-charts","description":"A dark analytics hero for weekly report emails: the world at night with a glowing dot per location, sized by visitors, plus a big total. Feed lng:lat:value triples straight from your analytics.","sample_params":{"eyebrow":"Your visitors","footnote":"Aug 4 – Aug 10","hue":"195","points":"13.40:52.52:820,-0.12:51.50:1650,-74.01:40.71:2210,-122.42:37.77:1930,-46.63:-23.55:640,3.38:6.52:280,77.21:28.61:990,103.82:1.35:730,151.21:-33.87:410,139.69:35.69:1120,-79.38:43.65:520,55.27:25.20:340","title":"This week around the world","total":"12,480","total_label":"visitors · 7 days"},"spec":{"name":"your-visitors-world-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:linear-gradient(160deg,#0a101f 0%,#0d1730 60%,#101a38 100%);color:#eef2ff}\n#map{position:absolute;inset:0}\n.head{position:absolute;top:52px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}\n.eyebrow{color:hsl(var(--h) 90% 68%)}\nh1{font-size:48px;font-weight:800;letter-spacing:-0.02em;margin-top:10px;max-width:700px}\n.total{text-align:right}\n.total .n{font-size:70px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}\n.total .l{margin-top:8px;font-size:23px;color:#8fa0cc}\n.foot{position:absolute;left:64px;right:64px;bottom:38px;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 id='map'\u003e\u003c/div\u003e\n\u003cdiv class='head'\u003e\n  \u003cdiv\u003e\n    \u003cp class='eyebrow'\u003e{{.eyebrow}}\u003c/p\u003e\n    \u003ch1\u003e{{.title}}\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cdiv class='total'\u003e\n    \u003cdiv class='n'\u003e{{.total}}\u003c/div\u003e\n    \u003cdiv class='l'\u003e{{.total_label}}\u003c/div\u003e\n  \u003c/div\u003e\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/echarts@4.9.0/map/js/world.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar HUE=Number({{.hue}});\nvar pts={{.points}}.split(',').map(function(s){\n  var a=s.split(':').map(Number);\n  return [a[0],a[1],a[2]||1];\n}).filter(function(a){return isFinite(a[0])\u0026\u0026isFinite(a[1])});\nvar max=Math.max.apply(null,pts.map(function(a){return a[2]}));\nvar chart=echarts.init(document.getElementById('map'));\nchart.setOption({\n  animation:false,\n  geo:{\n    map:'world',silent:true,roam:false,aspectScale:.78,\n    layoutCenter:['50%','60%'],layoutSize:1250,\n    itemStyle:{areaColor:'#1a2547',borderColor:'rgba(148,163,210,0.22)',borderWidth:.7},\n    regions:[{name:'Antarctica',itemStyle:{areaColor:'transparent',borderWidth:0}}]\n  },\n  series:[{\n    type:'scatter',coordinateSystem:'geo',silent:true,\n    data:pts.map(function(a){return {value:a}}),\n    symbolSize:function(v){return 10+24*Math.sqrt(v[2]/max)},\n    itemStyle:{\n      color:'hsl('+HUE+' 92% 66%)',opacity:.95,\n      shadowBlur:22,shadowColor:'hsl('+HUE+' 92% 62% / .9)'\n    }\n  }]\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"eyebrow":{"type":"string","default":"Your visitors","maxLen":40,"description":"Small uppercase kicker, e.g. Your visitors."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note."},"hue":{"type":"number","default":"195","maxLen":5,"description":"Glow hue 0-360 of the visitor dots."},"points":{"type":"string","required":true,"maxLen":2000,"description":"Comma-separated lng:lat:value triples, e.g. 13.4:52.5:820,-74:40.7:2210. Dot size scales with value."},"title":{"type":"string","required":true,"maxLen":70,"description":"Headline over the map."},"total":{"type":"string","required":true,"maxLen":16,"description":"Big total shown top right."},"total_label":{"type":"string","default":"visitors","maxLen":40,"description":"Label under the total, e.g. visitors · 7 days."}}}}