I recently discovered the Vega project, which is a JSON specification for describing interactive data visualizations. I stumbled into this project as I was learning d3.js for an economics graph authoring tool that I'm developing, and now I'm thinking I will just use this instead of d3. We'll see how that pans out, as I'm new to data visualization.
I haven't dug deep into this format yet, but I'm hoping it will be a flexible way to represent these configurable graphs I'm creating.
Well, so I didn't do any work here. I've just stripped vega-editor's graph renderer of some unneeded stuff and put it in my new react app, and everything just worked.
The component takes two parameters, the vega graph (a JSON object), and a renderer option ('canvas' or 'svg').
import React from 'react';
import PropTypes from 'prop-types';
import * as vega from 'vega';
/**
* Based on renderer.js from vega-editor.
*/
export default class VegaRenderer extends React.Component {
static propTypes = {
vegaSpec: PropTypes.object,
renderer: PropTypes.string
};
renderVega(props) {
this.chart.style.width =
this.chart.getBoundingClientRect().width + 'px';
let runtime;
let view;
try {
runtime = vega.parse(props.vegaSpec);
view = new vega.View(runtime)
.logLevel(vega.Warn)
.initialize(this.chart)
.renderer(props.renderer);
view.hover();
view.run();
} catch (err) {
throw err;
}
this.chart.style.width = 'auto';
}
componentDidMount() {
this.renderVega(this.props);
}
componentDidUpdate() {
this.renderVega(this.props);
}
renderChart() {
return (
<div className='chart-container'>
<div className='chart'>
<div ref={(c) => { this.chart = c; }}>
</div>
</div>
</div>
);
}
render() {
return (
this.renderChart()
);
}
}