charticulator.com/index.html

---
layout: default
title: Home
blackfooter: true
---

<section class="home-header" style="background-image: url({{ '/images/hex-gallery-faded.png' | thumbnail_image: '1920x1080^' | cdn_url }})">
  <p class="el-description">
    Create Bespoke Chart Designs without Programming
  </p>
  <p>
    <a class="btn-launch-large" href="{{ '/app/index.html' | relativize_url }}" role="button" onclick="trackAppLaunch()">
      Launch Charticulator
    </a>
  </p>
  <p class="el-note">
    Charticulator requires the use of a mouse or touch screen.
  </p>
  <p class="el-note">
    Compatatible with
    <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>,
    <a href="https://www.google.com/chrome/">Google Chrome</a>,
    and <a href="//www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>.
  </p>
  <p class="el-opensource">
    Free and Open Source from Microsoft Research
  </p>
  <p class="el-github">
    <a class="github-button" href="https://github.com/Microsoft/charticulator" aria-label="Microsoft/charticulator on GitHub">Browse the Source Code</a>
  </p>
</section>

<section class="page-section home-section">
  <div class="columns-container">
    <div class="columns-5 home-section-image">
      <img src="{{ '/images/fast-forward.gif' | cdn_url }}" alt="Interactive Chart Creation" />
    </div>
    <div class="columns-3 home-section-description">
      <h2>Interactive Chart Creation</h2>
      <p>Charticulator enables you to create bespoke and reusable chart layouts without writing any code.</p>
    </div>
  </div>
</section>

<div class="content-shade">
  <section class="page-section home-section">
    <div class="columns-container">
      <div class="columns-3 home-section-description is-right">
        <h2>Infinite Design Possibilities</h2>
        <p>Charticulator enables you to compose a wide range of visual representations.<br />See more examples in our <a href="gallery/">gallery</a>.</p>
      </div>
      <div class="columns-5 home-section-image">
        <div class="el-image" id="img-slideshow" alt="Infinite Design Possibilities" />
      </div>
      <script type="text/javascript">
        (function() {
          // Define the slideshow images. Jekyll is going to convert the "{{...}}" syntax to correct urls
          var imageList = [
            "{{ '/images/gallery/boston_seattle_weather.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/co2_emission_ranking.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/global_trade_of_natural_resources.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/polio_map_alternative.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/polio_map_small_multiples.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/polio.png' | thumbnail_image: '640x480^' | cdn_url }}",
            "{{ '/images/gallery/world_greenhouse_gas_emissions.png' | thumbnail_image: '640x480^' | cdn_url }}"
          ];
          function switchToImage(img) {
            let oldElements = Array.from(document.getElementById("img-slideshow").children);
            let div = document.createElement("div");
            document.getElementById("img-slideshow").append(div);
            div.style.backgroundImage = "url(" + img.src + ")";
            window.getComputedStyle(div).opacity;
            div.style.opacity = 1;
            setTimeout(function() {
              oldElements.forEach(function(e) { e.remove(); });
            }, 500);
          }
          function loadImage(imageURL, callback) {
            let img = new Image();
            let isCanceled = false;
            let timeout = setTimeout(function() {
              isCanceled = true;
              callback();
            }, 5000);
            img.onload = () => {
              if(!isCanceled) {
                clearTimeout(timeout);
                callback();
                switchToImage(img);
              }
            };
            img.src = imageURL;
          }
          // Switch images randomly
          let currentImage = null;
          function randomSwitchImage() {
            while(true) {
              let index = Math.floor(Math.random() * imageList.length);
              if(index < imageList.length) {
                if(imageList[index] != currentImage) {
                  currentImage = imageList[index];
                  loadImage(currentImage, function() {
                    setTimeout(randomSwitchImage, 3000)
                  });
                  break;
                }
              }
            }
          }
          randomSwitchImage();
        })();
      </script>
    </div>
  </section>
</div>

<section class="page-section home-section">
  <div class="columns-container">
    <div class="columns-5 home-section-image">
      <img src="{{ '/images/powerbi-visual.png' | thumbnail_image: '1200x900^' | cdn_url }}" alt="Reusable Chart Designs" />
    </div>
    <div class="columns-3 home-section-description">
      <h2>Reusable Chart Designs</h2>
      <p>Charticulator lets you export chart designs into reusable templates including Microsoft Power BI custom visuals.</p>
    </div>
  </div>
</section>

<div class="content-shade">
  <section class="page-section home-section home-quotes">
    <h1 style="text-align: center">What people say about Charticulator</h1>
    <blockquote>
      The Charticulator - an amazing way to generate totally new/original/amazing custom visuals for Power BI without
      writing a single line of code.
      Fantastic work by the folks at Microsoft Research here.
      <footer>&mdash;
        Amir Netz (Technical Fellow at Microsoft, CTO of Power BI & Intelligence Platform) </footer>
    </blockquote>
    <h1 style="text-align: center">What people made with Charticulator</h1>
    <div class="columns-container" style="align-items: flex-start;">
      <div class="columns-3" style="overflow: hidden;">
        <a href="https://twitter.com/Nsnapp/status/1107798086754013185">
          <img src="{{ '/images/tweets/tweet1.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by Nick Snapp" />
        </a>
      </div>
      <div class="columns-3" style="overflow: hidden;">
        <a href="https://twitter.com/Kocky/status/1081650965193854976">
          <img src="{{ '/images/tweets/tweet2.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by Dennis de Kock" />
        </a>
      </div>
      <div class="columns-3" style="overflow: hidden;">
        <a href="https://twitter.com/dataveld/status/1076849513158066176">
          <img src="{{ '/images/tweets/tweet3.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by David Eldersveld" />
        </a>
      </div>
    </div>
  </section>
</div>

<div class="content-inverted">
  <section class="page-section home-section home-section-last">
    <video style="max-width: 100%" controls preload="auto" poster="{{ '/videos/charticulator-supplemental-poster.png' | cdn_url }}"
      onplay="trackVideoPlay()">
      <source src="{{ '/videos/charticulator-supplemental.mp4' | cdn_url }}">
      </source>
    </video>
  </section>
</div>