Make Real Time Interactive D3.js Visualizations Without Writing Any SQL Code

Mar 18, 2016 · 3 min read
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Today we are excited to announce BBD3, a data visualization application that lets you create and save visualizations on top of your SQL data using Bouquet and D3.js.

BBD3 comes with a large set of features such as advanced filtering, period selectors, bookmarks, preset visualization templates and more.

BBD3 is fully interactive, that means you fetch your SQL data via a simple and unique interface and without writing any SQL. When your dataset is configured, use one of the visualization templates or embed your own D3.js script to represent your data. Once your visualization is looking great, save and replay it at a later time, always on an up-to-date dataset.

Try it out now!

The BBD3 online demo comes with a ready to use DVD rental database and configured bookmarks so you can browse existing visualizations. To run the app on your on database, you have to install Bouquet on your machine. You can find the documentation here.


Let’s check how you can write your first visualization with BBD3 and how simple it is to perform visualization on your SQL data using Bouquet SDK and D3.js.

We will create a simple bar chart using the ‘DVD Rental, Best rentals in 2014’ bookmark.

This visualization is really similar to the Mike Bostock’s bar chart example available at

// cleanup the viewport which DOM id is given by the “el” attribute'#'+el).html(“”);
// get the data from Bouquet’s analysisJob object passed as “analysis” attribute
var data = analysis.get("results").rows;
// just take the first 20 rows
data = data.slice(0,20);
// build a simple barchart — using code from
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 500 - - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
var yAxis = d3.svg.axis()
var svg ="#"+el).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + + ")");
// x axis values are in the first column (0) of the results array
x.domain( { return d.v[0]; }));
// y axis values are in the second column (1) of the results array
y.domain([0, d3.max(data, function(d) { return d.v[1]; })]);
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.attr("class", "y axis")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("style", "fill: steelblue;")
.attr("x", function(d) { return x(d.v[0]); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.v[1]); })
.attr("height", function(d) { return height - y(d.v[1]); });

Once the snippet above pasted in the editor, click the apply button. You will see your bar chart on the right side panel.

You can go deeper and perform your own customizations. Check out the large collection of examples here to help you getting started.

We’d love to see what you have built, so please share your visualization with us on twitter @openbouquet.

If you have any feedback or questions, joins us on the community platform or tweet us at @openbouquet, we’re always happy to help.

Happy analytics!

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store