Mouse Follower

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_118":-5,"_63":16,"_119":-5,"_120":121,"_122":123},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":72,"_97":72,"_44":98,"_99":-7,"_100":52,"_101":50,"_102":-5,"_103":104,"_105":16,"_106":107,"_108":109,"_110":43,"_111":-7,"_69":112,"_71":113,"_114":-5,"_115":68,"_116":117},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":41,"_67":68,"_69":70,"_71":70},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/guoci/65323563a64c45079ecbb2e24844a8eb","author","guoci","id","6359281c283c42b2afbaaa9c26b5fc65","title","Mouse Follower","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-guoci","accountType","user","email","zguoci@gmail.com","displayName","Guo Ci","avatar","https://avatars.githubusercontent.com/u/1260178?v=4","oauthProvider","github","oauthId","1260178","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791069051616,"updatedAt","65323563a64c45079ecbb2e24844a8eb","files",{"_75":76,"_77":78,"_79":80,"_81":82,"_83":84},"29fbc049",{"_85":95,"_87":96},"334b4d4f",{"_85":93,"_87":94},"6b40f9d6",{"_85":91,"_87":92},"8dbc301e",{"_85":89,"_87":90},"e783b6db",{"_85":86,"_87":88},"name","styles.css","text","body {\n margin: 0;\n overflow: hidden;\n}\n","index.html","\n\n \n Mouse Follower\n \n \n \n \n

\n \n \n\n","index.js","import { select } from 'd3';\nimport { viz } from './viz';\nconst container = select('#app').node();\nlet state = {};\n\nconst render = () => {\n viz(container, {\n state,\n setState,\n });\n};\n\nconst setState = (next) => {\n state = next();\n render();\n};\n\nrender();\n","viz.js","import { select } from 'd3';\n\nexport const viz = (\n container,\n { state, setState }\n) => {\n const svg = select(container)\n .selectAll('svg')\n .data([null])\n .join('svg')\n .attr('width', window.innerWidth)\n .attr('height', window.innerHeight);\n\n svg.on('mousemove', (event) => {\n setState(() => ({\n x: event.x,\n y: event.y,\n }));\n });\n\n const { x, y } = state;\n\n // Set the initial state\n if (x === undefined) {\n setState(() => ({\n x: window.innerWidth / 2,\n y: window.innerHeight / 2,\n }));\n return;\n }\n\n svg\n .selectAll('circle')\n .data([null])\n .join('circle')\n .attr('cx', x)\n .attr('cy', y)\n .attr('r', 50);\n};\n","README.md","A circle that follows the mouse using unidirectional data flow. See also [Mouse Follower with React](https://vizhub.com/curran/8df8f0e318a046059501ba8f93b9c199).\n\n","slug","Fork of Mouse Follower","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","b3b94973dd6e41039b8d9bd26b4fbf5c","startCommitId","4851aa0207ef48a8993acb385ea85b23","forkedFrom","forkedFromVisibility",1720462923000,1720463290000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]