import React, { useState, useRef, useEffect, useCallback } from "react"; import anime from "animejs"; const SAMPLE_DATASETS = [ { name: "City Temperatures", data: [ { label: "London", value: 12 }, { label: "Tokyo", value: 18 }, { label: "Cairo", value: 21 }, { label: "Paris", value: 15 }, { label: "Nairobi", value: 24 }, ], unit: "°C", }, { name: "Rainbow Colors", data: [ { label: "Red", value: 40 }, { label: "Orange", value: 35 }, { label: "Yellow", value: 38 }, { label: "Green", value: 31 }, { label: "Blue", value: 28 }, { label: "Indigo", value: 26 }, { label: "Violet", value: 17 }, ], unit: "pts", }, { name: "Game Scores", data: [ { label: "Mario", value: 96 }, { label: "Peach", value: 76 }, { label: "Luigi", value: 61 }, { label: "Toad", value: 83 }, { label: "Yoshi", value: 69 }, ], unit: "pts", }, ]; const STYLES = [ { key: "emoji-bar", emoji: "🌡️", label: "Emoji Bar Chart", }, { key: "bubbles", emoji: "🟠", label: "Bouncing Bubbles", }, { key: "dancing-lines", emoji: "📈", label: "Dancing Lines", }, ]; const THEMES = [ { name: "Classic", accent: "#6366f1", surface: "#f1f5f9", muted: "#e5e7eb", emojiBg: "#e0e7ff", }, { name: "Sunny", accent: "#fbbf24", surface: "#fef3c7", muted: "#fde68a", emojiBg: "#fef08a", }, { name: "Ocean", accent: "#06b6d4", surface: "#e0f2fe", muted: "#bae6fd", emojiBg: "#cffafe", }, { name: "Candy", accent: "#f472b6", surface: "#fce7f3", muted: "#fbcfe8", emojiBg: "#fbeffb", }, { name: "Jungle", accent: "#22c55e", surface: "#dcfce7", muted: "#bbf7d0", emojiBg: "#d9f99d", }, ]; function randomFromArray(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function EmojiBarChart({ data, unit, theme }) { // Animate scale when bars appear const barsRef = useRef([]); useEffect(() => { barsRef.current.forEach((el) => { if (el) { anime({ targets: el, scaleX: [0, 1], easing: "easeOutBack", duration: 800, delay: anime.stagger(120), }); } }); }, [data, theme]); // Bar proportional to max value const max = Math.max(...data.map((d) => d.value)); return (

{data.map((d, idx) => (

🌡️

barsRef.current[idx] = el} className="rounded-l-full h-5 shadow-sm" style={{ background: theme.accent, width: `${Math.round((d.value/max)*100)}%`, transition: 'width 0.6s cubic-bezier(.82,0,.29,1)', }} >

{d.value}{unit ? ` ${unit}` : ''}

{d.label}

))}

); } function BouncingBubbles({ data, unit, theme }) { const canvasRef = useRef(null); // Bubbles animate up and bounce on load useEffect(() => { const bubbles = data.map((d, i) => { return { x: 40 + i * 56, y: 120, r: 22 + Math.round(d.value/Math.max(...data.map(d=>d.value))*15), label: d.label, value: d.value, color: theme.accent, }; }); function draw(ctx) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); bubbles.forEach((b, i) => { ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); ctx.fillStyle = theme.emojiBg; ctx.shadowColor = theme.accent; ctx.shadowBlur = 12; ctx.fill(); ctx.shadowBlur = 0; ctx.font = 'bold 15px var(--ds-font-body)'; ctx.fillStyle = theme.accent; ctx.textAlign = 'center'; ctx.fillText(String(b.value)+(unit?` ${unit}`:''), b.x, b.y+6); ctx.font = '12px var(--ds-font-body)'; ctx.fillStyle = '#666'; ctx.fillText(b.label, b.x, b.y+b.r+16); }); } // Animate the bubbles - bounce in let progress = 0; let reversing = false; function animateFn() { progress += reversing ? -0.045 : 0.075; if (progress > 1) { progress = 1; reversing = true; } if (progress < 0.03) progress = 0; let ease = 1-Math.pow(1-progress,2); bubbles.forEach((b, i) => { b.y = 60 + Math.abs(Math.sin(progress*3.14+0.5*i))*16 + (1-ease)*40; }); const ctx = canvasRef.current.getContext('2d'); draw(ctx); if (progress < 1.01) { requestAnimationFrame(animateFn); } } // Setup canvas size const canvas = canvasRef.current; canvas.width = 56 * data.length + 34; canvas.height = 170; animateFn(); // Clean up return () => { // No-op }; }, [data, theme, unit]); return (

); } function DancingLines({ data, unit, theme }) { // Each line wiggles in an animated fashion const svgRef = useRef(null); const [t, setT] = useState(0); useEffect(() => { let anim = null; let start = Date.now(); function frame() { setT(((Date.now()-start)/1200)%4); anim = requestAnimationFrame(frame); } anim = requestAnimationFrame(frame); return () => cancelAnimationFrame(anim); }, [data]); const max = Math.max(...data.map(d=>d.value)); const width = 60 + 50*data.length, height = 120; return ( ); } // Mapping of visualization style to live React component const VIS_COMPONENTS = { "emoji-bar": EmojiBarChart, "bubbles": BouncingBubbles, "dancing-lines": DancingLines, }; export default function App() { const [selectedData, setSelectedData] = useState(SAMPLE_DATASETS[0]); const [selectedStyleKey, setSelectedStyleKey] = useState("emoji-bar"); const [themeIdx, setThemeIdx] = useState(0); const [isStyleDragOver, setIsStyleDragOver] = useState(false); // Drag-and-drop: Style icons are draggable, drop onto area const onDragStart = (e, styleKey) => { e.dataTransfer.setData("styleKey", styleKey); }; const onDrop = (e) => { e.preventDefault(); const styleKey = e.dataTransfer.getData("styleKey"); if (styleKey && VIS_COMPONENTS[styleKey]) { setSelectedStyleKey(styleKey); } setIsStyleDragOver(false); }; const onDragOver = (e) => { e.preventDefault(); setIsStyleDragOver(true); }; const onDragLeave = (e) => { setIsStyleDragOver(false); }; // Get current style component const Visualization = VIS_COMPONENTS[selectedStyleKey]; const currentTheme = THEMES[themeIdx % THEMES.length]; return (

Data Doodles Studio

Playfully visualize sample data as animated infographics! 🎨
Drag a visualization style below onto the canvas and see your data spring to life. Try different color themes for flavor!

{/* Data picker */}

{SAMPLE_DATASETS.map((d, i) => ( ))}

{/* Main visualization area with drop area */}

Theme

{selectedData.name} ({currentTheme.name} theme)

{/* Visualization */}

{/* If style being dragged, show drop tip */} {isStyleDragOver && (

Release to use this style!

)}

{/* Visualization style palette */}

{STYLES.map((s) => (

onDragStart(e, s.key)} onClick={() => setSelectedStyleKey(s.key)} className={`flex flex-col items-center p-3 rounded-xl cursor-grab select-none border-2 border-card hover:border-[var(--ds-accent)] bg-muted transition-all shadow-sm focus:outline-none ${selectedStyleKey===s.key?'bg-[var(--ds-accent)]/10 border-[var(--ds-accent)]':''}`} style={{minWidth:100, minHeight:96, boxShadow:'0 1px 8px #0001'}} tabIndex={0} aria-label={s.label} > {s.emoji} {s.label} {selectedStyleKey===s.key && ( Active )}

))}

{/* Footer/help */}

💡 Tip: Click or drag a visual style onto the canvas.
Try switching datasets and color themes for more doodle fun!

); }