Schema Extraction

Output of the schema extraction process.

<!doctype html>
<meta charset="utf-8">
<title>Schema Extraction from Web Tables</title>
<style>
  table {
    border-collapse: collapse;
    width: inherit;
    margin: 5px 10px;
  }
  table.orig {
    display: inline-block;
             border-radius: 2px;
             box-shadow: 0 0 10px rgba(100, 100, 100, 0.8);
             background-color: #f6f6f6;
  }

.orig th, .orig td {border: 1px solid #ccc;}
  .tgt > tbody > tr > th, .tgt > tbody > tr > td {border: 1px solid #ccc;}
  th, td {padding: 1px 5px;}
  .orig th, .tgt th {background-color: #c33; color: white;}

.title {font-weight: bold; color: darkblue;}
  .non-relational {color: #888; font-size: 0.9em;}
  .aggregate {font-style: italic;}
  .group-header td {
    background-color: #ddd;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
    font-style: italic;
  }

.m {text-align: center;}
  .r {text-align: right;}
</style>
<body>
<table>
  <tr><th>Source Table</th><th>Extracted Schema</th></tr>
  <tr><td>
<table class="example orig">
  <tr class="title"><td colspan="3">Patent Applications by Residents</td></tr>
  <tr class="non-relational"><td colspan="3">Data Source: worldbank.org</td></tr>
  <tr class="non-relational"><td colspan="3">(showing top countries in each continent)</td></tr>
  <tr class="header"><th>Country</th><th>Residents</th><th>Applications</th></tr>
  <tr class="group-header"><td>North America</td><td></td><td></td></tr>
  <tr class="data"><td class="m">United States</td><td class="r">307,007,000</td><td class="r">224,912</td></tr>
  <tr class="data"><td class="m">Canada</td><td class="r">33,739,900</td><td class="r">5,067</td></tr>
  <tr class="data"><td class="m">Mexico</td><td class="r">112,033,369</td><td class="r">822</td></tr>
  <tr class="aggregate"><td></td><td>N.A. Total</td><td class="r">230,801</td></tr>
  <tr class="group-header"><td>Asia</td><td></td><td></td></tr>
  <tr class="data"><td class="m">Japan</td><td class="r">127,557,958</td><td class="r">295,315</td></tr>
  <tr class="data"><td class="m">China</td><td class="r">1,331,380,000</td><td class="r">229,096</td></tr>
  <tr class="data"><td class="m">South Korea</td><td class="r">48,747,000</td><td class="r">127,316</td></tr>
  <tr class="aggregate"><td></td><td>Asia Total</td><td class="r">651,727</td></tr>
  <tr class="blank"><td>&nbsp;</td><td></td><td></td></tr>
  <tr class="non-relational"><td colspan="2">Note: data from 2009</td><td></td></tr>
</table>
</td><td style="vertical-align:top;">
<table id="schema" class="tgt" style="display:inline-block;">
  <tr><td>Title:</td><td><table class="title"></table></td></tr>
  <tr><td>Columns:</td><td><table class="header"></table></td></tr>
  <tr><td>Data:</td><td><table class="data"></table></td></tr>
  <tr><td>Groups:</td><td><table class="group-header"></table></td></tr>
  <tr><td>Totals/Subtotals:</td><td><table class="aggregate"></table></td></tr>
</table>
</td></tr></table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="extract.js"></script>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

https://d3js.org/d3.v3.min.js