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.
Showcase:
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 https://bl.ocks.org/mbostock/3885304
// cleanup the viewport which DOM id is given by the “el” attribute
d3.select('#'+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 https://bl.ocks.org/mbostock/3885304
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);var y = d3.scale.linear()
.range([height, 0]);var xAxis = d3.svg.axis()
.scale(x)
.orient(“bottom”);var yAxis = d3.svg.axis()
.scale(y)
.orient("left");var svg = d3.select("#"+el).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");// x axis values are in the first column (0) of the results array
x.domain(data.map(function(d) { 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]; })]);svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Count");svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.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!
