Comments (10)
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.
from visx.
Cool, submitted a draft.
from visx.
Are you looking for these to be a page in vx-demo?
from visx.
@hshoff That's a great way to support a community around it.
from visx.
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.
from visx.
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).
from visx.
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?
from visx.
@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.
from visx.
@hshoff Wow, thank you! I'll make those changes! 🙌
from visx.
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
from visx.
Related Issues (20)
- computeStats throws exception when all statistics align
- XYChart has a zero width or height, bailing - console.log HOT 5
- Tooltip in XYChart - a way to make it compatible for mobile/touch devices
- scroll appears when drawing xychart using LineSeries but doesn't when using AreaStack
- Brush onBrushEnd does not seem to report the end x position HOT 1
- <Axis /> labelProps is documented as Partial, but overwrites values HOT 1
- Adding node version into .npmrc files HOT 1
- Adding inertia option to visx-drag [enhancement] HOT 3
- XYChart forces me to have the yScale include 0 HOT 2
- Zoom: Enable customisation of event handlers HOT 2
- Docs: README.md broken slack link HOT 1
- TooltipInPortal used inside a microfrontend obtains an unstyled (and unstylable) tooltip content HOT 4
- Brush jumps to wrong position when changing selection with a handle
- Nearest datum bug in XYChart HOT 3
- tickFormat function is not working with Typescript HOT 1
- Tooltip with an arrow HOT 7
- Help needed - XY scatter chart with line & area series HOT 5
- Package Responsive: `useParentSize` is not updating the width and height
- Poor performance - XYChart (w/captureEvents) + AnimatedBarSeries + NextJS
- onBrushEnd infinite render loop
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from visx.