<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample metabolite utilization/production</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@5.15.0/dist/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.9.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.2.1"></script>

    <style>
    #vis {
        width: 1200px;
        margin: 1em;
        display: block;
    }
    </style>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Sample metabolite utilization/production
      </h1>
      <p class="subtitle">
        Shows the net utilization (imports) or production (exports) of
        metabolites of the full microbial community in each sample. If requested
        exchange reactions and samples were clustered by euclidean average
        linkage. Fluxes are shown on the log10 scale.<br>
        Hover over each point to see its annotations. Use the "..." menu in the
        upper right hand side to export the plot into various formats.
      </p>
    </div>
    <!-- Container for the visualization -->
    <div class="container">
    <div id="vis"></div>
    <a href="exchange_fluxes.csv" class="button is-primary">Download as CSV...</a>

    </div>
    <script>
      // Assign the specification to a local variable vlSpec.
      var vlSpec = {
        $schema: "https://vega.github.io/schema/vega-lite/v4.json",
        width: {{width}},
        height: {{height}},
        data: {
            values: {{data | safe}}
        },
        mark: {
            type: "rect",
            tooltip: {content: "data"}
        },
        encoding: {
          x: {
            field: "sample_id",
            type: "nominal",
            axis: {title: "sample ID"},
            sort: null
          },
          y: {
            field: "reaction",
            type: "nominal",
            sort: null
          },
          color: {
              field: "flux",
              type: "quantitative",
              scale: {type: "log", scheme: "viridis"}
          }
        }
      };

      // Embed the visualization in the container with id `vis`
      vegaEmbed("#vis", vlSpec, {renderer: "svg"}).then(function(r) {
        svg = d3.select("#vis svg");
        svg.attr("width", "100%").attr("height", "auto");
      });
    </script>
  </section>
  </body>
</html>
