[tutorials] create tutorials on making reusable charts

[hshoff]

No description provided.

[rywils21]

Are you looking for these to be a page in vx-demo?

[hshoff]

I'm thinking we'll make an index page of tutorials in vx-demo that would link out to where ever they are hosted Medium, personal blogs, etc.

[Flaque]

@hshoff That's a great way to support a community around it.

[Flaque]

I wrote up a tut on making a simple AreaClosed style graph using gradients. It's pretty similar to this gallery item, but it takes its time and explains every detail.

I figure people that need less detail are going to just jump into the code/docs and the folks that want detail want a lot of it.

It's not published yet (I'm gonna have a few people read it over first), but here's a link to the draft.. Let me know if there's something I should change.

[hshoff]

Wow, great write-up @Flaque!

I've a got a breaking change for all packages coming up that will put your draft out of date for >0.0.109 versions. This change fixes #26 (comment) and changes the way vx exports and imports.

// instead of
import Axis from '@vx/axis';
<Axis.AxisLeft />

// do
import * as Axis from '@vx/axis';
<Axis.AxisLeft />

// even better (don't import unused things)
import { AxisLeft } from '@vx/axis';
<AxisLeft />

// even better for smaller file size (lib authors)
import AxisLeft from '@vx/axis/axis/AxisLeft';
<AxisLeft />

Sorry to introduce a breaking change like this after you wrote the example code and post. Hope it's not too much trouble to hold off until I get this update released (I'm updating the Readmes as I go).

[Flaque]

No problem :D

Anything you need help with in the meantime? (Is brush stable? Should I write docs for that?) Or maybe something code-related?

[hshoff]

@Flaque love the tutorial, a really great intro as well.

I went through and commented on the medium draft where updates should happen to account for the new named exports (#27). I'd like to discourage namespacing components pattern like <Axis.AxisLeft /> for now since it leads to larger bundle sizes when you do import * as Axis from '@vx/axis';. It's doable for folks that like the pattern, but coming from the React community you don't see that pattern used that much.

Let me know if you have any questions or need help getting your example code repo up and running on the updated v0.0.111 packages with named exports.

edit: once it's ready and published, I'll add a Tutorials section to vx-demo.now.sh and add it there. Also, I'll start a vx publication on Medium and you'll be able to submit your post to the publication.

[Flaque]

@hshoff Wow, thank you! I'll make those changes! 🙌

[hshoff]

created a medium publication: https://medium.com/vx-code

@Flaque you should be able to submit your draft to the vx code publication when you're ready

---

[Flaque]

Cool, submitted a draft.