Quick example (direct script inclusion)

Here's a super-quick example of using the rawgraphs from javascript code.

In this case we'll assume that we'll add rawgraphs to our webpage by direct script inclusion. Refer to installation for other options.

See the live demo at the end of the page for a complete example.

Installation#

We'll install the core with a <script> tag:

<script src="https://cdn.jsdelivr.net/npm/@rawgraphs/rawgraphs-core"></script>

Install some charts#

To do something useful with rawgraphs-core, we'll need some charts as well. Let's use the charts from the rawgraphs-charts package. Again, we'll use a <script> tag in our HTML

<script src="https://cdn.jsdelivr.net/npm/@rawgraphs/rawgraphs-charts"></script>

In this case the rawgraphs-core api will be available in the raw object in the global (window) scope, and the rawgraphs-charts contents will be available in the rawcharts object.

Rendering a bubblechart#

In this example we'll build a bubblechart from the @rawgraphs/rawgraphs-core repository. The final html could be the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/@rawgraphs/rawgraphs-core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@rawgraphs/rawgraphs-charts"></script>
  </head>

  <body>
    <div id="app"></div>

    <script>
      const chart = raw.chart;
      const bubblechart = rawcharts.bubblechart;

      // defining some data.
      const userData = [
        { size: 10, price: 2, cat: "a" },
        { size: 12, price: 1.2, cat: "a" },
        { size: 1.3, price: 2, cat: "b" },
        { size: 1.5, price: 2.2, cat: "c" },
        { size: 10, price: 4.2, cat: "b" },
        { size: 10, price: 6.2, cat: "c" },
        { size: 12, price: 2.2, cat: "b" }
      ];

      // getting the target HTML node
      const root = document.getElementById("app");

      // define a mapping between dataset and the visual model
      const mapping = {
        x: { value: "size" },
        y: { value: "price" },
        color: { value: "cat" }
      };

      //instantiating the chart
      const viz = chart(bubblechart, {
        data: userData,
        mapping
      });

      //rendering into the HTML node
      viz.renderToDOM(root);
    </script>
  </body>
</html>

Live demo#

Here's a live demo of the code shown above running in codesandbox