Scatter & bubble

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

const data = {
  columns: [
    { key: 'weight', label: 'Weight' },
    { key: 'height', label: 'Height' },
  ],
  rows: [
    { weight: 60, height: 160 },
    { weight: 65, height: 165 },
    { weight: 70, height: 175 },
    { weight: 75, height: 170 },
    { weight: 80, height: 180 },
    { weight: 85, height: 178 },
    { weight: 90, height: 185 },
  ],
};

export function WeightVsHeight() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'weight', y: 'height' }),
        geom.point(),
        scale.x.continuous(),
        scale.y.continuous()
      ),
    []
  );

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

const spec = pipe(
  createSpec({ x: 'weight', y: 'height', color: 'gender' }),
  geom.point(),
  scale.x.continuous(),
  scale.y.continuous(),
  scale.color.palette()
);

const spec = pipe(
  createSpec({
    x: 'gdp',
    y: 'lifeExpectancy',
    size: 'population',
    color: 'continent',
  }),
  geom.point(),
  scale.x.continuous(),
  scale.y.continuous(),
  scale.size.continuous()
);