Skip to content

Commit

Permalink
adding sqlite to quickstart
Browse files Browse the repository at this point in the history
  • Loading branch information
Nathan Stephens committed Jan 8, 2019
1 parent 4114044 commit bc256f6
Show file tree
Hide file tree
Showing 4 changed files with 533 additions and 2 deletions.
4 changes: 2 additions & 2 deletions .internal.yml
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
default:
content:
- name: "Enterprise Ready Dashboards"
path: "./local"
description: "Dashboard with drill downs."
path: "./sqlite"
description: "Use databases with Shiny."
tag:
- "Demo Content|Enterprise"
url: "/enterprise/"
119 changes: 119 additions & 0 deletions sqlite/bar_plot.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
// !preview r2d3 data= data.frame(label = c("Austin Bergstrom Intl", "Chicago Ohare Intl", "Dallas Fort Worth Intl", "Eagle Co Rgnl", "Fort Lauderdale Hollywood Intl", "General Edward Lawrence Logan Intl"), y = c(365, 1455, 7257, 103, 182, 274), x = c("GPT", "GPT", "GPT","GPT","GPT","GPT"))

var layer_left = 0.35;
layer_left_text = 0.01;
layer_top = 0.1;
layer_height = 0.85;
layer_width = 0.55;

var col_left_text = width * layer_left_text;

function svg_height() {return parseInt(svg.style('height'))}
function svg_width() {return parseInt(svg.style('width'))}

function col_top() {return svg_height() * layer_top; }
function col_left() {return svg_width() * layer_left;}

function actual_max() {return d3.max(data, function (d) {return d.y; }); }
function col_width() {return (svg_width() / actual_max()) * layer_width; }
function col_heigth() {return svg_height() / data.length * layer_height; }

var bars = svg.selectAll('rect').data(data);

bars.enter().append('rect')
.attr('width', function(d) { return d.y * col_width(); })
.attr('height',col_heigth() * 0.9)
.attr('y', function(d, i) { return i * col_heigth() + col_top(); })
.attr('x', col_left())
.attr('fill', '#0072B2')
.attr('opacity', function(d) { return d.y / actual_max(); })
.attr('tip', function(d) { return (d.y * col_width()) + col_left(); })
.attr("d", function(d) { return d.x; })
.on("click", function(){
Shiny.setInputValue(
"bar_clicked",
d3.select(this).attr("d"),
{priority: "event"}
);
})
.on("mouseover", function(){
d3.select(this)
.attr('fill', '#ffb14e');
})
.on("mouseout", function(){
d3.select(this)
.attr('fill', '#0072B2');
});

bars.exit().remove();

bars.transition()
.duration(500)
.attr('width', function(d) { return d.y * col_width(); })
.attr('height',col_heigth() * 0.9)
.attr('y', function(d, i) { return i * col_heigth() + col_top(); })
.attr('x', col_left())
.attr('opacity', function(d) { return d.y / actual_max(); })
.attr('tip', function(d) { return (d.y * col_width()) + col_left(); });

// Identity labels

var txt = svg.selectAll('text').data(data);

txt.enter().append('text')
.attr('x', col_left_text)
.attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
.text(function(d) {return d.label; })
.style('font-size', '12px')
.style('font-family', 'sans-serif');

txt.exit().remove();

txt.transition()
.duration(1000)
.attr('x', col_left_text)
.attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
.attr("d", function(d) { return d.x; })
.style('font-size', '12px')
.style('font-family', 'sans-serif')
.text(function(d) {return d.label; });

// Numeric labels

var totals = svg.selectAll().data(data);

totals.enter().append('text')
.attr('x', function(d) { return ((d.y * col_width()) + col_left()) * 1.01; })
.attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
.style('font-size', '12px')
.style('font-family', 'sans-serif')
.text(function(d) {return d.y; });

totals.exit().remove();

totals.transition()
.duration(1000)
.attr('x', function(d) { return ((d.y * col_width()) + col_left()) * 1.01; })
.attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
.attr("d", function(d) { return d.x; })
.text(function(d) {return d.y; });

// Title

svg.append('text')
.attr('x', svg_width() * 0.01)
.attr('y', svg_height() * 0.05)
.style('font-size', '18px')
.style('font-family', 'sans-serif')
.text('Top 10 Destination Airports');

// Sub-title

svg.append('text')
.attr('x', svg_width() * 0.99)
.attr('y', svg_height() * 0.05)
.attr('text-anchor', 'end')
.style('font-size', '12px')
.style('font-family', 'sans-serif')
.text('Click bar for details');

117 changes: 117 additions & 0 deletions sqlite/col_plot.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
// !preview r2d3 data=data.frame(y = c(5000,2000,3000,4000), x = c(1,2,4,5), label = c('jan', 'feb', 'mar', 'apr'))

var layer_left = 0.01;
layer_top = 0.2;
layer_height = 0.7;
layer_width = 0.97;

function svg_height() {return parseInt(svg.style('height'))}
function svg_width() {return parseInt(svg.style('width'))}
function actual_max() {return d3.max(data, function (d) {return d.y; }); }
function col_width() {return svg_width() / data.length * layer_width;}
function col_heigth() {return (svg_height() /actual_max()) * layer_height; }

function col_top() {return svg_height() * layer_top; }
function col_left() {return svg_width() * layer_left;}

var cols = svg.selectAll('rect').data(data);

cols.enter().append('rect')
.attr('height', function(d) {return (d.y * col_heigth()); })
.attr('width', col_width())
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left); })
.attr('y', function(d) {return col_top() + ((actual_max() - d.y) * col_heigth()); })
.attr('fill', '#009E73')
.attr('opacity', 0.5)
.attr('stroke', 'white')
.attr('d', function(d) { return d.x; })
.on("click", function(){
Shiny.setInputValue(
"column_clicked",
d3.select(this).attr("d"),
{priority: "event"}
);
})
.on("mouseenter", function(){
d3.select(this)
.attr('opacity', 1)
.attr('fill', '#ffb14e');
})
.on("mouseleave", function(){
d3.select(this)
.attr('opacity', 0.5)
.attr('fill', '#009E73');
});

cols.exit().remove();

cols.transition()
.duration(500)
.attr('height', function(d) {return (d.y * col_heigth()); })
.attr('width', col_width())
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left); })
.attr('y', function(d) {return col_top() + ((actual_max() - d.y) * col_heigth()); })
.attr('fill', '#009E73')
.attr('opacity', 0.5)
.attr('stroke', 'white');

// Identity labels

var txt = svg.selectAll('text').data(data);

txt.enter().append('text')
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
.attr('y', function(d) {return svg_height()* 0.95;})
.style('font-size', '10px')
.text(function(d) {return d.label;})
.style('font-family', 'sans-serif')
.attr('text-anchor', 'middle');


txt.exit().remove();

txt.transition()
.duration(500)
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
.attr('y', function(d) {return svg_height()* 0.95;})
.style('font-size', '10px')
.text(function(d) {return d.label;})
.style('font-family', 'sans-serif')
.attr('text-anchor', 'middle');

// Numeric labels

var totals = svg.selectAll('totals').data(data);

totals.enter().append('text')
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
.attr('y', function(d) {return (col_top() * 0.9) + ((actual_max() - d.y) * col_heigth()); })
.attr('text-anchor', 'middle')
.style('font-size', '10px')
.style('font-family', 'sans-serif')
.text(function(d) {return d.y; });

totals.exit().remove();

totals.transition()
.duration(500)
.attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
.attr('y', function(d) {return col_top() + ((actual_max() - d.y) * col_heigth()); })
.text(function(d) {return d.y; });

// Title
svg.append('text')
.attr('x', svg_width()* 0.01)
.attr('y', svg_height()* 0.05)
.style('font-size', '18px')
.style('font-family', 'sans-serif')
.text('Total flights');

//Sub-title
svg.append('text')
.attr('x', svg_width()* 0.99)
.attr('y', svg_height()* 0.05)
.attr('text-anchor', 'end')
.style('font-size', '12px')
.style('font-family', 'sans-serif')
.text('Click bar for details');
Loading

0 comments on commit bc256f6

Please sign in to comment.