<!DOCTYPE html>
<html>
<head>
<title>Dashboard metrics with various charts</title>
</head>
<body>

<div class="atlas" id="dataAtlas">
  <header class="atlas-header">
    <div class="atlas-brand">
      <span class="atlas-logo">DA</span>
      <div>
        <strong>DATA ATLAS</strong>
        <small>THE VISUALIZATION LAB</small>
      </div>
    </div>
    <div class="atlas-header-right">
      <span class="atlas-live"><i></i> INTERACTIVE EXHIBITION</span>
      <span class="atlas-edition">VOL. 01 / 2026</span>
    </div>
  </header>

<section class="atlas-hero">
      <div class="hero-copy">
        <span class="hero-eyebrow">EXPLORE / DISCOVER / UNDERSTAND</span>
        <h1>Making sense<br>of <em>everything.</em></h1>
        <p>Twelve ways to see the patterns hiding inside data. An interactive collection of charts, relationships, and visual stories.</p>
        <div class="hero-actions">
          <button id="atlasRandomize" class="atlas-primary" type="button">Generate new data <span>&#8599;</span></button>
          <span class="hero-secondary">SCROLL TO EXPLORE &#8595;</span>
        </div>
      </div>
      <div class="hero-graphic" aria-hidden="true">
        <div class="graphic-orbit orbit-one"></div>
        <div class="graphic-orbit orbit-two"></div>
        <div class="graphic-circle circle-one"></div>
        <div class="graphic-circle circle-two"></div>
        <div class="graphic-circle circle-three"></div>
        <div class="graphic-center">12<span>WAYS TO SEE</span></div>
      </div>
    </section>

<section class="atlas-summary">
      <div><strong>12</strong><span>VISUALIZATIONS</span></div>
      <div><strong>03</strong><span>DATA THEMES</span></div>
      <div><strong>100%</strong><span>INTERACTIVE</span></div>
      <div><strong>01</strong><span>CREATIVE LAB</span></div>
    </section>

<section class="atlas-intro">
      <div>
        <span class="section-eyebrow">THE COLLECTION</span>
        <h2>Explore the <em>visual language.</em></h2>
        <p>Hover, compare, discover. Every chart reveals a different perspective.</p>
      </div>
      <div class="atlas-filter">
        <label for="atlasDataset">SELECT DATA THEME</label>
        <select id="atlasDataset">
          <option value="business">Business &amp; growth</option>
          <option value="technology">Technology &amp; AI</option>
          <option value="nature">Nature &amp; climate</option>
        </select>
      </div>
    </section>

<article class="atlas-card card-large">
        <div class="card-heading"><div><span class="card-id">FIGURE 01 / TIME SERIES</span><h3>The growth curve</h3><p>Tracking changes across twelve months</p></div><span class="card-badge">AREA</span></div>
        <div class="chart-box chart-large"><canvas id="atlasArea"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 02 / COMPARISON</span><h3>Side by side</h3><p>Comparing performance across groups</p></div><span class="card-badge">BAR</span></div>
        <div class="chart-box"><canvas id="atlasBar"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 03 / COMPOSITION</span><h3>Parts of a whole</h3><p>Relative proportions of each category</p></div><span class="card-badge">DONUT</span></div>
        <div class="chart-box"><canvas id="atlasDonut"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 04 / MULTIDIMENSIONAL</span><h3>Performance radar</h3><p>Strengths across multiple dimensions</p></div><span class="card-badge">RADAR</span></div>
        <div class="chart-box"><canvas id="atlasRadar"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 05 / RELATIONSHIPS</span><h3>Bubble universe</h3><p>Three variables in one visualization</p></div><span class="card-badge">BUBBLE</span></div>
        <div class="chart-box"><canvas id="atlasBubble"></canvas></div>
      </article>

<article class="atlas-card card-large">
        <div class="card-heading"><div><span class="card-id">FIGURE 06 / DAILY ACTIVITY</span><h3>A calendar of patterns</h3><p>Discover intensity and frequency across sixteen weeks</p></div><span class="card-badge">HEATMAP</span></div>
        <div class="heatmap-scroll"><div id="atlasHeatmap" class="atlas-heatmap"></div></div>
        <div class="heatmap-info"><span id="atlasHeatmapInfo">Select a square to see activity</span><span>16 WEEKS / 112 DAYS</span></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 07 / DISTRIBUTION</span><h3>Circular magnitude</h3><p>Values distributed around a center</p></div><span class="card-badge">POLAR</span></div>
        <div class="chart-box"><canvas id="atlasPolar"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 08 / RANKING</span><h3>The leaderboard</h3><p>Categories ranked by value</p></div><span class="card-badge">RANKING</span></div>
        <div class="chart-box"><canvas id="atlasHorizontal"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 09 / CONTRIBUTION</span><h3>Building blocks</h3><p>How smaller parts create the total</p></div><span class="card-badge">STACKED</span></div>
        <div class="chart-box"><canvas id="atlasStacked"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 10 / COMBINATION</span><h3>Two perspectives</h3><p>Bars and lines working together</p></div><span class="card-badge">MIXED</span></div>
        <div class="chart-box"><canvas id="atlasMixed"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 11 / VARIATION</span><h3>The scatter field</h3><p>Finding relationships between two measures</p></div><span class="card-badge">SCATTER</span></div>
        <div class="chart-box"><canvas id="atlasScatter"></canvas></div>
      </article>

<article class="atlas-card">
        <div class="card-heading"><div><span class="card-id">FIGURE 12 / BREAKDOWN</span><h3>Nested proportions</h3><p>Comparing two concentric distributions</p></div><span class="card-badge">NESTED</span></div>
        <div class="chart-box"><canvas id="atlasNested"></canvas></div>
      </article>

</div>

<footer class="atlas-footer">
      <div><strong>DATA ATLAS</strong><p>A collection of visual discoveries.</p></div>
      <span>BUILT WITH CHART.JS / HTML / CSS / JAVASCRIPT</span>
      <span>END OF EXHIBITION &#10038;</span>
    </footer>

</main>
</div>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

* { box-sizing: border-box; }

html {
  height: auto;
  min-height: 100%;
}

body {
  margin: 0;
  height: auto;
  min-height: 100vh;
  background: #dcefe7;
  color: #173d3c;
  font-family: 'DM Sans', sans-serif;
}

.atlas {
  background: #dcefe7;
  color: #173d3c;
  min-height: 100vh;
  height: auto;
  width: 100%;
}

button, select { font: inherit; }
button { cursor: pointer; }

button:focus-visible, select:focus-visible {
  outline: 3px solid #176b65;
  outline-offset: 3px;
}

/* HEADER */

.atlas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px max(24px, calc((100% - 1320px) / 2));
  border-bottom: 1px solid rgba(23,61,60,.2);
}

.atlas-brand { display: flex; align-items: center; gap: 12px; }
.atlas-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #176b65;
  color: #e9f7ee;
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
}

.atlas-brand strong { display: block; font-size: 17px; letter-spacing: 1px; }
.atlas-brand small { display: block; margin-top: 3px; font-size: 9px; font-weight: 800; letter-spacing: 1.7px; color: #648c83; }
.atlas-header-right { display: flex; align-items: center; gap: 25px; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.atlas-live { display: flex; align-items: center; gap: 8px; }
.atlas-live i { width: 7px; height: 7px; border-radius: 50%; background: #f07f69; }
.atlas-edition { color: #648c83; }

/* MAIN */

.atlas-main { max-width: 1370px; margin: 0 auto; padding: 0 24px; }

/* HERO */

.atlas-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 35px;
  padding: 70px 0;
}

.hero-eyebrow { color: #176b65; font-size: 11px; font-weight: 800; letter-spacing: 2px; }

.hero h1, .atlas-hero h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 6.7vw, 95px);
  line-height: 1.03;
  letter-spacing: -2px;
  margin: 24px 0;
}

.atlas-hero h1 em { color: #e16f59; font-weight: 400; }
.hero-copy > p { max-width: 460px; font-size: 15px; line-height: 1.85; color: #50766f; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; }

.atlas-primary {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 20px;
  border: 0;
  border-radius: 7px;
  background: #176b65;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.atlas-primary:hover { background: #10514d; }
.atlas-primary span { font-size: 19px; }
.hero-secondary { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #648c83; }

/* HERO GRAPHIC */

.hero-graphic {
  position: relative;
  height: 350px;
  overflow: hidden;
  background: #b8ded0;
  border-radius: 160px 160px 15px 15px;
}

.graphic-orbit {
  position: absolute;
  border: 2px solid rgba(23,107,101,.3);
  border-radius: 50%;
}

.orbit-one { width: 330px; height: 330px; left: 50%; top: 15px; transform: translateX(-50%); }
.orbit-two { width: 230px; height: 230px; left: 50%; top: 65px; transform: translateX(-50%); }
.graphic-circle { position: absolute; border-radius: 50%; }
.circle-one { width: 150px; height: 150px; background: #f07f69; top: 30px; left: 18%; }
.circle-two { width: 130px; height: 130px; background: #e7be68; bottom: 20px; right: 15%; }
.circle-three { width: 65px; height: 65px; background: #176b65; bottom: 50px; left: 12%; }

.graphic-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #176b65;
  color: #fff;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 65px;
}

.graphic-center span { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }

/* SUMMARY */

.atlas-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #a5c7bb;
  border-bottom: 1px solid #a5c7bb;
}

.atlas-summary > div { display: flex; flex-direction: column; gap: 6px; padding: 24px 25px; }
.atlas-summary > div + div { border-left: 1px solid #a5c7bb; }
.atlas-summary strong { font-family: 'DM Serif Display', Georgia, serif; font-size: 38px; font-weight: 400; }
.atlas-summary span { color: #648c83; font-size: 10px; font-weight: 800; letter-spacing: 1px; }

/* GALLERY INTRO */

.atlas-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 60px 0 25px;
}

.section-eyebrow { color: #176b65; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.atlas-intro h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(32px, 4vw, 50px); margin: 13px 0; }
.atlas-intro h2 em { color: #d36f59; }
.atlas-intro p { margin: 0; font-size: 13px; color: #648c83; }

.atlas-filter { display: flex; flex-direction: column; gap: 9px; }
.atlas-filter label { font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.atlas-filter select { padding: 12px 15px; border: 1px solid #a2c3b7; border-radius: 7px; background: #f0f8f2; color: #173d3c; font-size: 12px; font-weight: 700; }

/* CARDS */

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.atlas-card {
  min-width: 0;
  padding: 25px;
  background: #f0f7ef;
  border: 1px solid #c8dfd3;
  border-radius: 12px;
}

.atlas-card:nth-child(3n + 2) { background: #f8efdb; border-color: #e9dabb; }
.atlas-card:nth-child(3n + 3) { background: #f7e6df; border-color: #ecd1c6; }
.atlas-card.card-large { grid-column: 1 / -1; background: #eaf5ed; }

.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.card-id { color: #42857d; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.card-heading h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 29px; font-weight: 400; margin: 12px 0 7px; }
.card-heading p { color: #668a80; font-size: 12px; margin: 0; }

.card-badge {
  padding: 8px 10px;
  border-radius: 6px;
  background: #d4e9dd;
  color: #176b65;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
}

.chart-box { position: relative; width: 100%; height: 280px; margin-top: 25px; }
.chart-box.chart-large { height: 330px; }

/* HEATMAP */

.heatmap-scroll { overflow-x: auto; padding: 8px 0 14px; margin-top: 28px; }
.atlas-heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 20px);
  grid-auto-columns: 20px;
  gap: 7px;
  width: max-content;
}

.heat-cell { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; }
.heat-0 { background: #d4e8de; }
.heat-1 { background: #a5d3c4; }
.heat-2 { background: #75bfc1; }
.heat-3 { background: #328d86; }
.heat-4 { background: #176b65; }
.heat-cell.selected { outline: 2px solid #e16f59; outline-offset: 2px; }
.heat-cell:focus-visible { outline: 2px solid #e16f59; outline-offset: 2px; }
.heatmap-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #648c83; }

/* FOOTER */

.atlas-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 55px;
  padding: 35px 0;
  border-top: 1px solid #a5c7bb;
}

.atlas-footer strong { font-size: 17px; letter-spacing: 1px; }
.atlas-footer p { color: #648c83; font-size: 12px; }
.atlas-footer > span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #648c83; }

/* RESPONSIVE */

@media (max-width: 850px) {
  .atlas-hero { grid-template-columns: 1fr; }
  .hero-graphic { height: 280px; }
  .atlas-grid { grid-template-columns: 1fr; }
  .atlas-card.card-large { grid-column: auto; }
}

@media (max-width: 550px) {
  .atlas-header { padding: 15px; }
  .atlas-header-right { display: none; }
  .atlas-main { padding: 0 13px; }
  .atlas-hero { padding: 35px 0; }
  .atlas-hero h1 { font-size: 51px; }
  .atlas-summary { grid-template-columns: repeat(2, 1fr); }
  .atlas-summary > div:nth-child(3) { border-left: 0; border-top: 1px solid #a5c7bb; }
  .atlas-summary > div:nth-child(4) { border-top: 1px solid #a5c7bb; }
  .atlas-intro { flex-direction: column; align-items: start; }
  .atlas-card { padding: 17px; }
  .chart-box { height: 245px; }
  .chart-box.chart-large { height: 260px; }
}

(function () {
  "use strict";

var root = document.getElementById("dataAtlas");
  if (!root) return;

var charts = [];
  var ready = false;
  var theme = "business";

var palette = [
    "#176b65", "#f07f69", "#e7be68",
    "#75bfc1", "#8c78ae", "#6d9c78"
  ];

var themes = {
    business: ["Revenue", "Marketing", "Sales", "Support", "Growth", "Operations"],
    technology: ["AI", "Cloud", "Security", "Mobile", "Web", "Data"],
    nature: ["Forest", "Ocean", "Solar", "Wind", "Water", "Wildlife"]
  };

var months = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
  ];

function el(id) {
    return document.getElementById(id);
  }

function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

function numbers(count, min, max) {
    var a = [];
    for (var i = 0; i < count; i++) a.push(rand(min, max));
    return a;
  }

function opts() {
    return {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      devicePixelRatio: Math.min(window.devicePixelRatio || 1, 1.5),
      plugins: {
        legend: {
          position: "bottom",
          labels: {
            color: "#50766f",
            boxWidth: 11,
            padding: 15,
            font: { size: 11 }
          }
        },
        tooltip: {
          backgroundColor: "#173d3c",
          padding: 11,
          cornerRadius: 6
        }
      }
    };
  }

function axes() {
    return {
      x: {
        grid: { display: false },
        border: { display: false },
        ticks: { color: "#648c83" }
      },
      y: {
        beginAtZero: true,
        grid: { color: "rgba(23,107,101,0.12)" },
        border: { display: false },
        ticks: { color: "#648c83" }
      }
    };
  }

function add(id, config) {
    charts.push(new Chart(el(id), config));
  }

function createCharts() {
    var labels = themes[theme];

var a = opts();
    a.scales = axes();
    a.plugins.legend.display = false;

add("atlasArea", {
      type: "line",
      data: {
        labels: months,
        datasets: [{
          label: "Performance",
          data: numbers(12, 30, 95),
          borderColor: palette[0],
          backgroundColor: "rgba(23,107,101,0.12)",
          fill: true,
          tension: 0.4,
          borderWidth: 3,
          pointRadius: 3
        }]
      },
      options: a
    });

var b = opts();
    b.scales = axes();

add("atlasBar", {
      type: "bar",
      data: {
        labels: labels,
        datasets: [
          { label: "Current", data: numbers(6, 30, 90), backgroundColor: palette[0], borderRadius: 5 },
          { label: "Previous", data: numbers(6, 20, 75), backgroundColor: palette[1], borderRadius: 5 }
        ]
      },
      options: b
    });

var d = opts();
    d.cutout = "68%";

add("atlasDonut", {
      type: "doughnut",
      data: {
        labels: labels.slice(0, 5),
        datasets: [{
          data: numbers(5, 10, 45),
          backgroundColor: palette.slice(0, 5),
          borderWidth: 0,
          spacing: 3
        }]
      },
      options: d
    });

var r = opts();
    r.scales = {
      r: {
        min: 0,
        max: 100,
        grid: { color: "rgba(23,107,101,0.15)" },
        angleLines: { color: "rgba(23,107,101,0.15)" },
        pointLabels: { color: "#50766f" },
        ticks: { display: false }
      }
    };

add("atlasRadar", {
      type: "radar",
      data: {
        labels: labels,
        datasets: [
          {
            label: "Current",
            data: numbers(6, 35, 95),
            borderColor: palette[0],
            backgroundColor: "rgba(23,107,101,0.15)",
            pointBackgroundColor: palette[0]
          },
          {
            label: "Target",
            data: numbers(6, 55, 90),
            borderColor: palette[1],
            backgroundColor: "rgba(240,127,105,0.08)",
            pointBackgroundColor: palette[1]
          }
        ]
      },
      options: r
    });

var bu = opts();
    bu.scales = axes();

add("atlasBubble", {
      type: "bubble",
      data: {
        datasets: [{
          label: "Observations",
          data: points(18, true),
          backgroundColor: "rgba(240,127,105,0.55)",
          borderColor: palette[1]
        }]
      },
      options: bu
    });

var po = opts();
    po.scales = {
      r: {
        grid: { color: "rgba(23,107,101,0.15)" },
        angleLines: { color: "rgba(23,107,101,0.15)" },
        ticks: { display: false }
      }
    };

add("atlasPolar", {
      type: "polarArea",
      data: {
        labels: labels.slice(0, 5),
        datasets: [{
          data: numbers(5, 20, 85),
          backgroundColor: palette.slice(0, 5),
          borderWidth: 1,
          borderColor: "#f0f7ef"
        }]
      },
      options: po
    });

var h = opts();
    h.indexAxis = "y";
    h.scales = axes();
    h.plugins.legend.display = false;

add("atlasHorizontal", {
      type: "bar",
      data: {
        labels: labels,
        datasets: [{
          label: "Score",
          data: numbers(6, 25, 100),
          backgroundColor: palette,
          borderRadius: 5,
          maxBarThickness: 20
        }]
      },
      options: h
    });

var st = opts();
    st.scales = axes();
    st.scales.x.stacked = true;
    st.scales.y.stacked = true;

add("atlasStacked", {
      type: "bar",
      data: {
        labels: ["Q1", "Q2", "Q3", "Q4"],
        datasets: [
          { label: "Group A", data: numbers(4, 15, 40), backgroundColor: palette[0] },
          { label: "Group B", data: numbers(4, 15, 40), backgroundColor: palette[1] },
          { label: "Group C", data: numbers(4, 15, 40), backgroundColor: palette[2] }
        ]
      },
      options: st
    });

var mi = opts();
    mi.scales = axes();

add("atlasMixed", {
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: [
          {
            type: "bar",
            label: "Volume",
            data: numbers(6, 35, 85),
            backgroundColor: "rgba(23,107,101,0.55)",
            borderRadius: 5
          },
          {
            type: "line",
            label: "Trend",
            data: numbers(6, 30, 90),
            borderColor: palette[1],
            backgroundColor: palette[1],
            borderWidth: 3,
            tension: 0.35
          }
        ]
      },
      options: mi
    });

var sc = opts();
    sc.scales = axes();

add("atlasScatter", {
      type: "scatter",
      data: {
        datasets: [{
          label: "Measurements",
          data: points(25, false),
          backgroundColor: palette[0],
          pointRadius: 5
        }]
      },
      options: sc
    });

var ne = opts();
    ne.cutout = "30%";

add("atlasNested", {
      type: "doughnut",
      data: {
        labels: labels.slice(0, 4),
        datasets: [
          {
            label: "Outer distribution",
            data: numbers(4, 15, 45),
            backgroundColor: palette.slice(0, 4),
            borderWidth: 2,
            borderColor: "#f0f7ef"
          },
          {
            label: "Inner distribution",
            data: numbers(4, 10, 40),
            backgroundColor: ["#7bb3a7", "#f4ac99", "#f1d99d", "#a5d6d6"],
            borderWidth: 2,
            borderColor: "#f0f7ef"
          }
        ]
      },
      options: ne
    });
  }

function heatmap() {
    var container = el("atlasHeatmap");
    container.replaceChildren();

var fragment = document.createDocumentFragment();

for (var i = 0; i < 112; i++) {
      var intensity = rand(0, 4);
      var week = Math.floor(i / 7) + 1;
      var day = i % 7 + 1;

var cell = document.createElement("button");
      cell.type = "button";
      cell.className = "heat-cell heat-" + intensity;
      cell.title = "Week " + week + ", day " + day + ": level " + intensity;
      cell.setAttribute("aria-label", cell.title);

cell.addEventListener("click", function () {
        var old = container.querySelector(".selected");
        if (old) old.classList.remove("selected");
        this.classList.add("selected");
        el("atlasHeatmapInfo").textContent = this.title;
      });

fragment.appendChild(cell);
    }

container.appendChild(fragment);
    el("atlasHeatmapInfo").textContent = "Select a square to see activity";
  }

function refresh() {
    if (!ready) return;

var labels = themes[theme];

charts[0].data.datasets[0].data = numbers(12, 30, 95);

charts[1].data.labels = labels;
    charts[1].data.datasets[0].data = numbers(6, 30, 90);
    charts[1].data.datasets[1].data = numbers(6, 20, 75);

charts[2].data.labels = labels.slice(0, 5);
    charts[2].data.datasets[0].data = numbers(5, 10, 45);

charts[3].data.labels = labels;
    charts[3].data.datasets[0].data = numbers(6, 35, 95);
    charts[3].data.datasets[1].data = numbers(6, 55, 90);

charts[4].data.datasets[0].data = points(18, true);

charts[5].data.labels = labels.slice(0, 5);
    charts[5].data.datasets[0].data = numbers(5, 20, 85);

charts[6].data.labels = labels;
    charts[6].data.datasets[0].data = numbers(6, 25, 100);

charts[7].data.datasets.forEach(function (ds) {
      ds.data = numbers(4, 15, 40);
    });

charts[8].data.datasets.forEach(function (ds) {
      ds.data = numbers(6, 30, 90);
    });

charts[9].data.datasets[0].data = points(25, false);

charts[10].data.labels = labels.slice(0, 4);
    charts[10].data.datasets[0].data = numbers(4, 15, 45);
    charts[10].data.datasets[1].data = numbers(4, 10, 40);

charts.forEach(function (chart) {
      chart.update("none");
    });

heatmap();
  }

function initialize() {
    if (ready || typeof Chart === "undefined") return;

createCharts();
    heatmap();
    ready = true;

el("atlasRandomize").addEventListener("click", refresh);

el("atlasDataset").addEventListener("change", function () {
      theme = this.value;
      refresh();
    });
  }

if (typeof Chart !== "undefined") {
    initialize();
  } else {
    var attempts = 0;

var timer = setInterval(function () {
      attempts++;

if (typeof Chart !== "undefined") {
        clearInterval(timer);
        initialize();
      } else if (attempts >= 40) {
        clearInterval(timer);
        var message = root.querySelector(".hero-copy p");
        if (message) {
          message.textContent = "Chart.js could not load. Check your connection.";
        }
      }
    }, 150);
  }

})();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground