| license: mit |
A very simple example of how to run the wonderful JavaScript API for vega-lite using React. The key here is to create a wrapper component that uses an effect (for hooks), or componentDidMount (for regular components) to render the visualization.
Built with blockbuilder.org
forked from john-guerra's block: vega-lite JavaScript API browser example
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| </head> | |
| <body> | |
| <div id="render-target"></div> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@5.7.2"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script> | |
| <!-- Load React. --> | |
| <!-- Note: when deploying, replace "development.js" with "production.min.js". --> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> | |
| <script> | |
| function VegaLiteComponent(props) { | |
| const chartRef = React.createRef(); | |
| React.useEffect(() => { | |
| vl.register(vega, vegaLite, {}); | |
| vl | |
| .markBar() | |
| .data(props.data) | |
| .encode( | |
| vl.x().fieldQ("b"), | |
| vl.y().fieldN("a"), | |
| vl.tooltip([vl.fieldQ("b"), vl.fieldN("a")]) | |
| ) | |
| .render() | |
| .then(chart => { | |
| chartRef.current | |
| .appendChild(chart); | |
| }); | |
| }); | |
| return React.createElement("div", {ref:chartRef}); | |
| } | |
| const domContainer = document.querySelector("#render-target"); | |
| ReactDOM.render(React.createElement(VegaLiteComponent, { | |
| data:[ | |
| {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, | |
| {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, | |
| {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} | |
| ] | |
| }), domContainer); | |
| </script> | |
| </body> | |
| </html> |
