d3.js

D3.js + AlaSQL

AlaSQL plays nice with d3.js to create diagrams from complex data queries.

In this example AlaSQL reads an Excel file with Olympic Prizes, group and sort rows, and then take top 10 records and create a list with axe values:

    function graph(axe) {
        alasql(['SELECT TOP 10 '+axe+', SUM([Gold Medals]) AS Gold, \
            SUM([Silver Medals]) AS Silver, SUM([Bronze Medals]) AS Bronze \
            FROM XLSX("medals.xlsx",{headers:true}) \
            GROUP BY '+axe+' ORDER BY '+axe]).then(function(data){
	            d3.select("body")
	            .append('ul')
	            .data(data)
	            .entry()
	            .append('li')
	            .text(function(d){return d[axe]});
        });
    }

    graph('Axe');

See a simple example of AlaSQL + d3.js integration.

Second example

alasql(['SELECT * FROM xlsx("https://cdn.rawgit.com/agershun/alasql-org/gh-pages/demo/014map/cities.xlsx")']).then(function(data){
	g.selectAll("text")
	.data(data)
	.enter()
	.append('text')
	.text(function(d){return d.city})
	.attr("x", function(d) {
	   return projection([d.lon, d.lat])[0];
	})
	.attr("y", function(d) {
	   return projection([d.lon, d.lat])[1];
	})
});

See the full code of this example in jsFiddle.