PHẦN III. Ứng dụng RDF vào lập trình semantic web
III.6 Trực quan hóa giao diện
chúng ta đã sử dụng dạng bảng để thể hiện đến cho người dung, trong phần này ta sẽ tìm hiểu một công cụ thể hiện sạng trực quan , cụ thể hơn là dạng biểu đồ của các dữ liệu cần quan tâm.
Ví dụ thể hiện là một biểu đổ dạng điểm (plot) , thể hiện tất cả các jobs trên đó , trong đó funding và salary thể hiện như trục thể hiện thông tin.
Bổ sung đoạn code sau dung để hỗ trợ yêu cầu lấy dữ liệu trả về trình duyệt. @cherrypy.expose
def exhibit(self):
t = lookup.get_template('exhibit1.html') return t.render()
def exhibit_job_data(self):
jobs = con.query("""select ?job ?title ?salary ?amount ?cid ?location ?cname where {?job jobs:vacancywith ?cid .
?job dc:title ?title . ?cid company:name ?cname . ?job jobs:salaryrange ?range . ?range jobs:minimumsalary ?salary . ?job jb:location ?location . ?cid jb:funding_round ?round . ?round jb:amount ?amount .}""") items = []
for row in jobs:
items.append({'id':row['job']['value'], 'label':row['title']['value'],
'uri':'view?id='+quote_plus(row['job']['value']), 'funding':float(row['amount']['value']),
'company':row['cname']['value'], 'location':row['location']['value'], 'salary':float(row['salary']['value'])})
return dumps({'items':items})
hàm exhibit_job_data sẽ liệt kê ra tất cả các thông tin cần thiết vẽ chart của sanh sách các jobs. Sau đó chuyển nó sang dạng mảng đối tượng trong JSON và trả về yêu cầu gọi.
Hình 3-11: kết quả json trả về bởi hàm exhibit_job_data
Template thể hiện sử dụng công cụ vẽ chart của Exhibit, vì đây là một trang thuần html + javascript nên đầu vào của chúng phải là một url trả về cấu trúc thuộc kiểu json.
<html> <head>
<title>Exhibit example</title>
<link href="exhibit_job_data" type="application/json" rel="exhibit/data"/>
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/chart/chart- extension.js" type="text/javascript"></script>
</head> <body>
<table><tr><td>
<div ex:role="viewPanel"> <div ex:role="view"
ex:viewClass="Exhibit.ScatterPlotView" ex:label="Funding vs. Salary"
ex:y=".salary"
ex:yLabel="Salary"> </div>
</div>
</td><td width="20%"> <div ex:role="facet"
ex:expression=".company" (adsbygoogle = window.adsbygoogle || []).push({});
ex:facetLabel="Company" ex:height="10em"></div> <div ex:role="facet"
ex:expression=".label"
ex:facetLabel="Title" ex:height="10em"></div> </td></tr>
</body> </html>
Bên trong là cấu trúc sử dụng chỉ định các thuộc tính trong json dung để vẽ biểu đồ. Khi trang web hiển thị, nó sẽ dò theo href="exhibit_job_data" để gọi truy xuất dữ liệu, sau khi lấy được nó sẽ render ra trình duyệt.
PHẦN IV. Kết luận