<commit_before><p align="center">
  <img src="./assets/tiger-sm.png" />
</p>

<p align="center">
  <code>react + d3 = vx</code>
</p>

<p align="center">
  <img src="https://img.shields.io/npm/v/@vx/demo.svg?style=flat-square" />
  <img src="https://img.shields.io/npm/dm/@vx/demo.svg?style=flat-square" />
</p>

### vx

A collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization and react for updating the DOM.

Super beta. Hold off on using this in production until I shake out some of the bigger API problems (post `v1.0.0+`).

## Table of contents

1. [Motivation](#motivation)
1. [Examples](#examples)
1. [Packages](#packages)
1. [Roadmap](#roadmap)
1. [FAQ](#faq)

## Motivation

Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into `componentDidMount()` is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or `enter()/exit()/update()`.

## Examples

+ [Simple line chart](https://github.com/hshoff/vx/blob/master/packages/vx-demo/src/demos/charts/SimpleLineChart.js)
+ [Simple line with glyphs chart](https://github.com/hshoff/vx/blob/master/packages/vx-demo/src/demos/charts/SimpleLineWithGlyphsChart.js)
+ [Simple area chart](https://github.com/hshoff/vx/blob/master/packages/vx-demo/src/demos/charts/SimpleAreaChart.js)

## Packages

- [@vx/axis](https://github.com/hshoff/vx/tree/master/packages/vx-axis)
- [@vx/curve](https://github.com/hshoff/vx/tree/master/packages/vx-curve)
- [@vx/demo](https://github.com/hshoff/vx/tree/master/packages/vx-demo)
- [@vx/glyph](https://github.com/hshoff/vx/tree/master/packages/vx-glyph)
- [@vx/grid](https://github.com/hshoff/vx/tree/master/packages/vx-grid)
- [@vx/group](https://github.com/hshoff/vx/tree/master/packages/vx-group)
- [@vx/marker](https://github.com/hshoff/vx/tree/master/packages/vx-marker)
- [@vx/mock-data](https://github.com/hshoff/vx/tree/master/packages/vx-mock-data)
- [@vx/point](https://github.com/hshoff/vx/tree/master/packages/vx-point)
- [@vx/responsive](https://github.com/hshoff/vx/tree/master/packages/vx-responsive)
- [@vx/scale](https://github.com/hshoff/vx/tree/master/packages/vx-scale)
- [@vx/shape](https://github.com/hshoff/vx/tree/master/packages/vx-shape)
- [@vx/text](https://github.com/hshoff/vx/tree/master/packages/vx-text)

## Roadmap

Lots coming soon, check out the [roadmap](./ROADMAP.md).

## FAQ

1. What does `vx` stand for?

    > vx stands for visualization components.

1. Do you plan on supporting animation/transitions?

    > yup!<commit_msg>[vx] update readme<commit_after><p align="center">
  <img src="./assets/tiger-sm.png" />
</p>

<p align="center">
  <code>react + d3 = vx</code>
</p>

<p align="center">
  <img src="https://img.shields.io/npm/v/@vx/demo.svg?style=flat-square" />
  <img src="https://img.shields.io/npm/dm/@vx/demo.svg?style=flat-square" />
</p>

### vx

A collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization and react for updating the DOM.

Super beta. Hold off on using this in production until I shake out some of the bigger API problems (post `v1.0.0+`).

[View Docs](https://vx-demo.now.sh)

## Motivation

Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into `componentDidMount()` is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or `enter()/exit()/update()`.


## Roadmap

Lots coming soon, check out the [roadmap](./ROADMAP.md).

## FAQ

1. What does `vx` stand for?

    > vx stands for visualization components.

1. Do you plan on supporting animation/transitions?

    > yup!
{'fraction_non_alphanumeric': 0.16459305339554173, 'fraction_numerical': 0.0059616381544841885, 'mean_word_length': 4.145333333333333, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 21, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3643488', 'n_tokens_mistral': 1440, 'n_tokens_neox': 1312, 'n_words': 322}