Can you use the Knowledge Graph API to replicate what's shown in a Google search?

Question

The KG API does well with well-defined entities like people or places. However when I look up something a bit more abstract, such as "Water Polo" or "House of Tudor", the top result from the API is not as accurate, whereas the Google homepage handles them well.

I want to type in a query, and reproduce just the Knowledge Graph Panel that would typically show up alongside a Google search. Is there a way to do that?

var getJSON = function(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

var counter;
var resultType;

document.getElementById('btn').onclick = function() {
 counter = 0;
 document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
 var val = document.getElementById('queryname').value;
  resultType = '';
  if(document.getElementById('btn3').checked){
   resultType = '&types=Person';
  }
  if(document.getElementById('btn4').checked){
   resultType = '&types=Place';
  }
  if(document.getElementById('btn5').checked){
   resultType = '&types=Organization';
  }
 getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val + resultType + '&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
  article.innerHTML = data.itemListElement[counter].result.name;
  description.innerHTML = data.itemListElement[counter].result.description;
  detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
  img = document.createElement('img');
    img.src = data.itemListElement[counter].result.image.contentUrl;
    img.style.maxWidth="245px";
    image.appendChild(img);
 }, function(status) { //error detection....
   alert('Something went wrong.');
 });
}

document.getElementById('btn2').onclick = function() {
 counter = counter+1;
 document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
 var val = document.getElementById('queryname').value;
  resultType = '';
  if(document.getElementById('btn3').checked){
   resultType = '&types=Person';
  }
  if(document.getElementById('btn4').checked){
   resultType = '&types=Place';
  }
  if(document.getElementById('btn4').checked){
   resultType = '&types=Organization';
  }
 getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val +  resultType + '&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
  article.innerHTML = data.itemListElement[counter].result.name;
  description.innerHTML = data.itemListElement[counter].result.description;
  detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
  img = document.createElement('img');
    img.src = data.itemListElement[counter].result.image.contentUrl;
    img.style.maxWidth="245px";
    image.appendChild(img);
 }, function(status) { //error detection....
   alert('Something went wrong.');
 });
}

document.getElementById('btn6').onclick = function() {
 document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
}

body {
    background-color: #212320;
}
p1 {
    font-family: "Times New Roman";
    font-size: 40px;
    color: #acaeab;
}
p2 {
    font-family: "Times New Roman";
    font-size: 20px;
    font-style: italic;
    color: #acaeab;
}
p3 {
    font-family: "Helvetica";
    font-size: 15px;
    color: #acaeab;
}
#container {
  min-height: 100%;
}
#footer {
   position:absolute;
   bottom:0;
}

<div id="container">
<p1><div id="article" style="margin-top:30px; margin-bottom:15px; text-align:center"></div></p1>
<p2><div id="description" style="margin-bottom:30px; text-align:center; width:51%; float:left"></div></p2>
<p3><div id="detail" style="padding-left:10px; width:51%; float:left"></div></p3>
<div id="image" style="width:47%; float:right; text-align:center"></div>
<div id="footer">
<form>
    <input type="text" id="queryname" value=""     onkeypress="return searchKeyPress(event);" />
    <input type="button" id="btn" value="GO" />
    <input type="button" id="btn2" value="NEXT" />
    <button type="button" style="margin-left:30px;" disabled> 
    PERSON</button>
    <input type="checkbox" id="btn3" />
    <button type="button" disabled> PLACE</button>
    <input type="checkbox" id="btn4" />
    <button type="button" disabled> ORG</button>
    <input type="checkbox" id="btn5" />
    <input type="button" id="btn6" value="CLEAR" />
</form>
</div>
</div>
<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btn').click();
        return false;
    }
    return true;
}
</script>