visualizer.html

---
layout: default
permalink: /visualizer/
---

{% include header.html %}

<main>
  <div class="container careers page">
    <main class="content">
      <h1>Visualizer</h1>

      <p>Example populate.data</p>

      <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
      <script src="https://data-visualizer.populate.tools/dist/my-visualizer.min.js"></script>

      <!-- module-compatible connector library -->
      <script src="https://data-visualizer.populate.tools/lib/connector.populate.umd.min.js"></script>

      <!-- unscoped connector library -->
      <!-- <script src="https://data-visualizer.populate.tools/lib-comp/connector.populate.js"></script> -->

      <my-visualizer id="visualizer-0"></my-visualizer>
      <my-visualizer id="visualizer-1"></my-visualizer>

      <script>
        var config0 = new Visualizer([
          {
            type: "Dispersion",
            defaults: {
              x: "ds-poblacion-municipal",
              y: "ds-afiliados-ss-municipio",
              range: 2018,
              aggregation: ["Barcelona", "Girona", "Tarragona", "Lleida"]
            }
          },
          {
            type: "Espectro"
          }
        ]);

        var config1 = new Visualizer([
          {
            type: "Dispersion",
            defaults: {
              x: "ds-nacimientos-municipal",
              y: "ds-renta-bruta-media-municipal",
              range: 2016,
              aggregation: ["Asturias"]
            }
          }
        ]);

        document.getElementById("visualizer-0").config = config0;
        document.getElementById("visualizer-1").config = config1;
      </script>
    </main>
  </div>
</main>