Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/code.R

Last active April 23, 2020 01:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save timelyportfolio/fb5819e78a904d7b61f1186ccb7a0e4b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save timelyportfolio/fb5819e78a904d7b61f1186ccb7a0e4b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timelyportfolio revised this gist Apr 23, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions code.R
    View file
    Original file line number Diff line number Diff line change
    @@ -55,8 +55,8 @@ debugger
    var newHeight = sizes[1];
    d3v4.select(el)
    .style('width', newWidth)
    .style('height', newHeight);
    .style('width', newWidth + 'px')
    .style('height', newHeight + 'px');
    d3v4.select(el).select('svg')
    .attr('transform','rotate(' + degrees + ')')
  2. timelyportfolio revised this gist Apr 23, 2020. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions code.R
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ library(scatterD3)
    sd3 <- scatterD3(x = mtcars$wt, y = mtcars$mpg, data=NULL, lab = rownames(mtcars),
    col_var = mtcars$cyl, symbol_var = mtcars$am,
    xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders",
    symbol_lab = "Manual transmission", html_id = NULL, height = 1000, width = 2000)
    symbol_lab = "Manual transmission", html_id = NULL, height = 300, width = 500)

    browsable(
    tags$div(
    @@ -54,8 +54,9 @@ debugger
    var newWidth = sizes[0];
    var newHeight = sizes[1];
    el.width = newWidth + 'px';
    el.height = newHeight + 'px';
    d3v4.select(el)
    .style('width', newWidth)
    .style('height', newHeight);
    d3v4.select(el).select('svg')
    .attr('transform','rotate(' + degrees + ')')
  3. timelyportfolio revised this gist Apr 23, 2020. No changes.
  4. timelyportfolio revised this gist Apr 23, 2020. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions code.R
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ library(scatterD3)
    sd3 <- scatterD3(x = mtcars$wt, y = mtcars$mpg, data=NULL, lab = rownames(mtcars),
    col_var = mtcars$cyl, symbol_var = mtcars$am,
    xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders",
    symbol_lab = "Manual transmission", html_id = NULL)
    symbol_lab = "Manual transmission", html_id = NULL, height = 1000, width = 2000)

    browsable(
    tags$div(
    @@ -50,13 +50,17 @@ debugger
    // partial solution assuming width < height
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    var newHeight = fitRect(width, height, degrees)[1];
    var sizes = fitRect(width, height, degrees);
    var newWidth = sizes[0];
    var newHeight = sizes[1];
    el.height = newHeight[1] + 'px';
    el.width = newWidth + 'px';
    el.height = newHeight + 'px';
    d3v4.select(el).select('svg')
    .attr('transform','rotate(' + degrees + ')')
    .style('margin-top', (newHeight - height) / 2)
    .style('margin-left', (newWidth - width) / 2)
    }
    "
    )
  5. timelyportfolio created this gist Apr 23, 2020.
    64 changes: 64 additions & 0 deletions code.R
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    library(htmltools)
    library(scatterD3)

    sd3 <- scatterD3(x = mtcars$wt, y = mtcars$mpg, data=NULL, lab = rownames(mtcars),
    col_var = mtcars$cyl, symbol_var = mtcars$am,
    xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders",
    symbol_lab = "Manual transmission", html_id = NULL)

    browsable(
    tags$div(
    htmlwidgets::onRender(
    sd3,
    "
    function(el, x) {
    debugger
    // hard coded for now assuming we want to rotate 45 degrees
    var degrees = 45;
    // https://stackoverflow.com/questions/622140/calculate-bounding-box-coordinates-from-a-rotated-rectangle
    function fitRect( rw,rh,degrees ){
    var radians = degrees * Math.PI / 180;
    var x1 = -rw/2,
    x2 = rw/2,
    x3 = rw/2,
    x4 = -rw/2,
    y1 = rh/2,
    y2 = rh/2,
    y3 = -rh/2,
    y4 = -rh/2;
    var x11 = x1 * Math.cos(radians) + y1 * Math.sin(radians),
    y11 = -x1 * Math.sin(radians) + y1 * Math.cos(radians),
    x21 = x2 * Math.cos(radians) + y2 * Math.sin(radians),
    y21 = -x2 * Math.sin(radians) + y2 * Math.cos(radians),
    x31 = x3 * Math.cos(radians) + y3 * Math.sin(radians),
    y31 = -x3 * Math.sin(radians) + y3 * Math.cos(radians),
    x41 = x4 * Math.cos(radians) + y4 * Math.sin(radians),
    y41 = -x4 * Math.sin(radians) + y4 * Math.cos(radians);
    var x_min = Math.min(x11,x21,x31,x41),
    x_max = Math.max(x11,x21,x31,x41);
    var y_min = Math.min(y11,y21,y31,y41);
    y_max = Math.max(y11,y21,y31,y41);
    return [x_max-x_min,y_max-y_min];
    }
    // partial solution assuming width < height
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    var newHeight = fitRect(width, height, degrees)[1];
    el.height = newHeight[1] + 'px';
    d3v4.select(el).select('svg')
    .attr('transform','rotate(' + degrees + ')')
    .style('margin-top', (newHeight - height) / 2)
    }
    "
    )
    )
    )