Заметки про React(@ru_react_notes). Библиотеки для визуализации Подборка новых библиотек для визуализации данных для React: visx Библ

Библиотеки для визуализации Подборка новых библиотек для визуализации данных для React: visx Библиотека от Airbnb, использующая под капотом D3. Состоит из множества небольших пакетов-примитивов как в D3. Поэтому при сборке приложения в конечный бандл попадет только код используемых пакетов. На сайте заявляют, что это не готовая библиотека для построения графиков. С помощью этой библиотеки вы можете самостоятельно сделать свою библиотеку для построения графиков.

export default function Bars() {
  // --snip--
  const yScale = useMemo(
    () =>
      scaleLinear<number>({
        range: [yMax, 0],
        round: true,
        domain: [0, Math.max(...data.map(getLetterFrequency))],
      }),
    [yMax],
  );

  return (
    <svg width={width} height={height}>
      <GradientTealBlue id="teal" />
      <Group top={verticalMargin / 2}>
        {data.map((d) => {
          // --snip--
          const barHeight = yMax - (yScale(getLetterFrequency(d)) ?? 0);
          const barX = xScale(letter);
          return (
            <Bar
              key={`bar-${letter}`}
              x={barX}
              y={barY}
             // --snip--
            />
          );
        })}
      </Group>
    </svg>
  );
}

mafs Библиотека готовых компонентов для интерактивной математики. Позволяет создавать интерактивные и анимированные элементы из математики. Содержит компоненты: система координат, точки, линии, полигоны, круги и т.д.

function LineSegmentExample() {
  const point1 = useMovablePoint([-1, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ y: [-1, 1] }}>
      <CartesianCoordinates />
      <Line.Segment
        point1={point1.point}
        point2={point2.point}
      />
      {point1.element}
      {point2.element}
    </Mafs>
  )
}