Skip to content

Instantly share code, notes, and snippets.

@karmi
Last active December 11, 2015 08:18
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save karmi/4571766 to your computer and use it in GitHub Desktop.
Save karmi/4571766 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart From Terms Facet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
margin: 2em;
}
.chart rect {
stroke: #fff;
fill: rgb(69, 128, 177);
shape-rendering: crispEdges;
}
.chart text {
fill: #fff;
font: normal 16px "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
}
.chart #other rect {
fill: #666;
}
</style>
</head>
<body>
<div id="chart"></div>
<div id="query" style="display:none">
{
"query" : {
"match_all" : {}
},
"facets" : {
"employer" : {
"terms" : {
"field" : "company",
"size" : 3
}
}
}
}
</div>
<script>
if (document.location.protocol == 'file:') {
var query = d3.select("#query").html()
, url = "http://localhost:9200/people-facets/_search?search_type=count&source=" + encodeURIComponent(query)
} else {
url = 'response.json'
}
d3.json(url, function(json) {
console.log(json)
var data = json.facets.employer.terms
data.push({term: "other", count: json.facets.employer.other})
var values = data.map(function(d) { return d.count})
var total = d3.sum(values)
console.log(data, values)
var chart = d3.select("#chart").append("svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 40 * data.length);
var x = d3.scale.linear()
.domain([0, d3.max(values)])
.range([0, 420]);
var y = d3.scale.ordinal()
.domain(values)
.rangeBands([0, 120]);
var percent = percent = d3.format(".0%");
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.classed("bar", true)
.attr("id", function(d) { return d.term})
bar.append("rect")
.attr("y", function(d, i) { return i * 40 })
.attr("width", function(d, i) { return x(d.count) })
.attr("height", 40)
bar.append("text")
.attr("x", 5)
.attr("y", function(d, i) { return i * 40 + 24 })
.text(function(d) {
return d.term + " (" + percent(d.count / total) + ")"
})
bar.append("text")
.attr("x", function(d, i) { return x(d.count) - 26 })
.attr("y", function(d, i) { return i * 40 + 24 })
.text(function(d) { return d.count })
})
</script>
</body>
</html>
{
"took" : 3,
"timed_out" : false,
"_shards" : {
"total" : 5,
"successful" : 5,
"failed" : 0
},
"hits" : {
"total" : 10,
"max_score" : 0.0,
"hits" : [ ]
},
"facets" : {
"employer" : {
"_type" : "terms",
"missing" : 0,
"total" : 10,
"other" : 3,
"terms" : [ {
"term" : "ibm",
"count" : 3
}, {
"term" : "twitter",
"count" : 2
}, {
"term" : "apple",
"count" : 2
} ]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment