• Hands-On Data Visualization
    by Jack Dougherty & Ilya Ilyankou
  • Preface
    • Authors & Acknowledgements
    • Audience and Outline
    • Follow Along on a Computer
    • About Open-Access Web Edition
  • 1 Introduction: Why Data Visualization?
    • What Can You Believe?
    • Some Pictures Are More Persuasive
    • Different Shades of the Truth
    • Organization of the Book
  • 2 Choose Tools to Tell Your Story
    • Start Sketching Your Data Story
    • Ten Factors When Considering Tools
    • Our Recommended Tools
    • Use a Password Manager
  • 3 Strengthen Your Spreadsheet Skills
    • Select your Spreadsheet Tools
    • Download to CSV or ODS Format
    • Make a Copy of a Google Sheet
    • Share Your Google Sheets
    • Upload and Convert to Google Sheets
    • Geocode Addresses in Google Sheets
    • Collect Data with Google Forms
    • Sort and Filter Data
    • Calculate with Formulas
    • Summarize Data with Pivot Tables
    • Match Columns with VLOOKUP
    • Spreadsheet vs. Relational Database
  • 4 Find and Question Your Data
    • Guiding Questions for Your Search
    • Public and Private Data
    • Mask or Aggregate Sensitive Data
    • Open Data Repositories
    • Source Your Data
    • Recognize Bad Data
    • Question Your Data
  • 5 Clean Up Messy Data
    • Find and Replace with Blank
    • Transpose Rows and Columns
    • Split Data into Separate Columns
    • Combine Data into One Column
    • Extract Tables from PDFs with Tabula
    • Clean Data with OpenRefine
  • 6 Make Meaningful Comparisons
    • Precisely Describe Comparisons
    • Normalize Your Data
    • Beware of Biased Comparisons
  • 7 Chart Your Data
    • Chart Design Principles
    • Google Sheets Charts
    • - Bar and Column Charts
    • - Histograms
    • - Pie, Line, and Area Charts
    • Datawrapper Charts
    • - Annotated Charts
    • - Range Charts
    • - Scatter and Bubble Charts
    • Tableau Public Charts
    • - Scatter Chart
    • - Filtered Line Chart
  • 8 Map Your Data
    • Map Design Principles
    • Design Choropleth Colors & Intervals
    • Normalize Choropleth Map Data
    • Point Map with Google My Maps
    • Symbol Point Map with Datawrapper
    • Choropleth Map with Datawrapper
    • Choropleth Map with Tableau Public
    • Current Map with Socrata Open Data
  • 9 Table Your Data
    • Table Design Principles
    • Datawrapper Table with Sparklines
  • 10 Embed On the Web
    • Static Image vs Interactive iframe
    • Get the Embed Code or iframe Tag
    • Paste Code or iframe to Website
  • 11 Edit and Host Code with GitHub
    • Copy, Edit, and Host a Simple Leaflet Map Template
    • Convert GitHub Pages Link to iframe
    • Create a New Repo and Upload Files on GitHub
    • GitHub Desktop and Atom Editor to Code Efficiently
  • 12 Chart.js and Highcharts Templates
    • Bar or Column Chart with Chart.js
    • Error Bars with Chart.js
    • Line Chart with Chart.js
    • Annotated Line Chart with Highcharts
    • Scatter Chart with Chart.js
    • Bubble Chart with Chart.js
  • 13 Leaflet Map Templates
    • Leaflet Maps with Google Sheets
    • Leaflet Storymaps with Google Sheets
    • Get Your Google Sheets API Key
    • Leaflet Maps with CSV Data
    • Leaflet Heatmap Points with CSV Data
    • Leaflet Searchable Point Map
    • Leaflet Maps with Open Data APIs
  • 14 Transform Your Map Data
    • Bulk Geocode with US Census
    • Pivot Points into Polygon Data
    • GeoJSON and Geospatial Data
    • Find GeoJSON Boundary Files
    • Draw and Edit with GeoJson.io
    • Edit and Join with Mapshaper
    • Georeference with MapWarper
    • Convert Compressed KMZ to KML
  • 15 Detect Lies and Reduce Data Bias
    • How to Lie with Charts
    • How to Lie with Maps
    • Recognize and Reduce Data Bias
    • Map Area and Projection Bias
  • 16 Tell and Show Your Data Story
    • Build a Narrative on a Storyboard
    • Draw Attention to Meaning
    • Acknowledge Sources & Uncertainty
    • Decide On Your Data Story Format
  • Appendix
  • A Fix Common Mistakes
  • B Find Connecticut Data
  • C Peer Review Samples
    • Section 2 Chart 1 Peer Review Sample
    • Section 2 Chart 1 Peer Review Sample with Notes
    • Section 2 Chart 2 Peer Review Sample
    • Section 2 Chart 2 Peer Review Sample with Notes
    • Section 3 Peer Review Sample 1
    • Section 3 Peer Review Sample 1 with Notes
    • Section 3 Peer Review Sample 2
    • Section 3 Peer Review Sample 2 with Notes
  • D Publishing with Bookdown
    • Style Guide for Hands-On Data Visualization
    • Images
    • Tables
    • Notes and Bibliography
    • Manually Modify Markdown Output
  • References
  • Open access book-in-progress
  • Creative Commons License
  • Built with Bookdown + RStudio

Hands-On Data Visualization

Convert GitHub Pages Link to iframe

In Chapter 10: Embed on the Web, we discussed the benefits of displaying interactive content from a primary site and making it appear seamlessly in a secondary site. You also learned how to convert very long Datawrapper and Tableau Public embed codes into shorter iframe tags when needed, so that you can embed them more easily on a secondary website.

The same concept applies to GitHub Pages. When you publish a code template for a chart or map (or any content) on GitHub Pages, it generates an online link that you can convert into an iframe tag, using the same principles as above, to embed it on a secondary website. Follow these steps:

  1. For any GitHub repository you have published online, go to its Settings page and scroll down to copy its GitHub Pages web address, which will appear in this general format:

https://USERNAME.github.io/REPOSITORY

  1. Convert it into an iframe by enclosing the link inside quotation marks as the source, and adding both start and end tags, in this general format:

<iframe src="https://USERNAME.github.io/RESPOSITORY"></iframe>

  1. If desired, improve the iframe appearance on the secondary site by adding any of these optional attributes, such as width or height (measured in pixels by default, or percentages), or seamless or frameborder="0" or scrolling="no", in this general format:

<iframe src="https://USERNAME.github.io/RESPOSITORY" width="100%" height="400" seamless frameborder="0" scrolling="no"></iframe>

Hint: Either single-quote (') marks (also called an apostrophe) or double-quote (") marks are acceptable in your iframe code, but be consistent and avoid accidentally pasting in curly-quotes.

Now you are ready to paste your iframe into your preferred website, using methods described in Chapter 10, to display your interactive chart or map template from published repository using GitHub Pages.

Now you should have a better sense of how to edit and host code repositories on GitHub. The next section describes how to enhance your GitHub skills by creating new repos and uploading your files. These are essential steps to create a second copy of a code template or to work with more advanced templates in the next two chapters.