Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fceebcb

Browse files
karmikarmi
committed
[BLOG] Added post "Data Visualization with ElasticSearch and Protovis"
1 parent 02a60be commit fceebcb

11 files changed

+1217
-0
lines changed

‎blog/_posts/2011-05-11-data-visualization-with-elasticsearch-and-protovis.markdown‎

Lines changed: 560 additions & 0 deletions
Large diffs are not rendered by default.

‎blog/assets/dashboards/donut.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ElasticSearch Terms Facet Donut Chart</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
7+
<!-- Load JS libraries -->
8+
<script src="jquery-1.5.1.min.js"></script>
9+
<script src="protovis-r3.2.js"></script>
10+
<script src="donut.js"></script>
11+
<script>
12+
$( function() {
13+
var terms = [ { "term" : "search", "count" : 4 },
14+
{ "term" : "java", "count" : 2 },
15+
{ "term" : "ruby", "count" : 1 },
16+
{ "term" : "erlang", "count" : 1 }
17+
];
18+
Donut('donut-chart').data(terms).draw();
19+
});
20+
</script>
21+
</head>
22+
<body>
23+
24+
<!-- Placeholder for the chart -->
25+
<div id="donut-chart"></div>
26+
27+
</body>
28+
</html>

‎blog/assets/dashboards/donut.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
// ===========================
2+
// A donut chart with Protovis
3+
// ===========================
4+
//
5+
// See http://vis.stanford.edu/protovis/ex/pie.html
6+
//
7+
var Donut = function(dom_id) {
8+
// Set the default DOM element ID to bind
9+
if ('undefined' == typeof dom_id) dom_id = 'chart';
10+
11+
var data = function(json) {
12+
// Set the data for the chart
13+
this.data = json;
14+
return this;
15+
};
16+
17+
var draw = function() {
18+
19+
// Sort the data, so the colorization of wedges is preserved with different values
20+
var entries = this.data.sort( function(a, b) { return a.term < b.term ? -1 : 1; } ),
21+
// Create an array holding just the values (counts)
22+
values = pv.map(entries, function(e) { return e.count; });
23+
// console.log('Drawing', entries, values);
24+
25+
// Set-up dimensions and color scheme for the chart
26+
var w = 200,
27+
h = 200,
28+
colors = pv.Colors.category10().range();
29+
30+
// Create the basis panel
31+
var vis = new pv.Panel()
32+
.width(w)
33+
.height(h)
34+
.margin(0, 0, 0, 0);
35+
36+
// Create the "wedges" of the chart
37+
vis.add(pv.Wedge)
38+
// Set-up auxiliary variable to hold state (mouse over / out)
39+
.def("active", -1)
40+
// Pass the normalized data to Protovis
41+
.data( pv.normalize(values) )
42+
// Set-up chart position and dimension
43+
.left(w/3)
44+
.top(w/3)
45+
.outerRadius(w/3)
46+
// Create a "donut hole" in the center of the chart
47+
.innerRadius(15)
48+
// Compute the "width" of the wedge
49+
.angle( function(d) { return d * 2 * Math.PI; } )
50+
// Add white stroke
51+
.strokeStyle("#fff")
52+
53+
// On "mouse over", set the relevant "wedge" as active
54+
.event("mouseover", function() {
55+
this.active(this.index);
56+
this.cursor('pointer');
57+
return this.root.render();
58+
})
59+
// On "mouse out", clear the active state
60+
.event("mouseout", function() {
61+
this.active(-1);
62+
return this.root.render();
63+
})
64+
// On "mouse down", perform action, such as filtering the results...
65+
.event("mousedown", function(d) {
66+
var term = entries[this.index].term;
67+
return (alert("Filter the results by '"+term+"'"));
68+
})
69+
70+
// Add the left part of he "inline" label, displayed inside the donut "hole"
71+
.anchor("right").add(pv.Dot)
72+
// The label is visible when the corresponding "wedge" is active
73+
.visible( function() { return this.parent.children[0].active() == this.index; } )
74+
.fillStyle("#222")
75+
.lineWidth(0)
76+
.radius(14)
77+
78+
// Add the middle part of the label
79+
.anchor("center").add(pv.Bar)
80+
.fillStyle("#222")
81+
.width(function(d) { // Compute width:
82+
return (d*100).toFixed(1).toString().length*4 + // add pixels for percents
83+
10 + // add pixels for glyphs (%, etc)
84+
(entries[this.index].term.length*9); // add pixels for letters (very rough)
85+
})
86+
.height(28)
87+
.top((w/3)-14)
88+
89+
// Add the right part of the label
90+
.anchor("right").add(pv.Dot)
91+
.fillStyle("#222")
92+
.lineWidth(0)
93+
.radius(14)
94+
95+
// Add the text to label
96+
.parent.children[2].anchor("left").add(pv.Label)
97+
.left((w/3)-7)
98+
.text(function(d) {
99+
// Combine the text for label
100+
return (d*100).toFixed(1) + "%" + ' ' +
101+
entries[this.index].term + ' (' + values[this.index] + ')';
102+
})
103+
.textStyle("#fff")
104+
105+
// Bind the chart to DOM element
106+
.root.canvas(dom_id)
107+
// And render it.
108+
.render();
109+
};
110+
111+
// Create the public API
112+
return {
113+
data : data,
114+
draw : draw
115+
};
116+
117+
};

‎blog/assets/dashboards/jquery-1.5.1.min.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)