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
<!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="//www.w3.org/2000/svg" xmlns:xlink="//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># 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"
#)