I think this is an even more relevant example than the simple div bar chart from earlier today (see gist). Instead of R using V8 + rjade with Javascript jade and d3.js, we'll use paths.js. paths.js provides nice APIs for working with SVG, and fortunately for us, also works cleanly with V8. We might as well use rjade while we are at it and see how we can define style attributes and the d attribute for a SVG path.
paths.js Wiki
| # use paths.js + jade in R with V8 | |
| library(rjade) | |
| library(V8) | |
| library(htmltools) | |
| ct = new_context("window") | |
| ct$source( | |
| "https://raw.githubusercontent.com/andreaferretti/paths-js/master/dist/global/paths.js" | |
| ) | |
| ct$eval(" | |
| var Polygon = paths.polygon; | |
| var points = [[1, 3], [2, 5], [3, 4], [2, 0]]; | |
| var polygon = Polygon({ | |
| points: points, | |
| closed: true | |
| });") | |
| # use jade to splice in our polygon defined in paths.js | |
| (hf <- html_print( | |
| HTML( | |
| jade_compile( | |
| ' | |
| doctype xml | |
| svg(version="1.1",xmlns="http://www.w3.org/2000/svg",xmlns:xlink="http://www.w3.org/1999/xlink",width="400px",height="400px",viewBox="0 0 10 10") | |
| path(style={fill: fillColor})&attributes({"d": pathD}) | |
| ' | |
| ,pretty=T | |
| )(pathD = ct$eval("polygon.path.print()"), fillColor = "red") | |
| ) | |
| )) | |
| #library(gistr) | |
| #gist_auth(reauth=T) | |
| #gist_create( | |
| # hf | |
| # ,description = "paths.js + jade with R using V8 + rjade" | |
| #) |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| </head> | |
| <body style="background-color:white;"> | |
| <?xml version="1.0" encoding="utf-8" ?> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px" viewBox="0 0 10 10"> | |
| <path style="fill:red" d="M 1 3 L 2 5 L 3 4 L 2 0 Z "></path> | |
| </svg> | |
| </body> | |
| </html> |