Interactive Vizualizations

basic.js

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

const Transition = () => {
	const [dataNum, setDataNum] = useState(true);
	const { val } = useSpring({
		val: dataNum ? 1 : 0,
	});

	return (
		<div>
			<button onClick={() => setDataNum(!dataNum)}>trigger</button>
			<div width={"800px"} height={"600px"}>
				<svg
					width={"100%"}
					height={"100%"}
					viewBox={`0 0 800 600`}
					xmlns="http://www.w3.org/2000/svg"
					xmlnsXlink="http://www.w3.org/1999/xlink"
					transform-origin="center"
				>
					<animated.circle
						cx={40}
						cy={val.to((x) => x * 200)}
						r={10}
						fill={"#ffe1a8"}
					/>
				</svg>
			</div>
		</div>
	);
};

export default Transition;

grid-to-random.js

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import { Grommet, Box } from "grommet";

const VIZ_WIDTH = 800;
const VIZ_HEIGHT = 600;

const data_one = {
	x: Array.from({ length: 3000 }, (v, i) => {
		const CELL_SIZE = 12;
		const TOTAL_CELLS = VIZ_WIDTH / CELL_SIZE;
		return ((i * CELL_SIZE) % TOTAL_CELLS) * 8;
	}),
	y: Array.from({ length: 3000 }, (v, i) => {
		const CELL_SIZE = 12;
		const TOTAL_CELLS = VIZ_HEIGHT / CELL_SIZE;
		return (i / TOTAL_CELLS) * 8;
	}),
};

const data_two = {
	x: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_WIDTH),
	y: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_HEIGHT),
};

const Transition = () => {
	const [dataNum, setDataNum] = useState(true);
	const { val } = useSpring({
		val: dataNum ? 0 : 1,
	});

	return (
		<Grommet full>
			<button onClick={() => setDataNum(!dataNum)}>trigger</button>

			<Box width={"800px"} height={"600px"} style={{ border: "1px" }}>
				<svg
					width={"100%"}
					height={"100%"}
					viewBox={`0 0 800 600`}
					xmlns="http://www.w3.org/2000/svg"
					xmlnsXlink="http://www.w3.org/1999/xlink"
					transform-origin="center"
					style={{ overflow: "visible" }}
				>
					{Array.from({ length: 2500 }, (v, i) => i).map((value) => (
						<animated.circle
							cx={val.to(
								(x) =>
									data_one.x[value] +
									(data_two.x[value] - data_one.x[value]) * x
							)}
							cy={val.to(
								(x) =>
									data_one.y[value] +
									(data_two.y[value] - data_one.y[value]) * x
							)}
							r={4}
							fill={"#ffe1a8"}
						/>
					))}
				</svg>
			</Box>
		</Grommet>
	);
};

export default Transition;

random-to-randome.js

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

const VIZ_WIDTH = 800;
const VIZ_HEIGHT = 600;

const data_one = {
	x: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_WIDTH),
	y: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_HEIGHT),
};

const data_two = {
	x: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_WIDTH),
	y: Array.from({ length: 3000 }, (v, i) => Math.random() * VIZ_HEIGHT),
};

const Transition = () => {
	const [dataNum, setDataNum] = useState(true);
	const { val } = useSpring({
		val: dataNum ? 0 : 1,
	});

	return (
		<div>
			<button onClick={() => setDataNum(!dataNum)}>trigger</button>

			<div width={"800px"} height={"600px"}>
				<svg
					width={"100%"}
					height={"100%"}
					viewBox={`0 0 800 600`}
					xmlns="http://www.w3.org/2000/svg"
					xmlnsXlink="http://www.w3.org/1999/xlink"
					transform-origin="center"
					style={{ overflow: "visible" }}
				>
					{Array.from({ length: 2500 }, (v, i) => i).map((value) => (
						<animated.circle
							cx={val.to(
								(x) =>
									data_one.x[value] +
									(data_two.x[value] - data_one.x[value]) * x
							)}
							cy={val.to(
								(x) =>
									data_one.y[value] +
									(data_two.y[value] - data_one.y[value]) * x
							)}
							r={4}
							fill={"#ffe1a8"}
						/>
					))}
				</svg>
			</div>
		</div>
	);
};

export default Transition;