airbnb / visx Goto Github PK
View Code? Open in Web Editor NEWπ― visx | visualization components
Home Page: https://airbnb.io/visx
License: MIT License
π― visx | visualization components
Home Page: https://airbnb.io/visx
License: MIT License
Nice work on the library!
Just thought I'd give a helpful tip, Safari doesn't support rgba colors for gradient stop attributes, so you need to remove the opacity on this line:
I'd recommend changing the props for LinearGradient
to also accept the fromOpacity and toOpacity.
I can't remember the exact post where I learned about this, but here's a relevant one:
https://stackoverflow.com/questions/31729206/svg-transparent-radial-gradient-in-safari-not-working
I wonder if it is currently possible to create a stepped area / line chart (interpolation value of step-before
/ step-after
) using VX. If not, might be a nice addition!
Is it currently possible for example in https://vx-demo.now.sh/trees to make A3 parent of C1 or C1 parent of B1?
I want to be able to represent information flow between multiple neurons nodes being neurons but also dendrites and axon terminals (inputs and output).
I'm noticing something odd - it seems that the <Bar>
component's onClick
handler is called when it is rendered.
I noticed it while following the example in VX's gallery: https://vx-demo.now.sh/bars
Here is code to reproduce it.
It has a console.log
on render, when the SVG is clicked, and when the Bar is clicked. Notice that the console.logs for the bar
being clicked are all present after each render.
import React, { Component } from 'react';
import { Bar } from '@vx/shape';
import { Group } from '@vx/group';
import { GradientTealBlue } from '@vx/gradient';
import { letterFrequency } from '@vx/mock-data';
import { scaleBand, scaleLinear } from '@vx/scale';
import { extent, max } from 'd3-array';
export default class VXBarTest extends Component {
render(){
console.log('render');
const data = letterFrequency.slice(5);
function round(value, precision) {
var multiplier = Math.pow(10, precision || 0);
return Math.round(value * multiplier) / multiplier;
}
// accessors
const x = d => d.letter;
const y = d => +d.frequency * 100;
const width = 750;
const height = 400;
if (width < 10) return null;
// bounds
const xMax = width;
const yMax = height - 120;
// scales
const xScale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x),
padding: 0.4,
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [0, max(data, y)],
});
const bars = data.map((d, i) => {
const barHeight = yMax - yScale(y(d));
return (
<Group key={`bar-${x(d)}`}>
<Bar
width={xScale.bandwidth()}
height={barHeight}
x={xScale(x(d))}
y={yMax - barHeight}
fill="rgba(23, 233, 217, .5)"
onClick={ function(){ console.log('bar clicked'); }}
/>
</Group>
);
});
return (
<svg
width={width}
height={height}
onClick={ function(){ console.log('svg clicked'); }}>
<GradientTealBlue id="teal" />
<Group top={40}>
{bars}
</Group>
</svg>
);
}
}
SVG objects support properties such as:
fill-opacity
stroke-opacity
opacity
Would be nice to support them - useful especially in transitions.
I understand this project is a relatively new undertaking, but I was curious about some future features, and the end goal of vx, specifically around the idea of processing and graphing live data.
D3 exposes a number of mechanisms that make it, relatively, easy to handle data from a stream. Obviously here these mechanisms are somewhat hidden, due to the nature of these components. Is there a plan to support plotting/charting/graphing data from a stream?
Currently, the only way I see this being possible is to store a data object, and as new data points are added, append them to the data object and pass that data back into the component. The issue I'm seeing is that given a relatively fast stream (say 1 new data point every 100ms) performance begins to drop.
A better solution might be to provide the chart some mechanism to receive data from a stream (callback to process the incoming request or similar) and then render the data point and shift it onto the visible chart/graph area. The visible data would need some sort of limiting factor, be it max data points or a sort of decay based on a time series. I see a number of viable use cases related to server performance dashboards, geo-location & heatmap plotting, or live active user counts that could benefit from a feature like this tremendously.
Is this something you've considered or something that might be coming in the future? Are there currently mechanisms in place that might allow me to create my own stream-based component?
LinePath.js has a parameter labelOrientation = 'horizontal'
that doesn't seem to do anything. Can we remove it?
EDIT: Also "labelVerticalAlign", and "labelHorizontalAlign" are not used.
How can you change an Axis's label font-size?
According to the docs (https://github.com/hshoff/vx/tree/master/packages/vx-axis), the "label" attribute is a string value.
When the label is rendered, the <text>
element has several attributes that I haven't specified:
Code to produce the Axis:
<AxisBottom
left={50}
scale={xAxisScale}
top={yMax + margin.top}
stroke='gray'
tickStroke='gray'
label="My Amazing Customized Label!"
tickLabelComponent={(
<text
fill='gray'
fontSize={11}
textAnchor="middle"
/>
)}
/>
(as an aside, tickLabelComponent isn't mentioned in Axis's docs either, I just saw it in an example)
Rendered label SVG:
<text
text-anchor="middle"
font-family="Arial"
font-size="10"
fill="black"
x="575"
y="37">
My Amazing Customized Label!
</text>
On iOS, scrolling the demo website locks everytime the thumb is released, unfortunately this is default behavior on iOS unless you add -webkit-overflow-scrolling: touch;
to the scrollable element. This will add inertia like scrolling.
vx/boxplot
requires firstQuartile
and thirdQuartile
to render the boxplot.
From my understanding of summary statistics, the standard order of the values should be:
min < firstQuartile < median < thirdQuartile < max
Currently, vx/boxplot
renders the box when:
min < thirdQuartile < median < firstQuartile < max
Should vx/boxplot
follow the first or the second ordering?
To avoid docs and packages readmes being out of sync we should consider build the docs during the CI step.
use case:
i can see the source code of 'vx-brush',but i don't know how to use itοΌcan you give a example?
Right now heatmaps
require the user to pass in data that looks like:
const data.bins = [ { bin: 0, count: 54.3050232 }, ...]
Why not have bin accessors?
const bins = d => d.myBins
const bin = b => b.myBin
const count = b => b.myCount
Are there any method to copy drag of d3 and used in vx?
It looks like @vx/network
is not yet published on npm. See here. Or just try npm install @vx/network
:
It will be nice to have typings. It will be little easier to understand how to use your package. :)
Making something cool with vx
?
Submit a pull request or post here and we'll get it added to https://vx-demo.now.sh/gallery
Using vx
in a project?
Post the project/company name + link and we'll add it to the Used By
list in the Readme.
I've got a localPoint
util that requires a reference to the svg node https://github.com/hshoff/vx/blob/master/packages/vx-event/src/localPoint.js
but I'd like to make this easier to use/remove the boilerplate of converting the brush event coordinates to local coordinates.
My understanding is this should just work, but I haven't verified/explored it yet. Would like to launch v1.0.0 with the ssr story figured out.
https://twitter.com/poke707/status/845252764183683072
https://twitter.com/rauchg/status/845372211321982976
I noticed the documentation website misses some components and some are outdated
May I suggest to execute script to generate docs in CI?
I'm looking for others missing
when i install vx use 'npm install vx ' ,i am find that the 'vx' i had installed didn't your 'vx',so how can i install your 'vx'
I noticed in the gallery, there's no examples of using <Axis />
, but plenty of examples of using <AxisLeft />
, <AxisRight />
, <AxisTop />
, <AxisBottom />
. Those files also are just wrappers on top of <Axis/>
.
I'm writing docs for the @vx/axis
package, should I emphasize that it's best to use the specific axis's?
Hi, I've been integrating some data visualization into some important product pages for my business and I encountered an issue with integrating our existing tooltip solution into vx (which, by the way, is fantastic!).
We use refs to get the translated position of svg elements which we use to absolutely position tooltips outside of the svg element. Since vx-shape and vx-group all use stateless components, I've had to fork the package locally and convert these components to use classes so I can use references.
If anyone has a better solution, please let me know, but otherwise, I'm happy to submit pull requests at any time to convert the components to use classes.
This might be a stupid question and I might be misunderstanding ES6 here, but why is genPointsRange
exported in the genRandomNormalPoints.js
file?
The genPoints
is exported with default
, so that would make it the function that's used when you run something like:
import genRandomNormalPoints from './generators/genRandomNormalPoints';
And then the index.js
exports the genRandomNormalPoints
, which would hide the original genPointsRange
function, right?
Should I document this function? Is there a way to access it that I'm not realizing?
Hi, i would like to be able to import constants like the default values in
https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/Axis.js
Creating this issue here as a note of what we discussed on Friday:
Right now, to use vx, one has to pull in each of the dependency as individual repositories. To improve the usability of the package (e.g. upgrading to a new version of vx), we can consider two approaches:
Create an "aggregated" package, e.g., @vx/vx
, as an indexing package of all the components in vx. This is the same approach as lodash (https://github.com/lodash/lodash#installation).
Create a CLI that manages @vx/*
.
Make it easier to have text autowrap in svg. https://github.com/hshoff/vx/blob/master/packages/vx-text/src/text/TextWrap.js
For the pre-made axes, would it be better to remove the prefix since they're called with Axis.*
?
So:
Axis.AxisBottom
-> Axis.Bottom
Axis.AxisTop
-> Axis.Top
Axis.AxisLeft
-> Axis.Left
Axis.AxisRight
-> Axis.Right
I'm still pretty inexperienced though and can understand if there's something wrong with this.
Need this type of shape for use in Data DLS, just noting it here and will work on it this week.
More info: #99
Hi, love how this project looks and can't wait to get this going!
Question, I'm trying this demo now myself now first: https://vx-demo.now.sh/areas
And I'm running into Error: <line> attribute y2: Expected length, "NaN".
Full trace:
setValueForProperty @ DOMPropertyOperations.js:141
_updateDOMProperties @ ReactDOMComponent.js:879
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
updateChildren @ ReactChildReconciler.js:121
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
performUpdateIfNecessary @ ReactCompositeComponent.js:560
performUpdateIfNecessary @ ReactReconciler.js:156
runBatchedUpdates @ ReactUpdates.js:150
perform @ Transaction.js:143
perform @ Transaction.js:143
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:200
enqueueUpdate @ ReactUpdateQueue.js:24
enqueueSetState @ ReactUpdateQueue.js:218
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64
(anonymous) @ Graphs.js:30
Promise (async)
(anonymous) @ Graphs.js:28
Promise (async)
componentDidMount @ Graphs.js:27
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:34
__webpack_require__ @ bootstrap 456fb2cβ¦:659
fn @ bootstrap 456fb2cβ¦:85
1 @ transports ws:1
__webpack_require__ @ bootstrap 456fb2cβ¦:659
./node_modules/@vx/bounds/build/enhancers/withBoundingRects.js.Object.defineProperty.value @ bootstrap 456fb2cβ¦:708
(anonymous) @ bundle.js:712
DOMPropertyOperations.js:141 Error: <path> attribute d: Expected number, "M0,NaNC0.1910274963β¦".
setValueForProperty @ DOMPropertyOperations.js:141
_updateDOMProperties @ ReactDOMComponent.js:879
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
updateChildren @ ReactChildReconciler.js:121
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
performUpdateIfNecessary @ ReactCompositeComponent.js:560
performUpdateIfNecessary @ ReactReconciler.js:156
runBatchedUpdates @ ReactUpdates.js:150
perform @ Transaction.js:143
perform @ Transaction.js:143
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:200
enqueueUpdate @ ReactUpdateQueue.js:24
enqueueSetState @ ReactUpdateQueue.js:218
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64
(anonymous) @ Graphs.js:30
Promise (async)
(anonymous) @ Graphs.js:28
Promise (async)
componentDidMount @ Graphs.js:27
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:34
__webpack_require__ @ bootstrap 456fb2cβ¦:659
fn @ bootstrap 456fb2cβ¦:85
1 @ transports ws:1
__webpack_require__ @ bootstrap 456fb2cβ¦:659
./node_modules/@vx/bounds/build/enhancers/withBoundingRects.js.Object.defineProperty.value @ bootstrap 456fb2cβ¦:708
(anonymous) @ bundle.js:712
I'm wondering what it could be? I'm using the latest of all dependencies:
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ @vx/[email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
And I just copy-pasted the example, which I believe includes the mock data also already. I saved that file as Area.js
and I then use the component as:
import Area from './Area'
<Area width={400} height={300} margin={{
left : 2,
right: 2,
}} />
This last part I wasn't entirely sure about, so that's likely where I go south?
Right now it doesn't seem that there's any package-lock.json
files in any of the packages. But the lerna exec npm install
will create a lockfile in each package.
Npm claims that we should commit these. Is there any reason we haven't?
Could we either add them or add them to the .gitignore?
vx should work on web, native, vr, everywhere. The current implementation depends on react-dom
which means it's only available on web.
@lelandrichardson's talk React as a Platform
https://www.youtube.com/watch?v=hNwQPJy-XZY
https://github.com/lelandrichardson/react-primitives-art
There's a couple repeated instances around VX that could probably be put into a separate package.
For example, additionalProps in heatmap and [additionalProps in shape].
Is there any reason why these aren't in their own package?
we have <LinearGradient />
need to add <RadialGradient />
These are the packages with missing documentation
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.