vega-lite JavaScript API React example

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>

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

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>

https://cdn.jsdelivr.net/npm/vega@5.7.2

https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10

https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0

https://unpkg.com/react@16/umd/react.development.js

https://unpkg.com/react-dom@16/umd/react-dom.development.js