prettier(root): run on *.md

Chris Williams · Chris Williams · commit f618ba3ac333 · 2019-08-22T14:23:12.000-07:00
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -2,45 +2,64 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers
+pledge to making participation in our project and our community a harassment-free experience for
+everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level
+of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 
 ## Our Standards
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit
+  permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are
+expected to take appropriate and fair corrective action in response to any instances of unacceptable
+behavior.
 
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits,
+code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or
+to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies both within project spaces and in public spaces when an individual is
+representing the project or its community. Examples of representing a project or community include
+using an official project e-mail address, posting via an official social media account, or acting as
+an appointed representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hi@hshoff.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting
+the project team at hi@hshoff.com. The project team will review and investigate all complaints, and
+will respond in a way that it deems appropriate to the circumstances. The project team is obligated
+to maintain confidentiality with regard to the reporter of an incident. Further details of specific
+enforcement policies may be posted separately.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face
+temporary or permanent repercussions as determined by other members of the project's leadership.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at
+[http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
 [version]: http://contributor-covenant.org/version/1/4/
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -1,6 +1,6 @@
 #### :boom: Breaking Changes
 
-- 
+-
 
 #### :rocket: Enhancements
 
@@ -12,7 +12,7 @@
 
 #### :bug: Bug Fix
 
-- 
+-
 
 #### :house: Internal
 
diff --git a/README.md b/README.md
@@ -27,7 +27,8 @@
 
 ### vx
 
-vx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.
+vx is a collection of reusable low-level visualization components. vx combines the power of d3 to
+generate your visualization with the benefits of react for updating the DOM.
 
 <br />
 
@@ -57,14 +58,12 @@ vx is a collection of reusable low-level visualization components. vx combines t
   </strong>
 </p>
 
-
 <p align="center">
   <a href="https://vx-demo.now.sh/gallery">
     <img src="./assets/vx-gallery.png" />
   </a>
 </p>
 
-
 ## Usage
 
 [![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/kind-modem)
@@ -114,9 +113,15 @@ const yScale = scaleLinear({
 });
 
 // Compose together the scale and accessor functions to get point functions
-const compose = (scale, accessor) => (data) => scale(accessor(data));
-const xPoint = compose(xScale, x);
-const yPoint = compose(yScale, y);
+const compose = (scale, accessor) => data => scale(accessor(data));
+const xPoint = compose(
+  xScale,
+  x,
+);
+const yPoint = compose(
+  yScale,
+  y,
+);
 
 // Finally we'll embed it all in an SVG
 function BarGraph(props) {
@@ -131,7 +136,7 @@ function BarGraph(props) {
               y={yMax - barHeight}
               height={barHeight}
               width={xScale.bandwidth()}
-              fill='#fc2e1c'
+              fill="#fc2e1c"
             />
           </Group>
         );
@@ -150,86 +155,124 @@ For more examples using `vx`, check out the [gallery](https://vx-demo.now.sh/gal
 
 **Goal**
 
-The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart. vx is largely unopinionated and is meant to be build on top of. Keep your bundle sizes down and use only the packages you need.
+The goal is to create a library of components you can use to make both your own reusable chart
+library or your slick custom one-off chart. vx is largely unopinionated and is meant to be build on
+top of. Keep your bundle sizes down and use only the packages you need.
 
 **How?**
 
-Under the hood, vx is using d3 for the calculations and math. If you're creating your own awesome chart library on top of vx, it's easy to create a component api that hides d3 entirely. Meaning your team could create charts as easily as using reusable react components.
+Under the hood, vx is using d3 for the calculations and math. If you're creating your own awesome
+chart library on top of vx, it's easy to create a component api that hides d3 entirely. Meaning your
+team could create charts as easily as using reusable react components.
 
 **But why?**
 
-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()`.
+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()`.
 
 ## Status
 
-`Beta` We're still in pre v1. Need to add interactions. No breaking changes planned right now [read more](https://github.com/hshoff/vx/issues/156#issuecomment-331318108). Check out [the road to v1](https://github.com/hshoff/vx/projects/1).
+`Beta` We're still in pre v1. Need to add interactions. No breaking changes planned right now
+[read more](https://github.com/hshoff/vx/issues/156#issuecomment-331318108). Check out
+[the road to v1](https://github.com/hshoff/vx/projects/1).
 
-If you're a curious coder, feel free to install and play around with the packages. I recommend using `--save-exact` when you `npm install`.
+If you're a curious coder, feel free to install and play around with the packages. I recommend using
+`--save-exact` when you `npm install`.
 
 ## Roadmap
 
 Lots coming soon, check out the [roadmap](./ROADMAP.md).
 
 ## In the wild
 
-- [williaster/data-ui](https://github.com/williaster/data-ui) ([Demo](https://williaster.github.io/data-ui/))
-- [Flaque/data-structures](https://github.com/Flaque/data-structures) ([Interactive explanation of the trie data structure](https://trie.now.sh/))
-- [dylanmoz/trello](https://github.com/DylanMoz/dylanmoz.github.io/blob/source/src/pages/trello/TrelloGraph.js) ([Demo](http://dylanmoz.github.io/trello/)) ([How to Make Beautiful Graphs With vx and React-Motion](https://devblog.classy.org/how-to-make-beautiful-graphs-with-vx-and-react-motion-6ffe7aecf6f3))
-- [gkunthara/Crypto-Chart](https://github.com/gkunthara/Crypto-Chart) ([Demo](https://www.crypto-chart.com/home)) ([Tutorial](https://medium.com/@georgekunthara/after-the-tutorial-the-first-react-app-4dce6645634e))
-- Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj)) ([Radial demo](https://codesandbox.io/s/vmqwrkl395)) ([More info](https://github.com/hshoff/vx/issues/162#issuecomment-335029517))
-- Bitcoin 30-day price by [@hshoff](https://github.com/hshoff) ([Demo](https://viewsource.now.sh/bitcoin)) ([Github](https://github.com/hshoff/viewsource#1-bitcoin-price-chart)) ([YouTube](https://www.youtube.com/watch?v=oeE2tuspdHg))
-- Ethereum candlestick chart by [@hshoff](https://github.com/hshoff) ([Demo](https://viewsource.now.sh/ethereum)) ([Github](https://github.com/hshoff/viewsource#2-ethereum-candlestick-chart))
-- Song data visualization through spotify by [@bother7](https://github.com/bother7) ([Demo](https://spotalyzer-frontend.herokuapp.com/demo) ([Github](https://github.com/bother7/spotalyzer_frontend))
+- [williaster/data-ui](https://github.com/williaster/data-ui)
+  ([Demo](https://williaster.github.io/data-ui/))
+- [Flaque/data-structures](https://github.com/Flaque/data-structures)
+  ([Interactive explanation of the trie data structure](https://trie.now.sh/))
+- [dylanmoz/trello](https://github.com/DylanMoz/dylanmoz.github.io/blob/source/src/pages/trello/TrelloGraph.js)
+  ([Demo](http://dylanmoz.github.io/trello/))
+  ([How to Make Beautiful Graphs With vx and React-Motion](https://devblog.classy.org/how-to-make-beautiful-graphs-with-vx-and-react-motion-6ffe7aecf6f3))
+- [gkunthara/Crypto-Chart](https://github.com/gkunthara/Crypto-Chart)
+  ([Demo](https://www.crypto-chart.com/home))
+  ([Tutorial](https://medium.com/@georgekunthara/after-the-tutorial-the-first-react-app-4dce6645634e))
+- Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by
+  [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj))
+  ([Radial demo](https://codesandbox.io/s/vmqwrkl395))
+  ([More info](https://github.com/hshoff/vx/issues/162#issuecomment-335029517))
+- Bitcoin 30-day price by [@hshoff](https://github.com/hshoff)
+  ([Demo](https://viewsource.now.sh/bitcoin))
+  ([Github](https://github.com/hshoff/viewsource#1-bitcoin-price-chart))
+  ([YouTube](https://www.youtube.com/watch?v=oeE2tuspdHg))
+- Ethereum candlestick chart by [@hshoff](https://github.com/hshoff)
+  ([Demo](https://viewsource.now.sh/ethereum))
+  ([Github](https://github.com/hshoff/viewsource#2-ethereum-candlestick-chart))
+- Song data visualization through spotify by [@bother7](https://github.com/bother7)
+  ([Demo](https://spotalyzer-frontend.herokuapp.com/demo)
+  ([Github](https://github.com/bother7/spotalyzer_frontend))
 - Investment Calculator ([website](https://investmentcalculator.io/))
 - Cryptagon - crypto portfolio tracker ([website](https://cryptagon.io/))
-- Animation with [`react-spring`](https://github.com/drcmda/react-spring/) by [@drcmda](https://github.com/drcmda) ([Demo](https://codesandbox.io/embed/j3x61vjz5v))
+- Animation with [`react-spring`](https://github.com/drcmda/react-spring/) by
+  [@drcmda](https://github.com/drcmda) ([Demo](https://codesandbox.io/embed/j3x61vjz5v))
 - Code Coverage Dashboard by [@ezy](https://github.com/ezy)
-([Demo](https://codecov-dash.herokuapp.com/))
-([Github](https://github.com/ezy/code-coverage-dashboard))
+  ([Demo](https://codecov-dash.herokuapp.com/))
+  ([Github](https://github.com/ezy/code-coverage-dashboard))
 - Ethereum Portfolio Toolkit by [@JayWelsh](https://github.com/JayWelsh)
-([Demo](https://cryptocape.com/))
-([Github](https://github.com/JayWelsh/CryptoCape))
-- Family tree by [@vkallore](https://github.com/vkallore) ([Demo](https://vk-ft.now.sh/))([Github](https://github.com/vkallore/d3-vx-family-tree))
+  ([Demo](https://cryptocape.com/)) ([Github](https://github.com/JayWelsh/CryptoCape))
+- Family tree by [@vkallore](https://github.com/vkallore)
+  ([Demo](https://vk-ft.now.sh/))([Github](https://github.com/vkallore/d3-vx-family-tree))
 - Have a project that's using vx? Open a pull request and we'll add it to the list.
 
 ## FAQ
 
 1. What does `vx` stand for?
 
-    > vx stands for visualization components.
+   > vx stands for visualization components.
 
 1. Do you plan on supporting animation/transitions?
-    > A common criticism of vx is it doesn't have animation baked in, but this was a concious choice. It's a powerful feature to not bake it in.
-    >
-    > Imagine your app already bundles `react-motion`, adding a hypothetical `@vx/animation` is bloat. Since vx is react, it already supports all react animation libs.
-    >
-    > Charting libraries are like style guides. Each org or app will eventually want full control over their own implementation.
-    >
-    > vx makes this easier for everyone. No need to reinvent the wheel each time.
-    >
-    > more info: https://github.com/hshoff/vx/issues/6
-    >
-    > examples:
-    >   - Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj)) ([Radial demo](https://codesandbox.io/s/vmqwrkl395))
-    >   - Animation with `react-spring` by [@drcmda](https://github.com/drcmda) ([Demo](https://codesandbox.io/embed/j3x61vjz5v))
+
+   > A common criticism of vx is it doesn't have animation baked in, but this was a concious choice.
+   > It's a powerful feature to not bake it in.
+   >
+   > Imagine your app already bundles `react-motion`, adding a hypothetical `@vx/animation` is
+   > bloat. Since vx is react, it already supports all react animation libs.
+   >
+   > Charting libraries are like style guides. Each org or app will eventually want full control
+   > over their own implementation.
+   >
+   > vx makes this easier for everyone. No need to reinvent the wheel each time.
+   >
+   > more info: https://github.com/hshoff/vx/issues/6
+   >
+   > examples:
+   >
+   > - Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by
+   >   [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj))
+   >   ([Radial demo](https://codesandbox.io/s/vmqwrkl395))
+   > - Animation with `react-spring` by [@drcmda](https://github.com/drcmda)
+   >   ([Demo](https://codesandbox.io/embed/j3x61vjz5v))
 
 1. Do I have to use every package to make a chart?
 
-    > nope! pick and choose the packages you need.
+   > nope! pick and choose the packages you need.
 
 1. Can I use this to create my own library of charts for my team?
 
-    > Please do.
+   > Please do.
 
 1. Does vx work with [preact](https://preactjs.com/)?
 
-    > yup! need to alias `react` + `react-dom` and use `preact-compat`. Here's a quick demo: https://vx-preact.now.sh/. [more info](https://preactjs.com/guide/switching-to-preact#how-to-alias-preact-compat)
+   > yup! need to alias `react` + `react-dom` and use `preact-compat`. Here's a quick demo:
+   > https://vx-preact.now.sh/.
+   > [more info](https://preactjs.com/guide/switching-to-preact#how-to-alias-preact-compat)
 
 1. I like using d3.
 
-    > Me too.
+   > Me too.
 
 ## Development
+
 [lerna](https://github.com/lerna/lerna/) is used to manage versions and dependencies between
 packages in the umbrella vx repo.
 
@@ -249,8 +292,9 @@ vx/
     ...
 ```
 
-For easiest development clone or fork vx, install the _root_ dependencies including lerna,
-then have lerna install package dependencies and manage the symlinking between packages for you by using the [`lerna bootstrap`](https://github.com/lerna/lerna#bootstrap) command:
+For easiest development clone or fork vx, install the _root_ dependencies including lerna, then have
+lerna install package dependencies and manage the symlinking between packages for you by using the
+[`lerna bootstrap`](https://github.com/lerna/lerna#bootstrap) command:
 
 ```sh
 git clone git@github.com:hshoff/vx.git # or your fork
@@ -259,7 +303,11 @@ npm install # installs root vx deps
 ./node_modules/.bin/lerna bootstrap # installs all package deps, sym-links within-vx deps
 ```
 
-Upon modification of a given package you can run `npm run build` from that package's folder to re-build the package with your changes. You can use the local dev server within `packages/vx-demo` to view and iterate on your changes in the gallery. From the `packages/vx-demo` folder run `npm run dev` to start the next server which (if correctly sym-linked with lerna) will also watch for changes you make to other packages.
+Upon modification of a given package you can run `npm run build` from that package's folder to
+re-build the package with your changes. You can use the local dev server within `packages/vx-demo`
+to view and iterate on your changes in the gallery. From the `packages/vx-demo` folder run
+`npm run dev` to start the next server which (if correctly sym-linked with lerna) will also watch
+for changes you make to other packages.
 
 :v:
 
