Rewriting the <DataLayer> with better visual encodings

[hsunpei]

The existing React visualization libraries such as victory or react-vis are more useful for explanatory data visualization projects. However, they have less consistent visual encoding grammars to help users generate different graphs with minimum modifications, and thus rendering them not well-suited for exploratory visualization purposes.

Meanwhile, the Javascript visualization library vega-lite handles the visual encodings particularly well. Therefore, we propose integrating similar approaches to handle axes, fields, and colors.

Rewriting the <DataLayer>:

Original line chart:

<LineChart
    data={lineData}
    scaleX={{ type: 'time' }}
    scaleY={{ type: 'linear' }}
    fieldsX={[{ name: 'date' }]}
    fieldsY={[{ name: 'aaa' }]}
    color={{ ??? }}
/>

=> Line chart with colors: Vega Editor

<LineChart
    data={lineData}
    x={{field: "date", type: "time"}}
    y={{field: "aaa", type: "linear"}}
    color={{field: "member_type", type: "point"}}
/>

Dealing with dual axis chart:

@chenesan and I discussed how to achieve drawing similar graphs like vega-lite does in the future.

<DualAxis
    data={lineData}
    x={{field: "date", type: "time"}}
    y1={{field: "aaa", type: "linear"}}
    y2={{field: "bbb", type: "linear"}}
>
   <BarChart showTooltip={false}/>
   <LineChart
      color={{field: "member_type", type: "point"}}
      showTooltip={false}
   />
</DualAxis>

[chenesan]

Note (for @zhusee2 and @tz5514 ) that the pros of this approach is that we can share the same props / scale computation logic to any visualization graph with x-y axis (line/bar/scatter/point...), and let the chart decides what to render with computed scale. With this way we can have consistent props in different charts, which makes changing chart in client code easier.