DataSet as components?

[felixhao28]

Hi codesuki, in your implementation, you separate the actual chart content from the axes/tooltip by introducing a companion class DataSet. I wonder will it be viable if you offer a Cartesian coordinates system as a component and those DataSets as seperate components. Since I would like to draw something on top of the graph using the axes. And another benefit is that we can group the data.

An using example will be something like:

<CartesianCoord
        xAxis={...}
        yAxis={...}
        xScale={...}
        yScale={...}
        width={...}
        height={...}
        margin={...}
        charts={[
            {
                LineChartDataSet:
                    data: {...}
                    tooltipHtml: {...}
            }, {
                ScatterPlotDataSet:
                    data: {...}
                    tooltipHtml: {...}
            }
        ]}
/>

This way, in the future we may even add PolarCoord. And when we pass a BarChart to a PolarCoord, we get a PieChart. : )

[codesuki]

I am thinking about splitting things up more and putting them in Components as much as possible because I want to be able to draw charts on top of the Brush, or rather as Brush background.

The idea with PolarCoords, BarChart is becoming a PieChart sounds interesting although I don't have a clear image of that.

[codesuki]

What I don't get about your example is, you have 1 pair of axes/scales but different charts / datasets?

[felixhao28]

Since they share the same coordinate, they of course share axes and scales as well. DataSet only produces "logical" positions, it is the coordinate that maps "logical" positions to actual positions.

As for the BarChart to PieChart transition with polar coordinates, I wans't thinking clear. It will require a "categorical scale" to "continuous scale" transition somewhere between PolarCoord and BarChartDataSet. And that kind of transition is domain-aware and therefore it is per chart rather than per coordinate. So a BarChartDataSet will take ["A","B","C"] as the domain and produces [[1,2],[3,4],[5,6]] as "logical" domain for the coordinates to render (suppose by default the space between bars is the 100% of the width of a bar)..

[codesuki]

Hey Felix,

I just pushed this branch https://github.com/codesuki/react-d3-components/tree/feature/transitions where I started working on layering the graphs which is what you described above. At the moment they can share the data/scales or define new ones, the axes are part of the now. Here is a sample: https://codesuki.github.io/react-d3-components/transitions/index.html

    var Container = React.createClass({
        render: function() {
            return (
                <Chart
                    data={{label:'now', values:[{x:0,y:100}, {x:1, y:200}]}}
                    width={400}
                    height={400}
                    margin={{top: 10, bottom: 50, left: 50, right: 10}}>
                    <Axis
                        className={'x axis'}
                        orientation={'bottom'}
                        label={'Age'}
                        innerTickSize={5}
                        scale={'x'}/>
                    <Axis
                        className={"y axis"}
                        orientation={'left'}
                        label={'Funds'}
                        innerTickSize={5}
                        scale={'y'}/>
                    <LineChart/>
                    <ScatterPlot/>
                </Chart>
            );
        }
    });

What do you think? I am not 100% happy with how the axes get access to the scales.

[mcdonnelldean]

@codesuki Just to chime in. I think this looks fine. Does this stuff work? I might pull the branch to play around.

[codesuki]

@mcdonnelldean Yes it basically works. Although, until now only the bar and line chart are supporting layering. It's easy though, using them as an example, just amending the render() method of the other charts to be similar. The animations still aren't applied to the tooltip which gives a bad user experience, also how to handle the tooltip if charts are layered. I didn't start on that one yet.

I would be very happy about any progress on this branch! I wanted to do it but became too busy with normal work again >_<

If you need any assistance don't hesitate to ask in an issue or pull request!

[MartinBieth]

It would be great to have this feature. I might try to play around to.

[codesuki]

In case you do, don't hesitate sending a pull req. and we can discuss stuff :)