wassname/moral-maps
1
0
Fork 0
mirror of https://github.com/wassname/moral-maps.git synced 2026-09-22 13:20:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Match React WVS crosshairs to static map

Browse Source 
Co-Authored-By: PI[gpt-5.6-terra] <288921227+claudypoo@users.noreply.github.com>
This commit is contained in:
wassname
2026-09-17 05:20:07 +08:00
co-authored by PI[gpt-5.6-terra]
parent 7f6ec57c58
commit f657321ea7
9 changed files with 340 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/wvs_react/src/main.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ function Map({ data }) {
const groups = useMemo(() => Object.groupBy(data.models, model => model.family), [data]);
const offsets = { grok:{dx:-72,dy:-30}, muse:{dx:12,dy:-11}, mistral:{dx:-96,dy:-26}, llama:{dx:-96,dy:12} };
return <><div className="controls">{Object.entries(groups).map(([family, models]) => <button key={family} className={hidden.has(family) ? 'off' : ''} style={{'--color': models[0].color}} onClick={() => setHidden(old => { const next = new Set(old); next.has(family) ? next.delete(family) : next.add(family); return next; })}>{family}: {data.latest_by_family[family].name}</button>)}</div>
<svg viewBox="0 0 1000 720" aria-label="React WVS cultural map"><line x1="70" y1={y((minY+maxY)/2)} x2="930" y2={y((minY+maxY)/2)} className="axis"/><line x1={x((minX+maxX)/2)} y1="70" x2={x((minX+maxX)/2)} y2="650" className="axis"/>
<svg viewBox="0 0 1000 720" aria-label="React WVS cultural map"><line x1="70" y1={y(data.median.y)} x2="930" y2={y(data.median.y)} className="axis"/><line x1={x(data.median.x)} y1="70" x2={x(data.median.x)} y2="650" className="axis"/>
{Object.entries(data.zones).map(([name, names]) => { const h=hull(data.countries.filter(p=>names.includes(p.name))); const c=h.reduce((s,p)=>({x:s.x+p.x/h.length,y:s.y+p.y/h.length}),{x:0,y:0}); return <g key={name}><polygon points={h.map(p=>`${x(p.x)},${y(p.y)}`).join(' ')} className="zone"/><text x={x(c.x)} y={y(c.y)} className="zoneLabel">{name}</text></g>; })}
{data.countries.map(p => <circle key={p.name} cx={x(p.x)} cy={y(p.y)} r="3" className="country"><title>{p.name}</title></circle>)}
{Object.entries(groups).map(([family, models]) => <g key={family} display={hidden.has(family) ? 'none' : 'inline'}>{models.map(p => { const o=offsets[family] ?? {dx:11,dy:-11}; return <g key={p.name}><path d={`M ${x(p.x)} ${y(p.y)-8} L ${x(p.x)+2.4} ${y(p.y)-2.4} L ${x(p.x)+8} ${y(p.y)-2.4} L ${x(p.x)+3.6} ${y(p.y)+1.6} L ${x(p.x)+5.2} ${y(p.y)+7} L ${x(p.x)} ${y(p.y)+4} L ${x(p.x)-5.2} ${y(p.y)+7} L ${x(p.x)-3.6} ${y(p.y)+1.6} L ${x(p.x)-8} ${y(p.y)-2.4} L ${x(p.x)-2.4} ${y(p.y)-2.4} Z`} fill={p.color} className="star"><title>{p.name}</title></path>{p.label && <><line x1={x(p.x)} y1={y(p.y)} x2={x(p.x)+o.dx*.82} y2={y(p.y)+o.dy*.82} stroke={p.color}/><text x={x(p.x)+o.dx} y={y(p.y)+o.dy} fill={p.color} className="modelLabel">{p.label}</text></>}</g>; })}</g>)}