Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
connector = new MapdCon()
.protocol('https')
.host('metis.mapd.com')
.port('443')
.dbName('mapd')
.user('mapd')
.password('HyperInteractive');
session = new Promise((resolve, reject) => {
connector.connect((error, connection) => {
if (error) return reject(error);
resolve(connection);
})
});
tables = session.getTablesAsync();
fields = session.getFieldsAsync("flights_donotmodify");
{
const result = await session.queryAsync(`SELECT count(*) AS n FROM tweets_nov_feb WHERE country='CO'`, {});
return `There are ${result[0].n} tweets from Columbia.`;
}
{
const result = await session.queryAsync(
'SELECT carrier_name as key0, AVG(airtime) AS val FROM flights_donotmodify WHERE airtime IS NOT NULL GROUP BY key0 ORDER BY val DESC LIMIT 100',
{}
);
const margin = { top: 20, right: 20, bottom: 150, left: 40 };
const width = 640;
const height = 480;
const x = d3.scaleBand()
.domain(result.map(d => d.key0))
.range([0, width])
// .round([0.05]);
.padding(0.05);
const y = d3.scaleLinear()
.domain([0, d3.max(result, d => d.val)])
.range([height, 0]);
const xAxis = d3
.axisBottom()
.scale(x)
.tickFormat((d, i) => d);
const yAxis = d3
.axisLeft()
.scale(y)
.ticks(10);
const svg = d3.select(
DOM.svg(
width + margin.left + margin.right,
height + margin.top + margin.bottom
)
);
const g = svg
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svg
.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '-.55em')
.attr('transform', 'rotate(-90)');
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');
svg
.selectAll('bar')
.data(result)
.enter()
.append('rect')
.style('fill', 'steelblue')
.attr('x', d => x(d.key0))
.attr('width', x.bandwidth())
.attr('y', d => y(d.val))
.attr('height', d => height - y(d.val));
return svg.node();
}
new Promise((resolve, reject) => {
session.renderVega('1', JSON.stringify(contributionsVega), {}, (error, result) => {
if (error) return reject(error);
const src = `data:image/png;base64,${result.image}`;
const image = DOM.element('img', { src });
resolve(image);
});
});
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
