How to Create Extension Visuals

Published on November 5, 2015

This post is a continuation of the Creating Interesting Visuals series – click here to read the previous post on Flow and Chord Charts
The extension visual is full of possibilities. For this analysis, though, you’ll just add some fairly straightforward explanatory text with some links.

  1. Create a new viz using either the Stackexchange Shifts dataset or the Stackexhange Daily Activity dataset. This is where the viz will appear later when you go to add it to an app.
  2. Choose the extension viz type from the visuals dropdown menu.
    image46
  3. Edit the title to “StackExchange Analysis.”
  4. Paste the following html code into the large “Enter HTML below” box.
    <p>StackExhange is a network of specialized question and answer forums. The progenitor was the well known programming forum
     <a href="http://stackoverflow.com/" target="blank">StackOverflow. </a>
    StackExchange makes the data underlying all of their forums available for anyone to explore. The queries that were used to create this app can both be found 
    <a href="http://data.stackexchange.com/users/20420/joshua-kitz" target="blank">here</a>.
    </p>
    <p>This analysis uses explores the following four sites:</p>
    <p>
    <img src="http://cdn.sstatic.net/gis/img/favicon.ico"> <b>Geographic Information Systems</b> 
    <a href="http://gis.stackexchange.com/" target="blank"> gis.stackexchange.com </a>
    </p>
    <p><img src="http://cdn.sstatic.net/stats/img/favicon.ico"> <b>Cross Validated</b> 
    <a href="http://stats.stackexchange.com/" target="blank"> stats.stackexchange.com</a>
    </p>
    <p><img src="http://cdn.sstatic.net/dba/img/favicon.ico"> <b>Database Administrators</b> 
    <a href="http://dba.stackexchange.com/" target="blank"> dba.stackexchange.com</a>
    </p>
    <p><img src="http://cdn.sstatic.net/rpg/img/favicon.ico"> <b>Role-Playing Games</b> 
    <a href="http://rpg.stackexchange.com/" target="blank"> rpg.stackexchange.com</a>
    </p>
    <p>You can explore StackExchange data for yourself at <a href="http://data.stackexchange.com/" target="blank">data.stackexchange.com</a>
  5. Click “Refresh Visual” and click “Save.” It will look like this:
    image59