Giter VIP home page Giter VIP logo

visx's Introduction

Coverage Status

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.


Docs β€’ Gallery β€’ Blog β€’ Discussions β€’ Changelog β€’ Getting started tutorial

Usage

Remix on Glitch

Let's make a simple bar graph.

First we'll install the relevant packages:

npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

// Then we'll create some bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = d => d.letter;
const y = d => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// 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);

// Finally we'll embed it all in an SVG
function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

// ... somewhere else, render it ...
// <BarGraph />

For more examples using visx, check out the gallery.

Motivation

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. visx is largely unopinionated and is meant to be built upon. Keep your bundle sizes down and use only the packages you need.

How?

Under the hood, visx is using d3 for the calculations and math. If you're creating your own awesome chart library on top of visx, 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().

In the wild

Have a project that's using visx? Open a pull request and we'll add it to the list.

FAQ

  1. What does visx stand for?

    visx stands for visualization components.

  2. Do you plan on supporting animation/transitions?

    A common criticism of visx is it doesn't have animation baked in, but this was a conscious choice. It's a powerful feature to not bake it in.

    Imagine your app already bundles react-motion, adding a hypothetical @visx/animation is bloat. Since visx 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.

    visx makes this easier for everyone. No need to reinvent the wheel each time.

    more info: #6

    examples:

  3. Do I have to use every package to make a chart?

    nope! pick and choose the packages you need.

  4. Can I use this to create my own library of charts for my team?

    Please do.

  5. Does visx work with preact?

    yup! need to alias react + react-dom and use preact-compat.

  6. I like using d3.

    Me too.

Development

Please see CONTRIBUTING.md

✌️

MIT

FOSSA Status

visx's People

Contributors

adamzuch avatar birjj avatar crcarlo avatar dennisja avatar ffloriel avatar flaque avatar geekplux avatar gillesdemey avatar hshoff avatar janpot avatar jens-ox avatar kandros avatar kangaechigai avatar kristw avatar lorenries avatar lucafalasco avatar maryschmidt avatar mmarkelov avatar nschnierer avatar pringels avatar ptmx avatar robinsoncol avatar sheajanke avatar sto3psl avatar techniq avatar trainorpj avatar valtism avatar vovakulikov avatar williaster avatar yuchi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

visx's Issues

Use classes rather than stateless functions in vx-shape, vx-group, etc, moving forward to allow refs?

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.

gradients from demo don't show in Safari

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:

https://github.com/hshoff/vx/blob/11dd365aa1a60d354a3c015199ee549961edd6e4/packages/vx-demo/pages/areas.js#L62

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

build docs on CI

To avoid docs and packages readmes being out of sync we should consider build the docs during the CI step.

use case:

  • typos PRs using github's web editor
  • docs not generated after a modification

[heatmaps] Should heatmaps use an accessor?

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

Could we make a vx-util?

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?

[question] interacting with data from a stream

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?

Should `genPointsRange` be usable?

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?

Suggestion: Change `Axis.AxisBottom` to `Axis.Bottom`

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.

support for interpolation

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!

[vx-demo] Add webkit overflow touch to demo website

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.

missing documentions

These are the packages with missing documentation

  • brush
  • clip-path
  • brush
  • drag
  • event
  • hierarchy
  • responsive
  • tooltip
  • zoom

Graphs

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).

how i can install 'vx'?

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'

[npm] What should we do about lockfiles?

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?

sync demo with documentation

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

<Bar> onClick handler is called on render, not on click

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>
    );
  }
}

typescript typings

It will be nice to have typings. It will be little easier to understand how to use your package. :)

Improve usability: aggregated package or cli

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:

  1. 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).

  2. Create a CLI that manages @vx/*.

Change an Axis's label font-size

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>

how to use vx-brush

i can see the source code of 'vx-brush',but i don't know how to use it,can you give a example?

Error: <line> attribute y2: Expected length, "NaN".

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?

Is the `<Axis/>` element not supposed to be accessed?

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.