Skip to content

Instantly share code, notes, and snippets.

@nstrayer
Created April 5, 2018 15:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nstrayer/9f0f7e25db93f854fe0fff27fe855cad to your computer and use it in GitHub Desktop.
Save nstrayer/9f0f7e25db93f854fe0fff27fe855cad to your computer and use it in GitHub Desktop.
library(tidyverse)
library(htmltools)
# devtools::install_github('ramnathv/htmlwidgets')
library(htmlwidgets)
# devtools::install_github('timelyportfolio/d3r')
library(d3r)
data <- data_frame(x = rnorm(50), y = rnorm(50));
browsable(
tagList(
tags$script(HTML("
HTMLWidgets.widget({
name: 'awidget',
type: 'output',
factory: function(el, width, height) {
const svg = d3.select(el).append('svg')
.attr('width', width)
.attr('height', height);
const padding = 25;
const x_scale = d3.scaleLinear().range([padding, width]);
const y_scale = d3.scaleLinear().range([height, padding]);
return {
renderValue: function(x) {
const scatter_data = HTMLWidgets.dataframeToD3(x.data);
x_scale.domain(d3.extent(scatter_data, d => d.x));
y_scale.domain(d3.extent(scatter_data, d => d.y));
svg.selectAll('.scatter_points')
.data(scatter_data)
.enter().append('circle')
.attr('cx', d => x_scale(d.x))
.attr('cy', d => y_scale(d.y))
.attr('r', 5);
},
resize: function(width, height) { }
};
}
});
")),
createWidget("awidget", x=list(data = data)),
d3_dep_v4()
)
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment