You are actually quite close to a working solution! What was missing was to use the totalHits
part of the data.
You can use d3.json() to load in the data from your api.
d3.json('/api/endpoint', function (error, results) {
var bars = canvas.selectAll("select")
.data(results.data)
.enter()
.append("rect")
.attr("width", function(d) { return widthScale(d.totalHits); })
.attr("height", 50)
.attr("y", function(d, i){return i*70;});
}
See this jsfiddle for a full example using you data above: http://jsfiddle.net/willeeklund/YG7Bc/2/
Sidenotes:
- When you load in data using the .data() method, the input should be an array.
- Inside the
.width
method you can try to log out thed
variable for debugging.
Best of luck!
/Wille