// vercel.json { "build": { "env": { "NEXT_PUBLIC_ANALYTICS_ID": "@analytics_id" } }, "headers": [ { "source": "/(.*)", "headers": [ { "key": "Content-Security-Policy", "value": "default-src 'self' 'unsafe-inline' unpkg.com" } ] } ] }// src/components/AnimatedVisualization.jsx import { useSpring, animated } from '@react-spring/web'; import { motion } from 'framer-motion'; import * as d3 from 'd3';

const AnimatedGraph = ({ data }) => { // React Spring for fluid transitions const { x } = useSpring({ from: { x: 0 }, to: { x: 1 }, config: { tension: 170, friction: 26 } });

// D3 integration useEffect(() => { const svg = d3.select("#visualization"); // Clean implementation pattern const update = () => { svg.selectAll("rect") .data(data) .join("rect") .attr("width", d => x.get() * d.value) .attr("height", 20) };

const resizeObserver = new ResizeObserver(update);
resizeObserver.observe(document.body);

return () => {
  resizeObserver.disconnect();
  svg.selectAll("*").remove();
};

}, [data]);

return ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="visualization-container" > <svg id="visualization" width="100%" height="300" /> </motion.div> ); };