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.google.com/chrome/">Google Chrome</a>,
    <a href="//www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>,
    and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</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;">
        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Another <a href="https://twitter.com/hashtag/Charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#Charticulator</a> viz exploring linked bands to create Alluvial/Sankey/Streamgraph/Ribbon type charts. Data set is global suicides by generation from Kaggle.<br><br>.CHART file is in the share for you to explore:<a href="https://t.co/ayBWNxRAQU">https://t.co/ayBWNxRAQU</a> <a href="https://t.co/lvQUL6ILYC">pic.twitter.com/lvQUL6ILYC</a></p>&mdash; Nick Snapp (@Nsnapp) <a href="https://twitter.com/Nsnapp/status/1093245925403705344?ref_src=twsrc%5Etfw">February 6, 2019</a></blockquote>
      </div>
      <div class="columns-3" style="overflow: hidden;">
        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I just submitted my visual, using Charticulator, for this months <a href="https://twitter.com/hashtag/SWDchallenge?src=hash&amp;ref_src=twsrc%5Etfw">#SWDchallenge</a> <a href="https://twitter.com/hashtag/dataviz?src=hash&amp;ref_src=twsrc%5Etfw">#dataviz</a> <a href="https://twitter.com/hashtag/charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#charticulator</a> <a href="https://t.co/k3Yeg5gKrq">pic.twitter.com/k3Yeg5gKrq</a></p>&mdash; Dennis de Kock (@Kocky) <a href="https://twitter.com/Kocky/status/1081650965193854976?ref_src=twsrc%5Etfw">January 5, 2019</a></blockquote>
      </div>
      <div class="columns-3" style="overflow: hidden;">
          <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Avg Estimated Christmas Spend in US for <a href="https://twitter.com/hashtag/MakeoverMonday?src=hash&amp;ref_src=twsrc%5Etfw">#MakeoverMonday</a> - via <a href="https://twitter.com/hashtag/Charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#Charticulator</a> - <a href="https://t.co/SjJEya1lbz">https://t.co/SjJEya1lbz</a> <br>Unfamiliar new tool to me, so stuck close to original viz <a href="https://twitter.com/VizWizBI?ref_src=twsrc%5Etfw">@VizWizBI</a> <a href="https://twitter.com/TriMyData?ref_src=twsrc%5Etfw">@TriMyData</a> <a href="https://t.co/nQYZ8eYYwy">pic.twitter.com/nQYZ8eYYwy</a></p>&mdash; David Eldersveld (@dataveld) <a href="https://twitter.com/dataveld/status/1076849513158066176?ref_src=twsrc%5Etfw">December 23, 2018</a></blockquote>
        </div>
    </div>
    <!--
      <div class="columns-3" style="overflow: hidden;">
        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/GooglePlay?src=hash&amp;ref_src=twsrc%5Etfw">#GooglePlay</a> app categories using parallel coordinates with <a href="https://twitter.com/hashtag/charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#charticulator</a> and <a href="https://twitter.com/hashtag/PowerBI?src=hash&amp;ref_src=twsrc%5Etfw">#PowerBI</a> . Unfortunatley, charticulator doesn&#39;t support interactive brushing (yet?) which is what makes P-coords so powerful. Used some range slicers instead.<br><br>Interactive PBI:<a href="https://t.co/WffYcurmW7">https://t.co/WffYcurmW7</a> <a href="https://t.co/fCFc0Z9hNE">pic.twitter.com/fCFc0Z9hNE</a></p>&mdash; Nick Snapp (@Nsnapp) <a href="https://twitter.com/Nsnapp/status/1085661423567482880?ref_src=twsrc%5Etfw">January 16, 2019</a></blockquote>
      </div>
      <div class="columns-3" style="overflow: hidden;">
        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Latest <a href="https://twitter.com/hashtag/charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#charticulator</a> started as a Willard Brinton tribute...then charticulator took over.<br>Used the global terrorism database:<a href="https://t.co/qqV3Hwu1qQ">https://t.co/qqV3Hwu1qQ</a> <a href="https://t.co/RtjONKnzbz">pic.twitter.com/RtjONKnzbz</a></p>&mdash; Nick Snapp (@Nsnapp) <a href="https://twitter.com/Nsnapp/status/1082526229327052806?ref_src=twsrc%5Etfw">January 8, 2019</a></blockquote>
      </div>
      <div class="columns-3" style="overflow: hidden;">
        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Was inspired by <a href="https://twitter.com/CarniDC?ref_src=twsrc%5Etfw">@CarniDC</a> book of work so I tried something close. Not perfect but given the time (15- 20 mins) and no need to deal with .JS... I am amazed how easy it was. Again, <a href="https://twitter.com/hashtag/Charticulator?src=hash&amp;ref_src=twsrc%5Etfw">#Charticulator</a> is amazing! Spread the word :)<a href="https://t.co/yEHE6pDyw2">https://t.co/yEHE6pDyw2</a> <a href="https://t.co/zC7W76LFCm">pic.twitter.com/zC7W76LFCm</a></p>&mdash; Nick Snapp (@Nsnapp) <a href="https://twitter.com/Nsnapp/status/1073985244556972032?ref_src=twsrc%5Etfw">December 15, 2018</a></blockquote>
      </div>
     -->
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </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>